Msg.ui_update clears values in ´text´ node

Hi,

After updating to db2 verision 1.28.0 I have an issue with a text field when reloading the dashboard page.

If I send msg.payload and msg.ui_update in one msg to the text node then all is ok.
But if I only send msg.ui_update, it first looks ok, but if the web-page is reloaded, then value in the text field is erased. How can I make it stick?

I have several other text fields that are ok, and this it the only one I use msg.ui_update on.

Here is an example flow:

[
    {
        "id": "9b512d81403d76be",
        "type": "inject",
        "z": "27e5b3e5cc7a2679",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 180,
        "y": 840,
        "wires": [
            [
                "0bf7bac0ab238b06"
            ]
        ]
    },
    {
        "id": "429e4c30238f509c",
        "type": "function",
        "z": "27e5b3e5cc7a2679",
        "name": "PriceColor",
        "func": "msg = {}\n\nmsg.payload = (global.get(\"kWh_hour_price\", \"file\")*100).toFixed(1);\n\nif (global.get(\"kWh_hour_price\", \"file\") <= global.get(\"kWh_trig_price\", \"file\")) {\n    msg.ui_update = { color: \"#66cd00\" }\n} else {\n    msg.ui_update = { color: \"#E67E22\" }\n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 285,
        "y": 900,
        "wires": [
            [
                "c0221554f3a9397b"
            ]
        ],
        "l": false
    },
    {
        "id": "c0221554f3a9397b",
        "type": "ui-text",
        "z": "27e5b3e5cc7a2679",
        "group": "e1c6e6cb771c2108",
        "order": 3,
        "width": "2",
        "height": "1",
        "name": "kWh price",
        "label": "¢/kWh prices",
        "format": "{{msg.payload}}",
        "layout": "col-center",
        "style": true,
        "font": "Arial,Arial,Helvetica,sans-serif",
        "fontSize": "14",
        "color": "#717171",
        "wrapText": false,
        "className": "",
        "value": "payload",
        "valueType": "msg",
        "x": 400,
        "y": 900,
        "wires": []
    },
    {
        "id": "f465a9ea7844b18b",
        "type": "inject",
        "z": "27e5b3e5cc7a2679",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 180,
        "y": 900,
        "wires": [
            [
                "429e4c30238f509c"
            ]
        ]
    },
    {
        "id": "0bf7bac0ab238b06",
        "type": "function",
        "z": "27e5b3e5cc7a2679",
        "name": "PriceColor",
        "func": "msg = {}\n\nif (global.get(\"kWh_hour_price\", \"file\") <= global.get(\"kWh_trig_price\", \"file\")) { \n    msg.ui_update = {color: \"#66cd00\"}\n} else { \n    msg.ui_update = { color: \"#E67E22\"} \n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 285,
        "y": 840,
        "wires": [
            [
                "c0221554f3a9397b"
            ]
        ],
        "l": false
    },
    {
        "id": "e1c6e6cb771c2108",
        "type": "ui-group",
        "name": "test",
        "page": "cf478244c05a3ad7",
        "width": "3",
        "height": 1,
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "cf478244c05a3ad7",
        "type": "ui-page",
        "name": "Tasks",
        "ui": "8071e69eb67e4e66",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "6cf98fc8cedde7c6",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 11,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "8071e69eb67e4e66",
        "type": "ui-base",
        "name": "Tamariu",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": false,
        "acceptsClientConfig": [
            "ui-control",
            "ui-notification"
        ],
        "showPathInSidebar": false,
        "headerContent": "dashboard",
        "navigationStyle": "temporary",
        "titleBarStyle": "default",
        "showReconnectNotification": false,
        "notificationDisplayTime": 5,
        "showDisconnectNotification": false,
        "allowInstall": true
    },
    {
        "id": "6cf98fc8cedde7c6",
        "type": "ui-theme",
        "name": "Green",
        "colors": {
            "surface": "#ffffff",
            "primary": "#01bb0c",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#b1dd8c"
        },
        "sizes": {
            "density": "comfortable",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "9px",
            "widgetGap": "18px"
        }
    }
]

Can you post an example that does not rely on your file context data, and tell us what order to press the inject nodes to see the problem.

Sure, here is a better example of the problem

  1. Click on A to set a value and colour. After Reloading webpage the value will remain (as expected)
  2. Click on B to change the colour. Reloading the webpage will cause the value to disappear.
  3. Click on C to set a new value. After Reloading webpage the value will remain (as expected)

So all is ok if you press A or C, but pressing C and then reloading webpage will cause the issue.
In my normal use case C is sent hourly followed by B if certain conditions are met. So I will often find the text field without value when I open the dashboard.

