Dropdown + submit: change font color and ask for password before submit

Manuel_o · 19 April 2023 08:56

Hello friends.

Today i try to create the following:

A dropdown widget where the information of the payload will be written only after pushing "submit"
Change the colour of the widget (backgorund) to red, when changes are made. After submitting change the color back to "normal".
When i push submit to "publish" the payload of the dropdown, i want that there is a password prompt where i have to enter a password. Only after entering the correct password, the payload is send.

I already have point 1 and i am struggling with point 2 right now. I cant figure out, how to detect a change (a select in the dropdown) that initiates the color-change

my code so far:

[
    {
        "id": "c1c21252.8f72d8",
        "type": "ui_button",
        "z": "191728c3ee9255a0",
        "name": "submit remote",
        "group": "83fd112e3229a323",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "Submit",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 860,
        "y": 1300,
        "wires": [
            [
                "93b4c78d.a069"
            ]
        ]
    },
    {
        "id": "e91258f6.69587",
        "type": "function",
        "z": "191728c3ee9255a0",
        "name": "Store REMOTE",
        "func": "flow.set(\"selectedOption\",msg.payload);\nreturn null;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 480,
        "y": 1320,
        "wires": [
            [
                "661535bc6ac3dfb7"
            ]
        ]
    },
    {
        "id": "93b4c78d.a069",
        "type": "function",
        "z": "191728c3ee9255a0",
        "name": "Create Message",
        "func": "msg.payload = \"You selected \" + flow.get(\"selectedOption\");\ncontext.set(\"selectedOption\", null);\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1090,
        "y": 1300,
        "wires": [
            [
                "5f36baf00769c377"
            ]
        ]
    },
    {
        "id": "45f59cacf24d378b",
        "type": "debug",
        "z": "191728c3ee9255a0",
        "name": "debug 283",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 430,
        "y": 1260,
        "wires": []
    },
    {
        "id": "661535bc6ac3dfb7",
        "type": "debug",
        "z": "191728c3ee9255a0",
        "name": "debug 284",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 650,
        "y": 1300,
        "wires": []
    },
    {
        "id": "5f36baf00769c377",
        "type": "debug",
        "z": "191728c3ee9255a0",
        "name": "debug 285",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1320,
        "y": 1300,
        "wires": []
    },
    {
        "id": "78df02054f343c2d",
        "type": "ui_dropdown",
        "z": "191728c3ee9255a0",
        "name": "REMOTE_T",
        "label": "REMOTE:",
        "tooltip": "Activates Remote-control. Unable to control Pump when OFF",
        "place": "",
        "group": "83fd112e3229a323",
        "order": 1,
        "width": 3,
        "height": 1,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "ON",
                "value": true,
                "type": "bool"
            },
            {
                "label": "OFF",
                "value": false,
                "type": "bool"
            }
        ],
        "payload": "",
        "topic": "test",
        "topicType": "msg",
        "className": "",
        "x": 250,
        "y": 1320,
        "wires": [
            [
                "45f59cacf24d378b",
                "e91258f6.69587"
            ]
        ]
    },
    {
        "id": "83fd112e3229a323",
        "type": "ui_group",
        "name": "CONTROL",
        "tab": "4ad3c40739cbf998",
        "order": 1,
        "disp": true,
        "width": 10,
        "collapse": false,
        "className": ""
    },
    {
        "id": "4ad3c40739cbf998",
        "type": "ui_tab",
        "name": "PUMP A",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

thank you

E1cid · 19 April 2023 19:05

Try this

[{"id":"78df02054f343c2d","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"REMOTE_T","label":"REMOTE:","tooltip":"Activates Remote-control. Unable to control Pump when OFF","place":"","group":"83fd112e3229a323","order":1,"width":3,"height":1,"passthru":true,"multiple":false,"options":[{"label":"ON","value":true,"type":"bool"},{"label":"OFF","value":false,"type":"bool"}],"payload":"","topic":"remote_t","topicType":"str","className":"","x":310,"y":640,"wires":[["45f59cacf24d378b","9d766274c3751297"]]},{"id":"45f59cacf24d378b","type":"debug","z":"b9860b4b9de8c8da","name":"debug 283","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":490,"y":580,"wires":[]},{"id":"9d766274c3751297","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"topic","pt":"msg","to":"topic[0]","tot":"msg"},{"t":"set","p":"topic[1]","pt":"msg","to":"payload","tot":"msg","dc":true},{"t":"set","p":"background","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":640,"wires":[["c1c21252.8f72d8"]]},{"id":"c1c21252.8f72d8","type":"ui_button","z":"b9860b4b9de8c8da","name":"submit remote","group":"83fd112e3229a323","order":2,"width":2,"height":1,"passthru":false,"label":"Submit","tooltip":"","color":"","bgcolor":"{{background}}","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":360,"y":720,"wires":[["6369c7834354eb8c"]]},{"id":"492cfd0e7abe362c","type":"rbe","z":"b9860b4b9de8c8da","name":"","func":"rbe","gap":"","start":"","inout":"out","septopics":false,"property":"value","topi":"topic","x":710,"y":720,"wires":[["c1c21252.8f72d8","d614d81b6e161832"]]},{"id":"6369c7834354eb8c","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"topic[1]","pt":"msg","to":"value","tot":"msg"},{"t":"set","p":"topic","pt":"msg","to":"topic[0]","tot":"msg"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":720,"wires":[["492cfd0e7abe362c"]]},{"id":"d614d81b6e161832","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"Enter Password","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":800,"wires":[["1311084b3a617e5e"]]},{"id":"1311084b3a617e5e","type":"ui_toast","z":"b9860b4b9de8c8da","position":"prompt","displayTime":"3","highlight":"","sendall":false,"outputs":1,"ok":"OK","cancel":"Cancel","raw":false,"className":"","topic":"","name":"","x":530,"y":800,"wires":[["93b4c78d.a069"]]},{"id":"93b4c78d.a069","type":"function","z":"b9860b4b9de8c8da","name":"Create Message","func":"msg.payload = \"You selected \" + msg.value\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":700,"y":800,"wires":[["5f36baf00769c377"]]},{"id":"5f36baf00769c377","type":"debug","z":"b9860b4b9de8c8da","name":"debug 285","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":870,"y":800,"wires":[]},{"id":"83fd112e3229a323","type":"ui_group","name":"CONTROL","tab":"4ad3c40739cbf998","order":1,"disp":true,"width":10,"collapse":false,"className":""},{"id":"4ad3c40739cbf998","type":"ui_tab","name":"PUMP A","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

Manuel_o · 20 April 2023 07:50

hello. thank you. seems to me like a nice solution.

I tried it with a dropwdown with more than two "select".

the submit button seems to work. It gets red, when i change the dropdown, but the first change - 3 rules gives me this error: "Cannot set property of non-object type: topic[0]"

here is my "modified" version

[
    {
        "id": "dba2f963f07b8a2c",
        "type": "debug",
        "z": "191728c3ee9255a0",
        "name": "debug 283",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 510,
        "y": 1760,
        "wires": []
    },
    {
        "id": "56c39bc7d775cee5",
        "type": "change",
        "z": "191728c3ee9255a0",
        "name": "",
        "rules": [
            {
                "t": "move",
                "p": "topic",
                "pt": "msg",
                "to": "topic[0]",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "topic[1]",
                "pt": "msg",
                "to": "payload",
                "tot": "msg",
                "dc": true
            },
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "red",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 520,
        "y": 1800,
        "wires": [
            [
                "a37d74b2650693ab"
            ]
        ]
    },
    {
        "id": "a37d74b2650693ab",
        "type": "ui_button",
        "z": "191728c3ee9255a0",
        "name": "submit remote",
        "group": "9a7fb2d9f518fcf7",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "Submit",
        "tooltip": "",
        "color": "",
        "bgcolor": "{{background}}",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 320,
        "y": 1860,
        "wires": [
            [
                "bd2fe2f48650c624"
            ]
        ]
    },
    {
        "id": "0185a74a24c023e4",
        "type": "rbe",
        "z": "191728c3ee9255a0",
        "name": "",
        "func": "rbe",
        "gap": "",
        "start": "",
        "inout": "out",
        "septopics": true,
        "property": "payload",
        "topi": "topic",
        "x": 690,
        "y": 1860,
        "wires": [
            [
                "a37d74b2650693ab",
                "4a9148d898273d95"
            ]
        ]
    },
    {
        "id": "bd2fe2f48650c624",
        "type": "change",
        "z": "191728c3ee9255a0",
        "name": "",
        "rules": [
            {
                "t": "move",
                "p": "topic[1]",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "topic[0]",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "transparent",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 520,
        "y": 1860,
        "wires": [
            [
                "0185a74a24c023e4"
            ]
        ]
    },
    {
        "id": "4a9148d898273d95",
        "type": "function",
        "z": "191728c3ee9255a0",
        "name": "Create Message",
        "func": "msg.payload = \"You selected \" + msg.payload\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 870,
        "y": 1860,
        "wires": [
            [
                "8c8840be4326444f"
            ]
        ]
    },
    {
        "id": "8c8840be4326444f",
        "type": "debug",
        "z": "191728c3ee9255a0",
        "name": "debug 285",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1190,
        "y": 1920,
        "wires": []
    },
    {
        "id": "cf7b206144781618",
        "type": "ui_dropdown",
        "z": "191728c3ee9255a0",
        "name": "",
        "label": "OPERATINGMODE:",
        "tooltip": "Change operating mode",
        "place": "",
        "group": "9a7fb2d9f518fcf7",
        "order": 9,
        "width": 4,
        "height": 1,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "Manual",
                "value": 0,
                "type": "num"
            },
            {
                "label": "Pulse",
                "value": 1,
                "type": "num"
            },
            {
                "label": "Analog",
                "value": 2,
                "type": "num"
            },
            {
                "label": "Timer",
                "value": 3,
                "type": "num"
            },
            {
                "label": "Batch",
                "value": 4,
                "type": "num"
            }
        ],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 220,
        "y": 1760,
        "wires": [
            [
                "dba2f963f07b8a2c",
                "56c39bc7d775cee5"
            ]
        ]
    },
    {
        "id": "9a7fb2d9f518fcf7",
        "type": "ui_group",
        "name": "CHART",
        "tab": "4ad3c40739cbf998",
        "order": 4,
        "disp": false,
        "width": 20,
        "collapse": false,
        "className": ""
    },
    {
        "id": "4ad3c40739cbf998",
        "type": "ui_tab",
        "name": "PUMP A",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

thank you

E1cid · 20 April 2023 12:49

Set the topic in operating mode to a string "a_name" or json [ ] , at the moment you have it set to msg.topic which will be undefined.

Manuel_o · 24 April 2023 09:27

sorry, i dont get it completly what you mean.

I now, changed the topic in my form to "".

[
    {
        "id": "dba2f963f07b8a2c",
        "type": "debug",
        "z": "191728c3ee9255a0",
        "name": "debug 283",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 190,
        "y": 1400,
        "wires": []
    },
    {
        "id": "56c39bc7d775cee5",
        "type": "change",
        "z": "191728c3ee9255a0",
        "name": "",
        "rules": [
            {
                "t": "move",
                "p": "topic",
                "pt": "msg",
                "to": "topic[0]",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "topic[1]",
                "pt": "msg",
                "to": "payload",
                "tot": "msg",
                "dc": true
            },
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "red",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 380,
        "y": 1460,
        "wires": [
            [
                "a37d74b2650693ab"
            ]
        ]
    },
    {
        "id": "a37d74b2650693ab",
        "type": "ui_button",
        "z": "191728c3ee9255a0",
        "name": "submit remote",
        "group": "83fd112e3229a323",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "Submit",
        "tooltip": "",
        "color": "",
        "bgcolor": "{{background}}",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 580,
        "y": 1460,
        "wires": [
            [
                "bd2fe2f48650c624"
            ]
        ]
    },
    {
        "id": "0185a74a24c023e4",
        "type": "rbe",
        "z": "191728c3ee9255a0",
        "name": "",
        "func": "rbe",
        "gap": "",
        "start": "",
        "inout": "out",
        "septopics": true,
        "property": "payload",
        "topi": "topic",
        "x": 590,
        "y": 1520,
        "wires": [
            [
                "a37d74b2650693ab",
                "4a9148d898273d95"
            ]
        ]
    },
    {
        "id": "bd2fe2f48650c624",
        "type": "change",
        "z": "191728c3ee9255a0",
        "name": "",
        "rules": [
            {
                "t": "move",
                "p": "topic[1]",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "topic[0]",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "transparent",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 820,
        "y": 1460,
        "wires": [
            [
                "0185a74a24c023e4"
            ]
        ]
    },
    {
        "id": "4a9148d898273d95",
        "type": "function",
        "z": "191728c3ee9255a0",
        "name": "Create Message",
        "func": "msg.payload = \"You selected \" + msg.payload\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 790,
        "y": 1540,
        "wires": [
            [
                "8c8840be4326444f"
            ]
        ]
    },
    {
        "id": "8c8840be4326444f",
        "type": "debug",
        "z": "191728c3ee9255a0",
        "name": "debug 285",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1010,
        "y": 1540,
        "wires": []
    },
    {
        "id": "cf7b206144781618",
        "type": "ui_dropdown",
        "z": "191728c3ee9255a0",
        "name": "",
        "label": "OPERATINGMODE1:",
        "tooltip": "Change operating mode",
        "place": "",
        "group": "83fd112e3229a323",
        "order": 1,
        "width": 4,
        "height": 1,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "Manual",
                "value": 0,
                "type": "num"
            },
            {
                "label": "Pulse",
                "value": 1,
                "type": "num"
            },
            {
                "label": "Analog",
                "value": 2,
                "type": "num"
            },
            {
                "label": "Timer",
                "value": 3,
                "type": "num"
            },
            {
                "label": "Batch",
                "value": 4,
                "type": "num"
            }
        ],
        "payload": "",
        "topic": "[]",
        "topicType": "str",
        "className": "",
        "x": 180,
        "y": 1460,
        "wires": [
            [
                "dba2f963f07b8a2c",
                "56c39bc7d775cee5"
            ]
        ]
    },
    {
        "id": "83fd112e3229a323",
        "type": "ui_group",
        "name": "CONTROL",
        "tab": "4ad3c40739cbf998",
        "order": 1,
        "disp": true,
        "width": "10",
        "collapse": false,
        "className": ""
    },
    {
        "id": "4ad3c40739cbf998",
        "type": "ui_tab",
        "name": "PUMP A",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

thank you

system · 24 May 2023 09:27

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

Topic		Replies	Views
Dropdown + password popup Dashboard security	1	162	21 June 2023
Widget Text colour Dashboard	5	710	22 December 2020
Click submit -> prompt password field Dashboard	2	116	26 May 2023
Change font & color inside widget? Dashboard	17	8932	3 December 2020
Text Input On Change Property Dashboard	7	652	2 January 2021

Dropdown + submit: change font color and ask for password before submit

Related Topics