Lately adding properties on configuration node

Developing Nodes
1

I add latetally (after a httpadmin request) properties on a configuration node. everything is saved on the server part (flow files), but when i m editing again the node configuration, the previous settings are not set.

i use the oneditprepare to add new item to the data-template-name panel

               oneditprepare: function() {
                    var formRows = $("div.form-row");
                    if (ofogtype.varList && ofogtype.varList.export) {
                        $.each(ofogtype.varList.export, function(i, item) {
                            // put in GUI
                            var formRow=$('<div>').addClass("form-row")
                                .append(
                                    $('<label/>').attr("for", 'node-config-input-'+item.k).text(item.k)
                                        .prepend($('<i/>').addClass("icon-tag")),
                                    $('<input/>',{type:"text"}).attr('id', 'node-config-input-'+item.k)
                                        .attr('placeholder', item.k)
                                        //.add('placeHoler', item.k)
                                );
                                formRows.after(formRow);
                        });
                    } 
                }

The generated HTML looks like if i write HTML. But....

2

But what?

What have you got in your node's defaults object?

What is ofogtype.varList ? Where does that come from and how does it relate to the properties you have defined in the defaults object?

3

the but ==> but when i m editing again the node configuration, the previous settings are not set.

for ofogtype.varList

        varList: {
            export :[ 
                {k: "Logger_EndPoint", v: "{{ hostname }}/endpoint/v1/"},
                {k: "var2", v: "ver2 default"},
            ] 
        }
}

For default object, dynamically created:

            var defaultsSettings= {
                    instanceName: {value:"Logger"}
            };
            // Get export Var
            if (ofogtype.varList && ofogtype.varList.export) {
                $.each(ofogtype.varList.export, function(i, item) {
                    defaultsSettings[item.k]= { value: item.v };
                }); 
            };

            RED.nodes.registerType(localNodeType,{
                category: 'config',
                color: '#a6bbcf',
                defaults: defaultsSettings,
....

There's something wrong with the DOM

I add a class to the DOM element:

                oneditprepare: function() {
                    var formRows = $("div.form-row");
                    console.log("----------------------");
                    console.log(this);
                    if ( ofogtype.varList && ofogtype.varList.export) {
                        console.log("----------------prepare gui-----");
                        guiWidgetPrepared=true;
                        $.each(ofogtype.varList.export, function(i, item) {
                            // put in GUI
                            var formRow=$('<div>').addClass("form-row").addClass("test-franck")
                                .append(
                                    $('<label/>').attr("for", 'node-config-input-'+item.k).text(item.k)
                                        .prepend($('<i/>').addClass("icon-tag")),
                                    $('<input/>',{type:"text"}).attr('id', 'node-config-input-'+item.k)
                                        .attr('placeholder', item.k)
                                        //.add('placeHoler', item.k)
                                );
                                formRows.after(formRow);
                        });
                    } 
                }

And in the console debugger of a browers, I have:

// At the start
$(".test-franck")
// ==> empty
// after opening config node
----------------prepare gui-----
i= 0
i= 1
$(".test-franck"); // A lot of objects
div.form-row.test-franck, div.form-row.test-franck, div.form-row.test-franck, div.form-row.test-franck, div.form-row.test-franck, div.form-row.test-franck, div.form-row.test-franck, div.form-row.test-franck, div.form-row.test-franck

// And it increasse each time i open the config node
4

Correction for the DOM, my selector was to naive.

                oneditprepare: function() {
                    var formRows = $("#last-static-row"); // <-- better selector
                    console.log("----------------------");
                    console.log(this);
                    if ( ofogtype.varList && ofogtype.varList.export) {
                        console.log("----------------prepare gui-----");
                        guiWidgetPrepared=true;
                        $.each(ofogtype.varList.export, function(i, item) {
                            // put in GUI
                            console.log("i=", i);
                            var formRow=$('<div>').addClass("form-row").addClass("test-franck")
                                .append(
                                    $('<label/>').attr("for", 'node-config-input-'+item.k).text(item.k)
                                        .prepend($('<i/>').addClass("icon-tag")),
                                    $('<input/>',{type:"text"}).attr('id', 'node-config-input-'+item.k)
                                        .attr('placeholder', item.k)
                                        //.add('placeHoler', item.k)
                                );
                                formRows.after(formRow);
                        });
                    } 
                }

but it is not correct my problem, previously set values not retrieve

5

No other progress, try a lot... may be i lose some events

6

Not proud of that, but it works ! forcing the value for the input:

                oneditprepare: function() {
                    var formRows = $("#last-static-row");
                    var currentConfignode=this;
                    if ( ofogtype.varList && ofogtype.varList.export) {
                        guiWidgetPrepared=true;
                        $.each(ofogtype.varList.export, function(i, item) {
                            // put in GUI
                            var formRow=$('<div>').addClass("form-row").addClass("test-franck")
                                .append(
                                    $('<label/>').attr("for", 'node-config-input-'+item.k).text(item.k)
                                        .prepend($('<i/>').addClass("icon-tag")),
                                    $('<input/>',{type:"text"}).attr('id', 'node-config-input-'+item.k)
                                        .attr('placeholder', item.v).val(currentConfignode[item.k])
                                );
                                formRows.after(formRow);
                        });
                    } 
                }