[
    {
        "id": "9b512d81403d76be",
        "type": "inject",
        "z": "27e5b3e5cc7a2679",
        "name": "B",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 170,
        "y": 840,
        "wires": [
            [
                "0bf7bac0ab238b06"
            ]
        ]
    },
    {
        "id": "429e4c30238f509c",
        "type": "function",
        "z": "27e5b3e5cc7a2679",
        "name": "payload & ui_update",
        "func": "msg = {}\n\nmsg.payload = (6.669).toFixed(1);\nmsg.ui_update = { color: \"#66cd00\" }\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 360,
        "y": 800,
        "wires": [
            [
                "c0221554f3a9397b"
            ]
        ]
    },
    {
        "id": "c0221554f3a9397b",
        "type": "ui-text",
        "z": "27e5b3e5cc7a2679",
        "group": "e1c6e6cb771c2108",
        "order": 3,
        "width": "2",
        "height": "1",
        "name": "kWh price",
        "label": "¢/kWh prices",
        "format": "{{msg.payload}}",
        "layout": "col-center",
        "style": true,
        "font": "Arial,Arial,Helvetica,sans-serif",
        "fontSize": "14",
        "color": "#717171",
        "wrapText": false,
        "className": "",
        "value": "payload",
        "valueType": "msg",
        "x": 620,
        "y": 840,
        "wires": []
    },
    {
        "id": "f465a9ea7844b18b",
        "type": "inject",
        "z": "27e5b3e5cc7a2679",
        "name": "A",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 170,
        "y": 800,
        "wires": [
            [
                "429e4c30238f509c"
            ]
        ]
    },
    {
        "id": "0bf7bac0ab238b06",
        "type": "function",
        "z": "27e5b3e5cc7a2679",
        "name": "ui_update",
        "func": "msg = {}\n\nmsg.ui_update = { color: \"#E67E22\"} \n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 320,
        "y": 840,
        "wires": [
            [
                "c0221554f3a9397b"
            ]
        ]
    },
    {
        "id": "c488230ad9e3768c",
        "type": "function",
        "z": "27e5b3e5cc7a2679",
        "name": "payload",
        "func": "msg = {}\n\nmsg.payload = (1.669).toFixed(1);\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 320,
        "y": 880,
        "wires": [
            [
                "c0221554f3a9397b"
            ]
        ]
    },
    {
        "id": "e611cf750224745d",
        "type": "inject",
        "z": "27e5b3e5cc7a2679",
        "name": "C",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 170,
        "y": 880,
        "wires": [
            [
                "c488230ad9e3768c"
            ]
        ]
    },
    {
        "id": "e1c6e6cb771c2108",
        "type": "ui-group",
        "name": "test",
        "page": "cf478244c05a3ad7",
        "width": "3",
        "height": 1,
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "cf478244c05a3ad7",
        "type": "ui-page",
        "name": "Tasks",
        "ui": "8071e69eb67e4e66",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "6cf98fc8cedde7c6",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 11,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "8071e69eb67e4e66",
        "type": "ui-base",
        "name": "Tamariu",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": false,
        "acceptsClientConfig": [
            "ui-control",
            "ui-notification"
        ],
        "showPathInSidebar": false,
        "headerContent": "dashboard",
        "navigationStyle": "temporary",
        "titleBarStyle": "default",
        "showReconnectNotification": false,
        "notificationDisplayTime": 5,
        "showDisconnectNotification": false,
        "allowInstall": true
    },
    {
        "id": "6cf98fc8cedde7c6",
        "type": "ui-theme",
        "name": "Green",
        "colors": {
            "surface": "#ffffff",
            "primary": "#01bb0c",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#b1dd8c"
        },
        "sizes": {
            "density": "comfortable",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "9px",
            "widgetGap": "18px"
        }
    }
]

Yes, I see the problem too. What version of the dashboard did you upgrade from?

I'm not sure, I think it was 1.27 or close to it.
Is there away to find out?

This problem does not occur with v1.26.0, it does with 1.27.0.
Dunno how many versions there were in between.

There weren't any releases between 1.26.0 and 1.27.0. That included the text value enhancements so I suspect it was that.

@Switchblade2 could you submit an issue on the node's github page please? Include your test flow and say that it was ok in 1.26.0 but not 1.27.0

As a workaround I think you will have to either join the messages so that the ui_update message always contain the payload, or revert to 1.26.0

1 Like

Here is a better workaround.
Configure the Value field of the text node to flow.textValue (or whatever name you want to give it), then in the function node setting the value, add before the return
flow.set("textValue", msg.payload)
then the text node will pick up the value from flow.textValue. You still need to send the text node a message to get it to pick up the new value from context, but it doesn't matter what is in that message.

1 Like

Thanks, I'll test that.
Issue created in GitHub