Ui-radio-group - Dynamic Properties

Dashboard
1

Hello all!
I'm trying to create dynamic content for a ui-radio-group in DB2.
I think I've followed the documentation properly and also reviewed this other post but I can't still get the radio group to populate.

I'm sending msg.ui_update.options as an array with value, label objects.

image
image334Ă—661 8.41 KB

Is there some other configuration to be performed?

Thanks in advance.

2

This function node works for me to set the radio group label and options. I can't immediately see how it differs from your debug example. No payload maybe?

msg = {
    "ui_update": {
        "label": "Livestock",
        "options": [
            {"value":"sheep", "label": "Ewes"}, 
            {"value":"goats", "label": "Nannies"}
        ]
    }
}
return msg;

image

3

Thanks!
you're payload and mine look identical, and neither of both is working for me.
Here's my sample flow

[
    {
        "id": "2d0c429dc57e5397",
        "type": "tab",
        "label": "radios",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "5a48e9deef115886",
        "type": "function",
        "z": "2d0c429dc57e5397",
        "name": "function 5",
        "func": "msg = {\n    \"ui_update\": {\n        \"label\": \"Livestock\",\n        \"options\": [\n            {\"value\":\"sheep\", \"label\": \"Ewes\"}, \n            {\"value\":\"goats\", \"label\": \"Nannies\"}\n        ]\n    }\n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 525,
        "y": 180,
        "wires": [
            [
                "743d697d732e2d76",
                "ccdaf331c03c6ac2"
            ]
        ],
        "l": false
    },
    {
        "id": "dab4bc3e32e6a077",
        "type": "inject",
        "z": "2d0c429dc57e5397",
        "name": "Test1",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Test 1",
        "x": 410,
        "y": 180,
        "wires": [
            [
                "5a48e9deef115886"
            ]
        ]
    },
    {
        "id": "743d697d732e2d76",
        "type": "ui-radio-group",
        "z": "2d0c429dc57e5397",
        "group": "82cd48b1245f94e0",
        "name": "",
        "label": "Select Option:",
        "order": 2,
        "width": 0,
        "height": 0,
        "columns": 1,
        "passthru": false,
        "options": [],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 625,
        "y": 220,
        "wires": [
            []
        ],
        "l": false
    },
    {
        "id": "750937df1713f138",
        "type": "function",
        "z": "2d0c429dc57e5397",
        "name": "function 6",
        "func": "msg = {\n    \"ui_update\":{\n        \"label\" : \"Test label\",\n        \"options\":[\n            {\"value\":\"10\",\"label\":\"Kids\"},\n            {\"value\":\"11\",\"label\":\"Playroom\"},\n            {\"value\":\"12\",\"label\":\"Kitchen\"}\n        ]\n    }\n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 525,
        "y": 220,
        "wires": [
            [
                "743d697d732e2d76",
                "ccdaf331c03c6ac2"
            ]
        ],
        "l": false
    },
    {
        "id": "984d3c31ed733170",
        "type": "inject",
        "z": "2d0c429dc57e5397",
        "name": "Test 2",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Test2",
        "x": 410,
        "y": 220,
        "wires": [
            [
                "750937df1713f138"
            ]
        ]
    },
    {
        "id": "ccdaf331c03c6ac2",
        "type": "debug",
        "z": "2d0c429dc57e5397",
        "name": "debug 996",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 625,
        "y": 180,
        "wires": [],
        "l": false
    },
    {
        "id": "82cd48b1245f94e0",
        "type": "ui-group",
        "name": "Radio-button-test",
        "page": "f2fcbbc30322192c",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f2fcbbc30322192c",
        "type": "ui-page",
        "name": "radio-button-test",
        "ui": "cb79bc4520925e32",
        "path": "/rbt",
        "icon": "home",
        "layout": "grid",
        "theme": "2220d11175c576f3",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "cb79bc4520925e32",
        "type": "ui-base",
        "name": "My UI",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-text"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "titleBarStyle": "default"
    },
    {
        "id": "2220d11175c576f3",
        "type": "ui-theme",
        "name": "Theme DB2",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px",
            "density": "default"
        }
    }
]
4

Your ui_update works for me.

Check the version of your @flowfuse/node-red-dashboard.
I have 1.15.0 and Node-red 4.0.2

5

Thanks for your help jbudd.
I'm using exactly the same versions.
Also tried @flowfuse/node-red-dashboard v1.14.0 with same result.

Tried 3 different node-red instances (all v.4.0.2), tried different clients and different browsers all without luck...

6

Did you try importing the flow? It doesn't work for me either.

7

Good question.
I imported the flow
image

Then I took just this function and put it in my flow

msg = {
    "ui_update":{
        "label" : "Test label",
        "options":[
            {"value":"10","label":"Kids"},
            {"value":"11","label":"Playroom"},
            {"value":"12","label":"Kitchen"}
        ]
    }
}

return msg;

I deployed and hit the inject button and this is what I see.

image

I assume you hit deploy. Does it make a difference if you clear the browser cache? Restart Node-red? (I did not do find either of those necessary but there is something possibly cache related going on because I can't get back to my original, not dynamic, radio group options)

8

Does the full flow work for you?

9

Isn't that a button group, not a radio group?

10

Hello jbudd
you're screenshot seem to be based on ui-button-group (see demo) but my flow contains ui-radio-group (see demo)

11

I suggest you open an issue at Issues · FlowFuse/node-red-dashboard · GitHub.

Include your flow in the description. Post a link back here.

12

Doh! Forget I spoke. :face_with_open_eyes_and_hand_over_mouth:

13

Actually, I am not sure that 1.15 includes dynamic updates. I think the docs may be ahead of the code. Hang on until the next release, which is due within a day or two I think.

14

Thanks Colin!
issue 1260 created.

15

@juanbal , @colin was correct in that the docs are a step ahead of the release.

this will be addressed soon.

Dynamic prop support for radio group has been merged but there is an outstanding release imminent.

16

node-red-dashboard (node) - Node-RED v1.16.0 now released.

It can take up to 30 mins for it to appear in Node-RED catalog under Manage Palette.

You can of course hurry this along with a manual install npm i @flowfuse/node-red-dashboard@latest

2 Likes
17

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