Skip to content

User interface of Visual Flow Creator

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

vfc-icon

Home screen

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

Visual Flow Creator UI

① 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:

project-window

① 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

Note

  • Up to 10 projects can be created per user including the "default" project.
  • "Default" project cannot be renamed or deleted.
  • If the user selects the project type as "Public" for the particular project, then it is visible to other users of the environment.
  • If the user selects the project type as "Private" for the particular project, then it is not visible to other users of the environment.
Project Properties Description
Users Displays the user's list and allows to search for the required user.
User projects Displays the "default" project and other projects list.
Shared projects Displays the shared projects to other users of the environment.
Project name Displays the project name and allows you to rename the project name.
Project id Displays the "Project id" of the project. Project id is useful for accessing API of the particular Project.
Type - Public: This type of project is visible for all the other users of the environment. You can share public projects to the other user to edit the flows inside the project.
- Private: Only visible for the creator and VFC admins of the environment.
Note:
Admin can change the project details.
Visibility It allows to add or remove "user group" for the selected project.
Note: To add the user group to the selected project, ensure the user group is already created in "Settings" application.
Open user group management Navigates to the "User groups" feature in Settings application. For more information about managing "User groups" feature, refer to Managing user groups.

Node palette

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

node-palette

① 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:

working-area

① 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

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:

sidebar

① 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:

info-window

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:

help-tab

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

Help tab

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:

dashboard-tab

① 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 allow you to reorder the tabs and links. The tabs and links are expandable for editing and also collapsible.

    Dashboard window

    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 group. To edit any group, click edit. The tabs and groups are expandable for editing and also collapsible.

    You can define the properties of the created links by clicking edit 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

    Edit link window

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

    Set title

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

    Set theme

Note

The creation of groups or tabs or links are applicable only with the dashboard nodes.

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.

Debug window

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:

Debug filter window

  • 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 Access to access the "Flow durations":

Flow duration

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.

Triggered flow

① Inactive node

② Active node

Note

  • If the triggered flow is deleted from Visual Flow Creator, then the node will be inactive.
  • The flow duration will be the sum of the maximum compute hours of a triggered flow and the list will be descending based on the duration.

Flow migration

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

Flow migration

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

Select user and project

You can access the migrated flows from "Projects".

Access migrated project

Note

  • Only Visual Flow Creator admin can use "Flow migration" page.
  • After migration, project name will be replaced with the Visual Flow Creator generated project name.

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 Access to access the "Flow migration":

export

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

exportdialogue

① 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:

groups-flow

Click menu-bar to access "Groups":

groups-menu

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:

edit-groups

Properties Description
Style Allows to change or update the outline and fill colors of the groups.
Label Allows to change or update the color and position of the label.

Last update: June 5, 2024