User interface of Visual Flow Creator¶

Visual Flow Creator application can be accessed from the Insights Hub Launchpad by clicking the following icon:

Home screen¶

The following graphic shows the different elements of the Visual Flow Creator user interface:

① Main navigation bar

② Node palette displays the list of nodes

③ Working area defines the flow of nodes

④ displays the info window, dashboard window, debug window and help window

Projects¶

"Projects" in Visual Flow Creator is a feature that allows you to organize your flows in small logical coherent pieces based on your working tasks. You can create, rename, search and delete the "Projects" from the environment. A default project is already available for each user. You can also access the other user flows by selecting user from the list of "Projects".

You can access "Projects" screen from the top left corner of the user interface. The following graphic shows the Projects screen:

① Displays the user projects

② Displays the users list

③ Displays the projects shared

④ Displays the selected user projects

⑤ Creates a new project

⑥ Deletes the selected project

⑦ Displays the selected project details

Node palette¶

The following graphic shows the node palette of different types of nodes available in Visual Flow Creator:

① Filters the list of nodes

② Node palette displays the list of nodes

③ Collapse or expand all categories

Working area¶

In working area, you can create and edit the flows. Drag the nodes from the palette and wire them to develop the flows. The following graphic shows the working area screen:

① Opens a dropdown to quickly navigate through all the flows

② "Flow" tab displays the flow of nodes

③ Creates a new tab. Multiple flows in one tab is possible.

④ Working area defines the flow of nodes

⑤ Zoom function or standard zoom level

Sidebar¶

Visual Flow Creator has a sidebar window that allows you to configure the nodes, flows and view the results. It is classified in four tabs:

• Info tab: It displays node information of the current project and their node properties.
• Help tab: It displays node information on performing various functions.
• Dashboard tab: It displays the layout, site and theme of the nodes or flow.
• Debug tab: It displays the debug messages.

The following graphic shows the sidebar screen:

① Displays debug messages

② Displays information about the selected node

③ Displays node information about various functions

④ Displays the layout, site and theme of the nodes

⑤ Filters debug messages

⑥ Deletes all debug messages

⑦ Filters the options

⑧ Log area

⑨ Pauses the display of new log messages

Info tab¶

The info tab displays the properties of the selected node and the information on using the node. If no node is selected, the info window shows the properties of the current flow displayed in the workspace. The following graphic shows the info tab screen:

Help tab¶

The help tab displays the details on performing the various functions of a selected node. If no node is selected, the help window shows the details of the current selected node displayed in the workspace. The following graphic shows the help tab screen:

When a node is selected, it displays its description and a shortcut key to the help tab. To open the help tab, click .

Dashboard tab¶

The dashboard tab displays the layout, site and theme of the nodes or flow. The dashboard tab is to know the working of the dashboard nodes. The following graphic shows the dashboard tab screen:

① Adds a new tab in the dashboard

② Adds an external web links to display in the dashboard

③ Edits the tab properties in the dashboard

④ Adds a new group in the tab

The dashboard window has three panels:

• Layout: The layout defines the tabs and links. You can add multiple tabs and links in the dashboard panel. The layout allows you to reorder the tabs and links. The tabs and links are expandable for editing and also collapsible.

  

  The dashboard elements are described below:

  Dashboard Elements	Description
  Tabs	Tab is created under dashboard tab. You can add groups, edit groups and edit the group properties under the tab. You can add or edit multiple groups in the tab.
  Group	A group is a container for multiple dashboard elements. You can add or edit a group for each flow and you can develop multiple groups under the tab.
  Links	You can create links to other web pages in the dashboard panel of the sidebar tab.

  You can add multiple groups in each of the tabs. The layout allow you to reorder the tabs and groups. In the tab section, to add a new group, click . To edit any group, click . The tabs and groups are expandable for editing and also collapsible.

  You can define the properties of the created links by clicking the button.

  For configuring a dashboard node, the groups and tabs created can be used to define the dashboard node properties. For more information, refer to Configure dashboard node properties.

  

• Site: The site panel allows you to configure the user interface behavior of the dashboard site. You can set the title of your dashboard.

  

• Theme: You can set the themes, style, color and font of the user interface in the dashboard sidebar.

  

For more information about creating and working of dashboard nodes, refer to Dashboard nodes.

Debug tab¶

The debug tab displays injecting the node and message payload. This window displays the debug information for:

• IIoT
• Function
• Analytics
• Storage
• Array
• Dashboard
• Custom

Click the "debug" window to view the message payload.

The "debug window" displays message payload of the nodes in the flows. The messages can be filtered using the node filter button. The node panel has the following filter options:

• All nodes: Displays all the messages.
• Selected nodes: Displays messages only of the selected nodes from all the available nodes.
• Current flow: Displays the messages of the current working flow.

If there are large number of messages, the users have the possibility to filter them, in order to quickly find important debug information.

Flow durations¶

"Flow durations" displays the duration of the triggered flows in Visual Flow Creator by different users with time, user details and node information. Click to access the "Flow durations":

You can find the list of triggered flows in Visual Flow Creator. You can filter by the user and redirect to the flows in Visual Flow Creator by clicking on the active node.

① Inactive node

② Active node

Flow migration¶

"Flow migration" allows you to migrate other user executed flows from the selected project in Visual Flow Creator. Click to access the "Flow migration":

You can select the user and project to migrate the flows from one user to another user by clicking "Migrate Flows".

You can access the migrated flows from "Projects".

Export¶

"Export" allows you to copy or download the other user or "Projects" flows in Visual Flow Creator. Nodes and flows can be copied in the JSON format by clicking "Copy to clipboard" or you can download them by clicking the "Download" button. Click to access the "Flow migration":

You can export the single node, flows or all the flows of the current user or "Projects" in Visual Flow Creator.

① Download or copy the selected node or flows

② Download or copy all flows the current tab

③ Download or copy the all nodes and flows

④ JSON preview tab

Groups¶

"Groups" allows you to combine the nodes into a group. It will create a boundary around the selected nodes and it can be moved, copied and perform other actions on the group.

You can create a flow and combine the nodes into a group as per the below example:

Click to access "Groups":

You can perform the following actions for the selected node:

• Group
• Ungroup
• Merge
• Remove
• Copy
• Paste

Edit Groups Properties¶

You can double click on the created "Groups" to change or update the properties of the Groups: