# Help with template visibility

**URL:** <https://discourse.nodered.org/t/help-with-template-visibility/90200>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, dashboard-2\
**Created:** [15 August 2024 17:07 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200 "2024-08-15T17:07:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [15 August 2024 17:07 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/1 "2024-08-15T17:07:46Z")

</div>

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.

```auto
[
    {
        "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"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [15 August 2024 17:43 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/2 "2024-08-15T17:43:43Z")

</div>

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:

```html
<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](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#built-in-variables)

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [15 August 2024 18:08 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/3 "2024-08-15T18:08:05Z")

</div>

> [@joepavitt](#):
>
> ```auto
> <template>
> <div v-if="msg?.payload === 'on'">
> Hello World
> </div>
> <div v-else>
> Goodbye
> </div>
> </template>
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [15 August 2024 19:21 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/4 "2024-08-15T19:21:12Z")

</div>

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](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html)

We also have a bunch of UI Template examples to get you going too: [UI Template Examples | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/template-examples.html)

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [16 August 2024 08:39 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/5 "2024-08-16T08:39:10Z")

</div>

> [@joepavitt](#):
>
> ```auto
> <template>
> <div v-if="msg?.payload === 'on'">
> Hello World
> </div>
> <div v-else>
> Goodbye
> </div>
> </template>
> 
> ```

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?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 August 2024 12:32 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/6 "2024-08-16T12:32:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [16 August 2024 17:52 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/7 "2024-08-16T17:52:50Z")

</div>

![Screenshot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d6c1abc33a77d5d55abd4f08cb50f3a39459ae99.jpeg)  
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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 September 2024 08:39 UTC](https://discourse.nodered.org/t/help-with-template-visibility/90200/9 "2024-09-16T08:39:16Z")

</div>

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