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

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

Please rate? And use Comments to let me know more
[Total: 0   Average: 0/5]

Leave a Reply

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