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
<!-- 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"
}
}
]
