Dynamic fill option list in a custom node

[Peter Vledder]

Dear All,

I am currently creating my own nodes. So I have a node with regular input fields but also a couple pull down menu`s. I would like to populate the pulldown menu`s with items that I get from for instance a ajax call or a websockt e.g. a third party source.... Is this possible?

Regards,

Peter

[Bart Butenaers]

Hi Peter,

You can have a look e.g. at my node-red-contrib-unit-converter node.

In the html file, there is e.g. an empty dropdown 'category':

    <div class="form-row">
        <label for="node-input-category"><i class="fa fa-envelope"></i> Category</label>
        <select id="node-input-category"></select>
    </div>

In the oneditprepare function, this dropdown is filled dynamically with values that I get from the server:

            // Load the available categories from the server
            $.getJSON('unit-converter/categories', function(data) {
                // The response is a json array, containing all the available unit categories
                data.sort();
               
                // Allow the user to specify the units via the input message
                //$("<option value='message'> **MESSAGE BASED**</option>").appendTo("#node-input-category");
           
                // Show all available categories in the dropdown
                for (i = 0; i < data.length; i++) {
                    var category = data[i];
                    $("<option value='" + category + "'> " + category.charAt(0).toUpperCase() + category.slice(1) + "</option>").appendTo("#node-input-category");
                }  
               
                // Set the 'length' as default category at the start, to make sure that the 'unit' dropdowns are filled correctly
                if (!node.category) {
                    node.category = 'length';
                }
                // When a categorie is already available, make sure it is selected in the dropdown
                if (node.category) {
                    $("#node-input-category").val(node.category);
                   
                    // Setting the dropdown value from javascript (using val()), won't trigger the change-event automatically
                    $('#node-input-category').trigger('change');
                }
            });  

And in the Js file you will see how these values are generated on the server side:

    // Make all the available types accessible for the node's config screen
    RED.httpAdmin.get('/unit-converter/:cmd', /*RED.auth.needsPermission('unitconverter.read'),*/ function(req, res){
        var node = RED.nodes.getNode(req.params.id);
       
        if (req.params.cmd === "categories") {
            // Return a list of all available categories (mass, length, ...)
            res.json(convert().measures());
        }
        ....
        }
    });

So the browser requests categories from the server, and the server responds with a JSON array of values.

Don't know if this is the most optimal way, but it works fine ...

Good luck with it !!!

Bart Butenaers

[Bart Butenaers]

@Everybody,

Can anybody explain in dummy language how the RED.auth.needsPermission works?

I understand that you need to add that statement to make sure that only certain users (with specific permissions) can request the data.

However still some questions about that:

1. I assume you don't need that when you simply get a list of values to display in a dropdown, since everybody is allowed to access that data.  Or does this create some kind of security hole in any way ???
2. Suppose we return data that is not accessible for everybody, so we need to add some RED.auth.needsPermission('xxxxx.read') stuff.  Does the xxxxx need to be unique, and do we have to define somewhere this xxxxx.read , e.g. in the settings.js file ????
3. Is there (beside a .read) also some .write or any other options ?

Thanks !!

Bart

[Nick O'Leary]

Hi Bart,

1. It really depends what the data is. That list of values could be sensitive information that you wouldn't want any unauthorised user from seeing. Its better to err on the side of secure.

2&3

The permission a route requires should be of the form xxxx.read or xxxx.write. 'xxxx' should be something meaningful for your node - and typically, all routes your node defines would use the same xxxx.

Currently, a user defined under adminAuth can only have either read or full access (represented as * in the config).

But the system is built to allow finer grained permissions in the future. For example, that would allow a user to have flows.write permission (allowing them to deploy changes) but not have nodes.write permission (they can't install new nodes). When/if we enable that granularity, I don't know - there hasn't been much demand for it, so is low priority at the moment. If it does come around, we'll review what permissions have been adopted by the community and see if we need to formalise the naming a bit more.

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/38372628-5bf6-4260-97e5-3ef74bc5bfa3%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Peter Vledder]

Hi Bart,

This is exactly what I need!!! Thanks a lot for your input!

Kind Regards,

Peter

Op zondag 28 januari 2018 20:33:25 UTC+1 schreef Bart Butenaers:

[Peter Vledder]

Hi Bart,

The data that you fetch is coming from your local server... is there a way to fetch that from a different one? So cross origin?

Gr,

Peter

Op zondag 28 januari 2018 20:18:18 UTC+1 schreef Peter Vledder:

[Bart Butenaers]

Hi Peter,

Yes indeed, in my case the dropdown values are fetched from my local server.

Never tried to get data from another server...

But in the getJson documentation you see that you can also specify an absolute url, with a ?jsoncallback=? postfix. 

However, don't know how you should get that working with https (instead of http).

When the relative URL is GET :

$.getJSON('unit-converter/categories', function(data)

Then I see I my Chrome developer tools that he nicely gets json content from my local server xxx.xxx.xxx.xxx :

When I use the same url as absolute URL:

$.getJSON('https://xxx.xxx.xxx.xxx:1880/unit-converter/categories?jsoncallback=?', function(data) {

Then I get an authentication error (for the same url) :

Seems that you have to specify the username and password, but I assume that is not very secure ...

No idea how you could around this ;-(

Bart