Dashboard nodes¶

In Visual Flow Creator, dashboard nodes are the components designed to build interactive graphical user interfaces for monitoring, controlling and visualizing data in real-time. These nodes allows the user to create dynamic dashboards that provide both data visualization and user interactivity, integrates directly to the workflow.

Dashboard layouts¶

The tabs in the sidebar help you to re-order the groups and widgets in the dashboard layout. You can also add and edit new tabs and groups to the dashboard layout.

Node properties¶

To configure the dashboard nodes, drag and drop the required node to the working area and double click the respective node to configure. The configuring properties are described below:

• Tab: Tab is created under the dashboard layout. You can add, edit groups and edit the group properties under the tab. You can add or edit multiple groups in the tab.

  • In the "Readings" tab, you can add one or more groups like "Gauges" and "Form".
  • Each group can be configured with multiple dashboard nodes.
  • Tabs provide the optional navigation level.

Groups are displayed next to each other. To view the groups section in dashboard layout, click .

• Group: A group is a container for multiple dashboard elements. To create a new group, double click on the selected node and choose "Add new ui_group" from the drop-down menu.

In tab section, enter the name and configure the tab by selecting "Add new ui_tab" from the drop-down menu.

Configure the UI tab width and name the UI tab.

The tab and group of the node will be now configured. You can also create groups in the sidebar. For more information, refer to Create groups in sidebar.

• Access: Choose any one option from the dropdown list:

  • Do not Show in Dashboard App: The dashboard will not be displayed in "Dashboard Viewer" and "Insights Hub Monitor".
  • Show to users with project access: The dashboard will be displayed only to the project access users in "Dashboard Viewer" and "Insights Hub Monitor".
  • Show to all users: The dashboard will be displayed to all the users in "Dashboard Viewer" and "Insights Hub Monitor".

  

• OI access: It is allowed to display the dashboard for an asset or asset type in "Insights Hub Monitor". For more information, refer to Dashboards chapter in the Insights Hub Monitor documentation.

  

• Size: The grid layout defines the height and width of the widgets as the size of the group. By default, 'auto' is defined as the group size, but you can always set the size to a fixed number of units according to requirements. To understand the size configuration refer to Example on size configuration.

• Type: This is an optional property wherein you can select the working type to design a node.

• Icon: The node's icon is defined by its property.

• Label/Name: This is an optional property. The label can be defined with a new name which will be displayed as the name of the node to the user.

• Value format: Define data format if necessary.

• Units: Define a unit if applicable.

• Color: This is an optional property. You can set the icon color that will be displayed in the output.

• Background: This is an optional property. You can set the background color as per requirements.

• Range: This is an optional property. You can define a range by setting minimum and maximum values.

• Topic: The topic field can be used to set the msg.topic property that is output.

• Check boxes:

  • If message arrives on input and pass through output: This sets the value as true. For more information, refer to Example on message input passing to output.
  • Only one browser: This is selected for a node in a flow, the node will handle each of the dashboards separately. For each browser, the communications originating from the node will be exclusively handled.

If "Only one browser" is not selected, the node will share all the dashboard communication with every open browser from that user. For more information, refer to Example on usage of one and multiple browsers.

Link and its node properties¶

The link in the dashboard tab helps you to add the links to the dashboard. Also, you can edit the properties to assign a link to display or access from the dashboard. Some of the important link node properties are described below:

• Name: Enter the name of the link node.
• Link: Enter the link to open from the dashboard.
• Icon: Enter the name for the icon of the link node properties
• Open in: Choose "New Tab" or "This tab" to open the link in the new or current browser.
• Show in the sidebar of dashboard opened from Dashboard Viewer: It is a check box option, to access the link from the sidebar of the dashboard while opening from "Dashboard Viewer".

• Access: Choose the option to "Show in Dashboard Viewer" or "Do not show in Dashboard Viewer".
• Icon: Upload an image for the link node to display it in "Dashboard Viewer", if required.
• Description: Enter the description for the link node, if required.

View dashboard nodes output¶

Once a flow is created, save it to deploy. Click the menu button and then select "Open dashboard".

A separate browser tab opens to view the dashboard.

You will be redirected to https://visualflowcreatorURL.yyy.mindsphere.io/ui/dash/?user=username@email.com#/0.

You can open the dashboard of another user in his environment by defining the user as username@email.com.

The tab menu will be visible on the left of the dashboard UI.

Select the configured tab to view your dashboard screen.

Hide dashboard application title bar¶

You can select "Hide title bar" to hide the application title bar in dashboard tab node properties.

In this case, dashboard tab menu is not available to change the tabs. You can hide the application title bar to increase dashboard view.

Other methods to configure dashboard nodes¶

You can configure the layout of the dashboard by using the "dashboard" view on the sidebar. To learn more about configuring tabs and groups using sidebar, refer to Configuration of dashboard nodes in sidebar.

Flow of dashboard nodes output screen¶

① Navigation drawer for tabs

② Dashboard node output screen

Group dashboard section¶

In the left navigation, select the required tab to view the dashboard flow you have created.

To learn more about tab and group creation, refer to Create dashboard groups in the "Node properties" section.

For more information on getting started with a dashbaord in VFC, refer to VFC Dashboard - A Getting Started Example.