UI control to update a form

Hello.

I am reading sensor data that are displayed on a table.
In the future i also want to control some of the data of my device. For that i created a form
with switches.
I created a ui control to synconize the table and the form. The problem right now i quiet obvious.
When i change a switch of my form, thae ui control changes the switch back to it "correct" state.

Whats the best common practice to syncronize the form correct, but also allow changes to be made until the submit button is pushed. Right now the only solution comes to my mind is, that the form should only be updated with the correct values IF a tab change is made. Here is my test flow:

[
    {
        "id": "b935d7233105bbd9",
        "type": "debug",
        "z": "bb1e74244b8354b7",
        "name": "debug 16",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 120,
        "y": 1180,
        "wires": []
    },
    {
        "id": "73c0be34c0643424",
        "type": "function",
        "z": "bb1e74244b8354b7",
        "name": "Key/Value for table",
        "func": "msg.payload= [\n    {\n        \"Remote\": msg.payload.ActRemoteAccess,\n        \"Deaerating\": msg.payload.ActDeaerating,\n        \"AnalogueMode\": msg.payload.AnalogueMode,\n        \"SlowMode\": msg.payload.ActSlowMode,\n        \"Velocity\": msg.payload.ActVelocity,\n        \"AutoDeaerating\": msg.payload.AutoDeaeratingEnable,\n        \"FlowControlEnable\": msg.payload.FlowControlEnable,\n        }\n];\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 390,
        "y": 1060,
        "wires": [
            [
                "234693e8e5948678",
                "5de66e869c8a57ca",
                "6e6ac23bd280104d",
                "2004fd4d5a14c3db"
            ]
        ]
    },
    {
        "id": "234693e8e5948678",
        "type": "debug",
        "z": "bb1e74244b8354b7",
        "name": "debug 17",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 320,
        "y": 1180,
        "wires": []
    },
    {
        "id": "5de66e869c8a57ca",
        "type": "ui_table",
        "z": "bb1e74244b8354b7",
        "group": "5879d49495918d3d",
        "name": "table",
        "order": 2,
        "width": "0",
        "height": "0",
        "columns": [],
        "outputs": 0,
        "cts": false,
        "x": 910,
        "y": 1060,
        "wires": []
    },
    {
        "id": "7fcf8c03b1c476cd",
        "type": "ui_form",
        "z": "bb1e74244b8354b7",
        "name": "",
        "label": "",
        "group": "fa7c1f04e5714b54",
        "order": 2,
        "width": 0,
        "height": 0,
        "options": [
            {
                "label": "REMOTE (disable/enable)",
                "value": "Remote",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "Deaerating",
                "value": "Deaerating",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "AnalogMode",
                "value": "AnalogMode",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "SlowMode",
                "value": "SlowMode",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "Velocity",
                "value": "Velocity",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "AutoDeaerating",
                "value": "AutoDeaerating",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "FlowControl",
                "value": "FlowControl",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "Pump Start/Stop",
                "value": "Pump Start/Stop",
                "type": "switch",
                "required": true,
                "rows": null
            },
            {
                "label": "Manual [ml/h]",
                "value": "Manuel",
                "type": "number",
                "required": true,
                "rows": null
            },
            {
                "label": "PulseVolume [nl]",
                "value": "PulseVolume",
                "type": "number",
                "required": true,
                "rows": null
            },
            {
                "label": "BatchVolume [ml]",
                "value": "BatchVolume",
                "type": "number",
                "required": true,
                "rows": null
            },
            {
                "label": "DosingTime [s]",
                "value": "DosingTime",
                "type": "number",
                "required": true,
                "rows": null
            }
        ],
        "formValue": {
            "Remote": false,
            "Deaerating": false,
            "AnalogMode": false,
            "SlowMode": false,
            "Velocity": false,
            "AutoDeaerating": false,
            "FlowControl": false,
            "Pump Start/Stop": false,
            "Manuel": "",
            "PulseVolume": "",
            "BatchVolume": "",
            "DosingTime": ""
        },
        "payload": "",
        "submit": "submit",
        "cancel": "cancel",
        "topic": "topic",
        "topicType": "msg",
        "splitLayout": true,
        "className": "",
        "x": 930,
        "y": 1180,
        "wires": [
            []
        ]
    },
    {
        "id": "2004fd4d5a14c3db",
        "type": "function",
        "z": "bb1e74244b8354b7",
        "name": "function 4",
        "func": "msg.payload = { \"Remote\": msg.payload[0].Remote}\nreturn msg; \n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 700,
        "y": 1300,
        "wires": [
            [
                "7fcf8c03b1c476cd",
                "32b6f7f20a7d0a24"
            ]
        ]
    },
    {
        "id": "32b6f7f20a7d0a24",
        "type": "debug",
        "z": "bb1e74244b8354b7",
        "name": "debug 23",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 940,
        "y": 1300,
        "wires": []
    },
    {
        "id": "6e6ac23bd280104d",
        "type": "ui_ui_control",
        "z": "bb1e74244b8354b7",
        "name": "",
        "events": "change",
        "x": 740,
        "y": 1180,
        "wires": [
            [
                "7fcf8c03b1c476cd"
            ]
        ]
    },
    {
        "id": "f6252dc040429965",
        "type": "inject",
        "z": "bb1e74244b8354b7",
        "name": "Testdata",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "json",
        "x": 120,
        "y": 1040,
        "wires": [
            [
                "b935d7233105bbd9",
                "73c0be34c0643424"
            ]
        ]
    },
    {
        "id": "5879d49495918d3d",
        "type": "ui_group",
        "name": "Read",
        "tab": "a42d8adbe9caeb3d",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": false,
        "className": ""
    },
    {
        "id": "fa7c1f04e5714b54",
        "type": "ui_group",
        "name": "Write2",
        "tab": "a42d8adbe9caeb3d",
        "order": 3,
        "disp": false,
        "width": "11",
        "collapse": false,
        "className": ""
    },
    {
        "id": "a42d8adbe9caeb3d",
        "type": "ui_tab",
        "name": "Pumpe_01",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

thank you

Normally, you would update the form inputs when the source data changes. That way, it is always up-to-date and ready for use. Of course, that doesn't work well if the source data changes rapidly but then if it does, you might need to question why the user needs to update it via a form.

So if the data changes only occasionally, I'd probably still send that to the Dashboard as it changes anyway, the Dashboard nodes should cache the latest values. Then, when a user shows the form, it should have the latest data that they can update and submit.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.