Add dynamically data to node configuration

[edoardottt]

I have a custom node, which in the config file has code like this:

    <div class="form-row">
        <label for="node-input-stuff"><i class="icon-tag"></i> Stuff</label>
            <select id="node-input-stuff">
                <p id="options"></p>
            </select>
    </div>

I would like to fill the options of the select tag dynamically with a js get request. I have to retrieve some JSON and then bring only some attributes.
Then I would like with the document.getElementById("options").innerHTML = text; I want fill in the options. Is it possible in some way?

[dceejay]

that is similar to the serialport looking up the list of available ports... https://github.com/node-red/node-red-nodes/blob/master/io/serialport/25-serial.html#L395

[edoardottt]

Maybe I didn't understand what that code does, but I think it's not what I'm looking for

[knolleary]

Here is an explanation of how the serial port works that may help: https://stackoverflow.com/questions/41567175/send-data-on-configuration/41567832#41567832

[edoardottt]

ok, now it's better, but I have still some questions...

• How can I set a list of options if I have data?
  There it's used a text field and I can't use a text field

• I have the data in the js file, can I use simply this to define an API endpoint?
  Maybe it isn't clear when you say 'You can't just put /'

RED.httpAdmin.get("/devices", function(req,res) {
        devices.list(function (err, devices) {
            res.json(devices);
        });
    });

[edoardottt]

And this is the html part inside a script tag.

$("#node-input-stuff").click(function() {
                $.getJSON('/devices',function(data) {
                    var devices = [];
                    $.each(data, function(i, device) {
                        devices.push(device);
                    });
                    $("#node-input-stuff").autocomplete({
                        source:devices,
                        minLength:0,
                        close: function( event, ui ) {
                            $("#node-input-stuff").autocomplete( "destroy" );
                        }
                    }).autocomplete("search","");
                });
            });

[knolleary]

The serial node is an example of a node that retrieves data from the runtime and updates the edit dialog with that information.

In that particular case, it creates a text box with autocomplete support.

It sounds like you want a select box with the list of options. Here is an example of populating a select box dynamically - https://stackoverflow.com/a/42434207/2117239

The precise detail will depend on the format of the data you have and how you want it represented in the UI.

[TotallyInformation]

uibuilder also has a number of dynamic lookups, some of which populate drop-down boxes. The code is generally pretty well commented so may be of use.

[edoardottt]

Really useful! thanks The last question I have to do is...how can I use JQuery in the html file? I have to write something in the settings file??

[knolleary]

jQuery is provided as part of the editor environment. You don't need to do anything to add it.

[edoardottt]

It doesn't work for me
This is my script:

$.getJSON('devices',function(data) {
                for (var i = 0; i <= data.length; i++) { 
                    $('#SELECT_LIST').append('<option value="' + data[i]['deviceid'] + '">' + data[i]['name'] + '</option>');
                }
            }); 

Where I have to put this? Because I'm sure that have opened the endpoint.
If I type in shell curl http://localhost:1880/devices I get back the JSON..

[knolleary]

Firstly don't call your endpoint devices. Pick a name that is related to the node type you are registering - that reduces the chances that your endpoint clashes with someone elses.

You would put that code in the oneditprepare function of your node's html file. That function is called when the edit dialog is about to be displayed.