7. Adding a Template Node

The template node is a generic node that takes valid HTML and Angular/Angular-Material directives and can be used to create a dynamic user interface element.

Next, we can drag and drop a template node into the canvas. This will be used to monitor our motors' RPMs for the water filtration system in a customized table format.

Double-click on the template node and add the following code along with making the parameter changes shown below

<div layout="row" layout-align="start center">
  <span flex style="font-size: 15px"><b>RPM Min</b></span>
  <span flex style="font-size: 15px"><b>RPM Max</b></span>
  <span flex style="font-size: 15px"><b>Failure Prob</b></span>
  <span flex style="font-size: 15px"><b>Machine type</b></span>
</div>
<div layout="row" layout-align="start center" ng-repeat="machine in msg.payload.factory">
  <span flex style="color: green">{{machine.min}}</span>
  <span flex style="color: red">{{machine.max}}</span>
  <span flex style="color: white">{{machine.failProb}}%</span>
  <span flex style="color: white">{{machine.name}}</span>
</div>

After parameters have been changed, click Done.

This HTML code block will display a table with 4 columns and 3 rows displaying the min and max values for your motors along with the failure probability and type.