Save HTML select tag selection for reload value in config screen

Developing Nodes
1

Hi,
in my node I need to store the value of the selected select tag to be able to set the value when I re-open config screen.

Now when I open config display after first configuration, the first value in the list is always displayed.

What would be the best solution to use ?

Thanks,

Nicolò

2

You store it as a property if the node... Just like you would any value you want to store as part of the node's configuration.

  1. Add a property to your nodes defaults object
  2. Give you select the appropriate id value and the editor will automatically map the node property to the value of the select.

https://nodered.org/docs/creating-nodes/config-nodes#defining-a-config-node

Its a bit more complicated if you are dynamically generating the contents of the select box.

3

Thanks,

I'm generating dynamically the contents of the select tag.
A different box with different ID is enabled based on the value selected in a previous box.

device-config
device-config517×928 28.3 KB

data-config
data-config459×837 38.5 KB

4

In which case you'll need to explicitly set the selected value in your oneditprepare function after you have populated it.

You will still need to add a property to the node to store the selected value.

5

This is what I tried (but it doesn't work).
Once selected the correct value I set a variable data in oneditsave.

    oneditsave: function () {
    
         <!--Check wich device type is selected-->
         let deviceType = $("#node-input-device option:selected");
         
                <!--PAC2200-->
                if(deviceType.val() == "pac2200") {
                    
                    let dataValue = $("#node-input-data-pac2200 option:selected");
                    this.data = dataValue.val();
          
                }

In data I have the value selected in the box. After this in oneditprepare I set previous selected box with the last value of data .

    oneditprepare: function() {
        
        $("#node-input-device").on("change",function() {
            if (this.value === "pac2200") {
                $("#node-input-data-pac2200").show();
                $("#node-input-data-pac1200").hide();
                $("#node-input-data-pac1600").hide();
                $("#node-input-data-pac3100").hide();
                $("#node-input-data-pac3120").hide();
                $("#node-input-data-pac3220").hide();
                $("#node-input-data-pac3200T").hide();
                $("#node-input-data-pac4200").hide();
                $("#node-input-data-pac5200").hide();
                $("#node-input-data-sem3").hide();
                $("#node-input-data-atc6300").hide();
                $("#node-input-data-3va").hide();
                $("#node-input-data-powercenter1000").hide();
                
                $('#node-input-data-pac2200').val(this.data);
                
            }

data is declared in defaults object

RED.nodes.registerType('measure',{
        category: 'sentron',
        color: '#009999',
        defaults: {
            name: {value:""},
            unitId: {value: "1",required:true},
            device: {value: "pac1200",required:true},
            data: {value: "", required: true}
        },
        inputs:1,
        outputs:1,
        icon: "serial.png",
        label: function() {
            return this.name||"measure";
        }

Thanks

6

At this point of your code this is not your node, so this.data is not defined.

At the start of your oneditprepare function, grab the value:

const myData = this.data

You can then use myData inside the change event handler.

7

Ok, now works!!!!!

Thanks.