Using the UI Dashboard Template Node (Widget)

dashboard-template-node
The Dashboard UI template node is used for mainly used for displaying data but it can also be used for data input.

The template widget can contain any valid html and Angular/Angular-Material directives.

If you aren’t familiar with angular then take a look at the w3 schools tutorial.



The UI Template node or widget performs a similar function to the template node and can often be used instead of the template node when displaying data.

You will also find it used with the template node as the template node itself can’t display the data. It can only format it.

The following screen shot shows common configurations using the template node and the template UI widget.

common_configurations

1. If you need to format the data .e.g. put into a table and don’t need to display the data then use the template node.

2. If you need to format the data .e.g. put into a table and also need to display the data then you can use the template node along with the template UI widget.

3. If you need to format the data .e.g. put into a table and also need to display the data then you can use the the template UI widget on its own.

Default UI Template node Configuration

If you drag and drop the template node into the workspace and open it you will see the following:

template_ui-default

If we used the inject node to inject the text “this is test” this is what we would see displayed.

template_ui_test

Angular – A Quick Overview

Firstly I’m not a angular expert. I didn’t know what it was until I started using the template widget.

What I learned came from the w3 schools tutorials and hacking, and I still confess I find it confusing. However these notes will hopefully help you.

Angular uses what are called directives but they look like HTML attributes in that they go inside an HTML tag.

These directives start with the prefix ng-

So if we take the one shown earlier in the default template node we have.

<div ng-bind-html="msg.payload"></div>

The ng-bind-html binds the contents of the msg.payload to the div block so anything in the msg.payload would appear inside the div block.

So if our msg.payload contained an HTML table with data we would see the table displayed.
There is an alternative to using ng-bind directive and that is show below and is easier (IMO) to understand in uses the {{..}} format

<div>{{msg.payload}}</div>

The above does the same an says put the msg.payload here.

So the ng-bind and {{}} formats are used to display data, but how do we input data?

To input data we need a variable to hold the data and to use the ng-model directive. Here is an example.

<div>
<p ng-bind-html="name"></p>
<p>Name: <input type="text" ng-model="name"></p>
</div>

The name variable defined by the ng-model directive holds the input data and we can use the ng-bind directive to display it as shown below:
template-ui-1

Using ng-repeat to loop Through an Array

If the payload contains array data you can use the angular ng-repeat command to loop through the array. If we take the data structure below which is an array with 2 objects:

[{“steve”:63,”Bella”:56},{“shanna”:30,”saskia”:27}]

If this is the payload sent into the template then we can loop through the array using:

payload in msg.payload

and then through the objects using:

(key,value) in payload

were payload is a variable name. Here is the actual code from the template node

 

<table class=”table”>
<tr ng-repeat = “payload in msg.payload”><td ng-repeat =”(key,value) in payload”>{{key}}: {{value}}</td></tr></table>

This is what it produces:

ng-repeat-template

Here is the flow for the above.



Videos

The use of this node is much easier explained in videos

Video 1-Using The Node-Red Template UI Node or Widget

Video 2 –Using The Node-Red Dashboard Template Dashboard Node or Widget-Part 2

Video 3 –Using The Node-Red Dashboard Template Dashboard Node or Widget-Part 3

Links mentioned in video 3

  • https://www.w3schools.com/graphics/svg_intro.asp
  • https://google.github.io/material-design-icons/
  • https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/17
  • https://material.io/resources/icons/?style=sharphttps://fontawesome.com/v4.7.0/
  • https://fontawesome.com/v4.7.0/examples/

Resources

Related Tutorials and Videos

Click to rate this post!
[Total: 0 Average: 0]

4 comments

  1. Hi Steve ,
    thx you for the video about dashboard. with node-red. I need to make a scada dashboard with specifics symbols . Can I draw own objects ? If yes does a such draw tool exist? Is it possible to send a global message ( to all objects bellowing to a class/group )? I assume the click on an object would be also possible ( the object will send a message click )
    Greetings
    Pat

    1. You can use the template node for this.
      I’ve used it to create dashboards with basic sliders and lights. You can us material design icons and I’m sure your own icons.
      This is front end JavaScript which I don’t really do as I’m not a designer.
      This forum discussion has links.
      https://discourse.nodered.org/t/how-to-make-custom-ui-widgets/15340
      I’ve done a tutorial on template node which I think explains the basic use
      https://stevesnoderedguide.com/using-dashboard-template-node

  2. Hi,
    Great tutorial! Thanks.
    Where can I find the example-downloads for the hi-template Tutorial? Would love to work them through to fully understand.
    Thanks
    Karl

Leave a Reply

Your email address will not be published. Required fields are marked *