How to preserve state of the edit dialog?

Developing Nodes
1

Hey there

I want to preserve the selected values and therefore whole state of the custom node code below. What is the best way to do that, that e.g. after browser refresh or restart of node-red the selected values are still shown in the UI?

Thank you and have a great weekend.

<script type="text/javascript">
    RED.nodes.registerType('sivideo-subscribe-event', {
        category: 'SiVideo',
        paletteLabel: 'Subscribe Event',
        color: '#009999',
        defaults: {
            name: { value: "" },
            server: { value: "", type: "sivideo-server" },
            eventTypes: { value: "" }
        },
        inputs: 0,
        outputs: 1,
        icon: "font-awesome/fa-rss",
        label: function () {
            return this.name || "SiVideo Subscribe Event";
        },
        oneditprepare: function () {
            // click event for the button to reload the eventTypes
            $("#node-input-eventTypes-button").click(function () {
                // make a get request to the server to get the eventTypes
                $.get("/getEventTypes", function (data) {             
                    // set the eventTypes to the input
                    $("#node-input-eventTypes-field").typedInput({
                        types: [
                            {
                                value: "eventTypes",
                                multiple: "true",
                                options: data,
                            }
                        ],

                    })
                });
            });
        },
        // create Listener with the selected eventTypes
        oneditsave: function () {
            var nodeId = this.id;
            // get the selected eventTypes
            var eventTypes = $("#node-input-eventTypes-field").typedInput("value");         
            // create a listener with the selected eventTypes
            console.log("sending post request to: /subscribeEvents/" + nodeId + " with eventTypes: " + eventTypes);
            $.post("/subscribeEvents/" + nodeId, { eventTypes: eventTypes, nodeId: nodeId }, function (data) {
            });
        }
    }
    );
</script>
2

To preserve a value, you need to add the item to the defaults

Try changing this:

to this:

            this.eventTypes = $("#node-input-eventTypes-field").typedInput("value");

This is a guess based on the fact I see you have declared eventTypes in your defaults object

3

Thank you for your reply. Unfortunately this does not work, since Iam there only saving the value and not the label too. I want to basically when I reopen the typedInput have a preserved state. Gosh this seems so hard in comparison to e.g. vuejs or react.

Thanks

4

You can store more than simple values in the defaults.

you could, for example, store a lookup object that contains labels and values. simply populate it in oneditsave and restore it in oneditprepare

they did not exist when Node-RED was invented! Browsers did not have standardised methods either. jQuery was the main choice to simplify web development.

Also, don't forget, there is a lot going on behind the scenes (it isnt just a web server)

5

To be fair, Typed Inputs ARE VERY hard to work with! :slight_smile:

6

With great flexibility comes great complexity.

Spiderman :wink:

7

great! How does one extract the selected values from a typedInput is there something like a direct method or similar?

8

See methods in the docs

e.g. this.value = $('my-typed-input').typedInput('value')

9

Thanks! So if I see correctly there is no way of receiving the label and value that are selected at the same time?

10

I dont understand why you would need to?

EDIT:

PS: if you click the reply button at the bottom (as opposed to the reply button on the comment you are responding to), we do not get a notification and have no idea who you are responding to.