# Simple Dashboard 2.0 Template node example

**URL:** <https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [2 April 2024 17:24 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946 "2024-04-02T17:24:47Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [2 April 2024 17:24 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/1 "2024-04-02T17:24:47Z")

</div>

I decided to take the Dashboard plunge 2.0 and though I read the node help and docs. I couldn't workout how to build a simple template. I'm clearly being a bit dim!!

So below is a simple example of using msg.topic/payload to set style, hide an elements, show values in a template. It also has a button press to send a msg to a flow as old dashboard node help had. I hope helps those starting out for the very first time building templates with dashboard 2.0  
 ![v2_v1_example](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/341d5434e6cf7ac05f4dd404958b6ce99e7a4faf.png)

```auto
<!-- emulate old dashboard examples. These used Angular/Angular-Material directives. -->
<!-- Dashboard 2.0 uses vue directives -->
<!-- This is a simple example to get you going -->

<template>
<div >
  <v-btn @click="send({payload: value})" style="width:200px;">Send value to Flow</v-btn>
  <v-icon style="margin-left:20px;" v-if="msg.topic !== '' " v-bind:color="msg.topic" icon="mdi-clipboard-check"></v-icon>
  <span style="margin-left:5px;" v-if="msg.topic !== '' " class="my-class"> {{msg.payload}} </span>
</div>
</template>

<script> 
  // this HAS to be included or temaplate doesn't work
  export default {
  
  }
</script>

<style>
  // define any styles here - supports raw CSS
  .my-class {
    margin-top: 10px;
    color: black;
  }
</style>

```

// Flow

```auto

[
    {
        "id": "42c9d1d361045af2",
        "type": "inject",
        "z": "f2e9ae586fa62989",
        "name": "Passed",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "green",
        "payload": "Passed",
        "payloadType": "str",
        "x": 790,
        "y": 180,
        "wires": [
            [
                "e6fb1a7d161fcab4"
            ]
        ]
    },
    {
        "id": "14c7fd2aa3ba44a9",
        "type": "inject",
        "z": "f2e9ae586fa62989",
        "name": "Failed",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "red",
        "payload": "Failed",
        "payloadType": "str",
        "x": 790,
        "y": 220,
        "wires": [
            [
                "e6fb1a7d161fcab4"
            ]
        ]
    },
    {
        "id": "e97a83955fe66b3b",
        "type": "inject",
        "z": "f2e9ae586fa62989",
        "name": "Hide",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 790,
        "y": 260,
        "wires": [
            [
                "e6fb1a7d161fcab4"
            ]
        ]
    },
    {
        "id": "e6fb1a7d161fcab4",
        "type": "ui-template",
        "z": "f2e9ae586fa62989",
        "group": "3ebaa72b060b89d4",
        "page": "",
        "ui": "",
        "name": "V2 teamplate - v1 example",
        "order": 7,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<!-- emulate old dashboard examples. These used Angular/Angular-Material directives. -->\n<!-- Dashboard v3 uses vue directives -->\n<!-- This is a simple examaple to get you going -->\n\n<template>\n<div >\n <v-btn @click=\"send({payload: value})\" style=\"width:200px;\">Send value to Flow</v-btn>\n <v-icon style=\"margin-left:20px;\" v-if=\"msg.topic !== '' \" v-bind:color=\"msg.topic\" icon=\"mdi-clipboard-check\"></v-icon>\n <span style=\"margin-left:5px;\" v-if=\"msg.topic !== '' \" class=\"my-class\"> {{msg.payload}} </span>\n</div>\n</template>\n\n<script> \n // this HAS to be included or temaplate doesn't work\n export default {\n \n }\n</script>\n\n<style>\n // define any styles here - supports raw CSS\n .my-class {\n margin-top: 10px;\n color: black;\n }\n</style>\n",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 915,
        "y": 200,
        "wires": [
            [
                "914858e866fa662d"
            ]
        ],
        "l": false
    },
    {
        "id": "914858e866fa662d",
        "type": "debug",
        "z": "f2e9ae586fa62989",
        "name": "from 2.0 template",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 975,
        "y": 200,
        "wires": [],
        "l": false
    },
    {
        "id": "99a5e65da8126eb8",
        "type": "comment",
        "z": "f2e9ae586fa62989",
        "name": "Dash 2.0 template - v1 like example",
        "info": "",
        "x": 860,
        "y": 140,
        "wires": []
    },
    {
        "id": "3ebaa72b060b89d4",
        "type": "ui-group",
        "name": "V2 temaplate test bed",
        "page": "27f2764d053a0856",
        "width": "3",
        "height": "1",
        "order": 3,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "27f2764d053a0856",
        "type": "ui-page",
        "name": "Test bed stuff",
        "ui": "42751b5153d87eac",
        "path": "/retool",
        "icon": "web-box",
        "layout": "grid",
        "theme": "0d92c765bfad87e6",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "42751b5153d87eac",
        "type": "ui-base",
        "name": "baseNode",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "icon"
    },
    {
        "id": "0d92c765bfad87e6",
        "type": "ui-theme",
        "name": "Basic Blue Theme",
        "colors": {
            "surface": "#4d58ff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [2 April 2024 18:44 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/2 "2024-04-02T18:44:01Z")

</div>

Hi Lawrence, just to be clear, I assume that you are talking about `Dashboard 2` and not `v2 Dashboard`

`Dashboard 2` is the successor to the original dashboard, whilst `v2 Dashboard` is version 2 of the original dashboard (which is currently at v3.6.5)

I'm assuming so, and have added the `dashboard-2` tag to your message for clarity.

---

<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:** [2 April 2024 21:17 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/3 "2024-04-02T21:17:25Z")

</div>

Thanks for this! Mind if I steal it and put it into "Template Examples" on our documentation?

Pleae let me know any other improvements we can make for the docs (PRs are also welcome if you're open to making changes directly yourself)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [2 April 2024 21:20 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/4 "2024-04-02T21:20:51Z")

</div>

Several variations in spelling of template in there :-). Temaplate teamplate

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [3 April 2024 07:29 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/5 "2024-04-03T07:29:55Z")

</div>

@Paul-Reed Paul apologies for the tardiness.  
I couldn't work out how to delete the post so have I hope fixed  
If not can you please delete the post

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [3 April 2024 07:31 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/6 "2024-04-03T07:31:12Z")

</div>

@joepavitt you can use but given the comments I'm note sure it's right to do so.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [3 April 2024 07:38 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/7 "2024-04-03T07:38:17Z")

</div>

@iiLaw Thank you for the above example.

If you feel like a challenge, building a dashboard 2 node around [Calendar component — Vuetify](https://vuetifyjs.com/en/components/calendars/) would raise you to hero status 🤩

---

<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:** [3 April 2024 08:38 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/8 "2024-04-03T08:38:52Z")

</div>

> [@iiLaw](#):
>
> you can use but given the comments I'm note sure it's right to do so.

Comments are fine - it's a good example - will try and get it added

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [3 April 2024 10:09 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/9 "2024-04-03T10:09:04Z")

</div>

@Bobo Alas well beyond my skills. I use [retool.com](http://retool.com) for that type of requirement it has a very rich calendar control.

BTW I use retool in conjunction with Node-RED. I share data between the two platforms via Postgres DB.  
And surface retool UI in an iframe in the NR dashboard.

The image below is a retool web app. Allows me to drop and CSV file have automatically parsed and rendered in a table component then saved to DB. **Not one line of code.**

I then call a REST api call to tell Node-RED please process. Which is a number JSONata transforms then makes a load of REST API calls and a few file uploads. Combing the two platforms gives me a very powerful and easy to build **back office** solution e.g. non client facing.

 ![retool-iframe](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/cacbb08840e4a1abf57dec78c20a446c8c0923da.png)

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [3 April 2024 10:16 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/10 "2024-04-03T10:16:23Z")

</div>

Thanks for the info. Wish I had known about it a few months ago 😮‍💨

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 April 2024 17:25 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/11 "2024-04-03T17:25:34Z")

</div>

Yes. Apologies if my comments were mis-taken. They were meant for Joe to take and correct when he republished.

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [3 April 2024 19:25 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/12 "2024-04-03T19:25:05Z")

</div>

Dave they were not 🙂  
Just didn't want to confuse folk with a combination of my dyslexia and short handing of Dashboard naming.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 April 2024 21:14 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/13 "2024-04-03T21:14:35Z")

</div>

It’s a great simple example. I’m going to roll with it.

---

<div class="post-metadata">

**Author:** ![mmiles](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@mmiles](https://discourse.nodered.org/u/mmiles)\
**Post date:** [27 April 2024 09:09 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/14 "2024-04-27T09:09:38Z")

</div>

If you have a bit of spare time..  
How would I just change the actual text color of Passed to green and Failed to red?  
I have tried a few combinations of trying to use the msg.topic as a variable for color in the .my-class but it doesn't work.

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [27 April 2024 09:16 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/15 "2024-04-27T09:16:49Z")

</div>

Span is standard HTML so use you bind to class.  
Just tested worked for me.

```auto
<span style="margin-left:5px;" v-if="msg.topic !== '' " v-bind:class="msg.topic" style="margin-top: 10px;">{{msg.payload}}</span>

<style>
    /* define any styles here - supports raw CSS */
    .red {color: red;}
    .green {color: green;}
</style>

```

---

<div class="post-metadata">

**Author:** ![mmiles](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@mmiles](https://discourse.nodered.org/u/mmiles)\
**Post date:** [27 April 2024 10:05 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/16 "2024-04-27T10:05:36Z")

</div>

Perfect:) Thankyou

---

<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:** [27 May 2024 10:05 UTC](https://discourse.nodered.org/t/simple-dashboard-2-0-template-node-example/86946/17 "2024-05-27T10:05:58Z")

</div>

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