Help with template visibility

Dashboard
,
1

I have been trying to migrate to dashboard2 and am struggling. I want to reveal some text if the incoming payload is "on" This code looks as if it should work but doesn't. Please help.

[
    {
        "id": "a464aa4f6cd7c2ff",
        "type": "inject",
        "z": "9343587668680ce0",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "on",
        "payloadType": "str",
        "x": 510,
        "y": 1300,
        "wires": [
            [
                "b0ca6a8c172c68a6"
            ]
        ]
    },
    {
        "id": "75cbd6369c7c7cce",
        "type": "inject",
        "z": "9343587668680ce0",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "off",
        "payloadType": "str",
        "x": 516,
        "y": 1341,
        "wires": [
            [
                "b0ca6a8c172c68a6"
            ]
        ]
    },
    {
        "id": "b0ca6a8c172c68a6",
        "type": "ui-template",
        "z": "9343587668680ce0",
        "group": "1efabcc365cc00ef",
        "name": "another try",
        "order": 3,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n  <div v-if=\"payload === 'on'\">\n    Hello World\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      payload: 'on', // default state, can be 'on' or 'off'\n    };\n  },\n  methods: {\n    updatePayload(newPayload) {\n      this.payload = newPayload;\n    },\n  },\n};\n</script>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 770,
        "y": 1320,
        "wires": [
            []
        ]
    },
    {
        "id": "1efabcc365cc00ef",
        "type": "ui-group",
        "name": "group3",
        "page": "16b743c98720397b",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "16b743c98720397b",
        "type": "ui-page",
        "name": "Page 3",
        "ui": "496d601133bce288",
        "path": "/page3",
        "icon": "home",
        "layout": "grid",
        "theme": "0fa083067f4afa84",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "496d601133bce288",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "0fa083067f4afa84",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
2

Hi @muggins - thanks for the post, and sorry to see you're hitting difficulties migrating.

In Dashboard 2.0's template you can access msg directly, without the need to do anything, so you can just have a template of:

<template>
  <div v-if="msg?.payload === 'on'">
    Hello World
  </div>
  <div v-else>
    Goodbye
  </div>
</template>

and it'll work I added in the v-else just to demo backup content in case the payload is not "on". No need for <script> at all in this case as you don't need to make any new variables, or do any unique computation.

You can find out more about the Built-In Variables here: Template ui-template | Node-RED Dashboard 2.0

3

Thank you so much. I have spent hours on chatgpt which offered various complex code samples , none of which worked.
John

4

ChatGPT is not trained on "new" stuff - Dashboard 2.0 didn't exist a year ago, so won't be trained on anything other than standard VueJS examples - it wouldn't have the context of which variables we expose for instance.

Documentation is always my recommended go-to: Template ui-template | Node-RED Dashboard 2.0

We also have a bunch of UI Template examples to get you going too: UI Template Examples | Node-RED Dashboard 2.0

5

I have 10 of these notifications as part of my phone dashboard where space is at a premium. Currently in grid format all of these are in a widely spaced column and ideally would be 2 by 2 and closely grouped vertically. Do I need to explore tables or can it be done with styling?

6

Can you share a screenshot of what you're seeing now please? Might help me understand the problem better and see what you're after instead.

7

Screenshot
Screenshot1080×2400 211 KB

I have a legacy system using an alarm system which controls a load of stuff and I have a function which interrogates and parses the results. These in turn are outputted as 1 or 0 payload from 10 different outputs of a nodered function. The "1" would make visible say a label saying PC HEAT DOWN ON etc. The line OP8301 is raw data from the old system, before parsing. The 3 buttons "GATES ARE OPEN" I also am having trouble recreating in dashboard 2.
Appreciate your help

9

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