Dashboard Nodes
The Flows dashboard palette includes nodes, which when dragged onto a canvas, become widgets in a dashboard. These nodes enable you to build a dashboard with common elements, such as buttons, drop-down lists, and charts. When you combine these nodes with data collection flows, you can monitor sensor data in a single view.
You can add dashboard nodes to the canvas in an existing Flow. The process of adding dashboard nodes will be demonstrated by way of an example.
For this example, a button, text, gauge, and chart are added to the first group. A dropdown is added to the second group.
Note: When you add dashboard nodes to another existing Flow, the nodes are added to the Layout under the first group. You can select which group the node belongs to from the Edit <groupname> node dialog box.
Caution: Adding the same node to another Flow in the same Flow View adopts the same configuration.
To add dashboard nodes to the canvas:
- From the navigation panel, select Flows Manager.
- Click the Expand icon next to a selected Flow. The Flow opens in a new tab.
- Click the Menu icon, select View > Dashboard, and then drag the Sidebar up from the bottom of the canvas.
- From an existing Flow tab in the Flow View, drag the following nodes to the canvas:
- button
- text
- gauge
- chart
- dropdown The nodes appear on the canvas.
- Double-click one of the added dashboard nodes.
- Enter a name for the node in the Name field, and then click Done.
- Repeat steps 5-6 as needed, entering names for all the dashboard nodes on the canvas.
- Double-click the Dropdown node.
- Select the second group from the Group drop-down list, and then click Done.
- If necessary, choose the Add new dashboard group... option and create a second dashboard group and then add the Dropdown node to this newly created group.
- Click Deploy.
You can configure a node you have added to the canvas. Each node allows for the configuration of various options.
When you add a dashboard node to the canvas, you must double-click it to configure its settings. Most of the dashboard nodes must be assigned to a dashboard group.
Caution: Adding the same node to another Flow in the same Flow View adopts the same configuration.
For this example, a dashboard switch node is configured.
To configure a switch node:
- From the Navigation panel, select Flows Manager.
- Click the Expand icon next to a selected Flow.
- Click the Menu icon, select View > Dashboard, and then drag the Sidebar up from the bottom of the canvas.
- From an existing Flow tab in the Flow View, drag a switch node from the dashboard category to the canvas.
Double-click the switch node. The Edit switch node dialog box appears.
Edit switch node dialog box- Configure all fields as desired.
- Click Done on the top right corner of the Edit switch node dialog box.
- Click Deploy.
You can customize the message text colors.
There may be times when you want to assign colors to displayed messages, particularly when monitoring device status.
The following example illustrates how to configure a flow and dashboard to change the message color based on the device status: Ready, Rebooting, Warning, or Error.
For your convenience, the following code can be copied and imported into Flows so that you can explore the configuration.
To import the Example flow:
- From the Navigation panel, select Flows Manager.
- Click the Expand icon next to a selected Flow.
- Copy the code sample above.
- Click the Menu icon and select Import.
- Paste the code sample in the Clipboard box.
- Select new flow from the Import to section, and then click Import.
You can configure the Inject, Function and Text nodes as follows:
Node | Steps to configure the nodes and dashboard |
|---|---|
Inject | This node can be found in the Input list. This node is used primarily to demonstrate this functionality. In a production environment, device messages would need to be parsed to extract status values.
|
Function | This node can be found in the Function list. Use this example function node to assign a color to each status message.
switch (msg.payload) {
case "Ready" :
msg.color = "lime";
break;
case "Warning" :
msg.color = "orange";
break;
case "Rebooting..." :
msg.color = "blue";
break;
default :
msg.color = "red";
break;
}
return msg; |
Text | This ui_text node can be found in the Dashboard list. Note that there are two text nodes in the Dashboard list. This is not the text input field. V Value Format, enter:
<font color= {{msg.color}} > {{msg.payload}} </font> |
An example of how these nodes appear in the Flows canvas is shown below.
The resulting node can be viewed in the dashboard tab.
You can remove a dashboard node from the Dashboard Layout tab by removing it from the Flow canvas.
To remove a dashboard node:
- From the Navigation panel, select Flows Manager.
- Click the Expand icon next to a selected Flow.
- Click the Menu icon, select View > Dashboard, and then drag the Sidebar up from the bottom of the canvas.
- Select the Flow containing the dashboard node to be removed.
Select the dashboard node on the Flow and press the Delete key. Alternatively, you can hover over dashboard node in the Layout, click Edit, and then click Delete. The selected node is removed on both the canvas and the Layout.
Deleting a node- Click Deploy.