Design flows
This section provides comprehensive guidance on how to design a flow in IO and describes the various settings present in the visual designer. The instructions apply to all flow types and include the initial steps, supported by an example, to start defining your flow.
IO designer
This section provides an overview of the IO designer menu and settings, explaining the available options and how to configure them. It helps you navigate the interface and understand the key controls needed to manage flows effectively.
Add new nodes
On the top-left corner there is a dedicated button to add new nodes. In this menu you can drag and drop the selected component into the flow designer and use the search function to find a specific node.
To add a node, follow the instructions.
Variables
On the top-right corner you can access the Variables section. This panel displays all the variables used by the flow. Each node can produce or collect variables during execution, and all of these variables are centrally visible from this section, which also allows you to copy and paste them for use elsewhere.
Settings
In the bottom-right corner, the settings opens a panel that provides access to a wide range of flow-related options:
-
Copy Flow URL: Copies the direct URL of the current flow to your clipboard, allowing you to easily share or access it.
This function is not available for Library flows.
-
Download Current Flow: Downloads the current flow configuration as a JSON file, so that you can import, store, or back it up locally.
-
Upload Language: Allows you to upload a language JSON file to update or add translations for the flow content, as explained in the languages section.
-
Mini Map: Displays a compact overview of the entire flow, helping you navigate large or complex flows more efficiently.
-
Save Flow: Saves the current state of your flow, ensuring that all changes and updates are preserved.
-
Flow Version: Shows the version history of the flow, enabling you to track changes or revert to previous versions, as described in the versioning section.
-
Edit Flow: Allows you to edit the general configuration of the flow. Settings are the same as described in the edit flow section.
Other functions
On the IO designer grid, you can right-click to add comments, and to copy or delete nodes.
Use comments to group multiple nodes into a single block and highlight specific sections of the flow for better visibility.
Authentication flow step-by-step example
The following steps guide you through designing a new flow:
-
Open the left sidebar and select Visual Identity Orchestrator.
This opens a list of flow categories. For this example, we create an authentication flow.
-
Select the authentication category and add a flow.
-
In the top-left corner, open the node.
-
Drag and drop the Start node onto the IO grid to add it.
-
Add a Frontend - Form node and connect the Not authenticated output of Flow - Start to the input of the new node.
By default this node form has two input variables that are Username and Password.
-
Select the node to open it.
-
On the Variable Output Table tab, add an element where the ID of the submit element is the login button and the Output is, for example, Success.
This setting enables the output of the node that subsequently needs to be connected to the authentication node.
-
On the Save in the flow store tab, click Select all to add all the parameters to be saved in the flow state and then write a name of the variable where to store it (example name could be user) and click done to save it.
-
Add the Authenticate User node and link the Success output of the previous node to the input of this new node.
-
Open the Authenticate User node and in the Username field put the variable saved earlier with the value
{{user.username}}. Do the same on the Password field with value{{user.password}}. Other settings can be kept as default. Click done to save the node. -
Add the Flow - End Success node and connect the Success output of the Authenticate User node to the input of this node.
-
Add the Flow - End Failure node and connect all the Failure outputs to this node input.
-
To save the authentication flow, in the bottom-right corner, select the gear icon and then select Save.
Next steps
Learn more about flow operations:
