Simple Dashboard 2.0 Template node example

Dashboard
1

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

<!-- 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


[
    {
        "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"
        }
    }
]
6 Likes
2

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.

3

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)

4

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

2 Likes
5

@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

6

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

7

@iiLaw Thank you for the above example.

If you feel like a challenge, building a dashboard 2 node around Calendar component — Vuetify would raise you to hero status :star_struck:

8

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

9

@Bobo Alas well beyond my skills. I use 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
retool-iframe1635Ă—1229 194 KB

1 Like
10

Thanks for the info. Wish I had known about it a few months ago :face_exhaling:

11

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

2 Likes
12

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

13

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

14

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.

15

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

<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>
1 Like
16

Perfect:) Thankyou