Flow Designer Enhancements

Overview

This article highlights all the UI enhancements to the Flow Designer, which will be available to users starting in v9.11. Below is a breakdown of each enhancement related to Flow Designer.

Grid View

• Grid view is now enabled by default, and all steps will automatically snap to the grid. Whether dragging a new Step onto the canvas or repositioning an existing one, it will align with the grid layout (10x10px).
• Users can also use the keyboard arrow keys to move steps in grid-sized increments. Additionally, resizing a Step will maintain alignment with the grid.
• If needed, the grid functionality can be turned off by clicking the Grid button in the header.
  

Updates to Step Color and Shape

1. Shape and Size:
   • Steps now feature a larger, standardized size and a new shape for improved visual consistency. Most steps from the toolbox will follow this new design, with a few exceptions: Rule Type steps, Log step, Catch Exception step, and Steps under the Annotations category.
   • If a Step has a long name that gets truncated, users can hover over the Step name to view the full name in a tooltip.
     
2. Colors:
   • Steps now come with new default colors that reflect their type and usability, making it easier to visually distinguish between different Step categories.
   • These colors are available out of the box but can be customized. Users can update Step colors by navigating to Designer Settings > Flow Designer > Step Colors. Changing a color here will apply the update across all Steps in the platform.
   • Refer to the table below for detailed information on the default color mappings.
     
     Note: Steps with custom colors applied at the step level will not get affected after upgrading to v9.11.

     Step Type	HEX Color Code	Color Reference	Steps Associated with Color
     All Steps	#2392DB		This is the default color applied to all the steps in the toolbox, except the following steps defined in this table.
     Run Flow or Sub-Flow Step	#525252		Run Flow Run Flow by Path Run Flow w/ Instruction Return Run Flow For CSV Run Flows for List Run Flows in Cluster Run Flows For List [Batch Processing] Setup Process Folder And Run Flow, etc.
     Show Form	#FFB200		Show Form Pick or Create End Form Add Task [External Form] External Form Show Form [External Form], etc.
     Run Rule	#1DB81D		Run Rule Pick or Create Matrix Rule Pick or Create Rule Table Run Rule Set Run Flow/Rule Set Run Rule Table Run Rule Chain Evaluate Dynamic Expression As Rule, etc.
     Run Report	#A818F0		Run Report Step
     Create Data	#005CB8		Create Data Step
     Steps under User Defined Types Category, Fetch Entities, and Fetch Distinct Values Step	#00CCCC		This color is related to all the CRUD actions a step can perform on a data Type/Data structure. Fetch Entities Fetch Distinct Values All the Steps under the User Defined Category
     Iteration Steps	#E57017		Branch ForEach Step Branch ForEach Step (Chunking) For Each In Group Step ForEach Step ForEach Step (Chunking) Reset ForEach Step
     Error Handling	#CC0088		Cancel Flow Execution Catch Exception Catch Outcome Log (Fast) Step Statistics - Get Run Stats Step Statistics - Store Throw APIException Throw APIException With Details Throw APIException With Headers Throw Business Rule Exception A Throw Exception Throw Non Catchable Exception

New Step-Level Action

Each Step now includes three new action buttons for improved usability:

1. Info: Opens a layer displaying detailed information about the step, including its location in the toolbox, a description, and a link to its documentation. If the Step uses another designer entity as a child, the layer will also show the child entity's name, folder path, description, and a preview image.
   
2. Delete: Deletes the step from the designer.
3. Validation: Opens a layer listing all validations associated with the step. Users can choose to ignore or un-ignore validations directly from this layer.
   
   Note: If a validation is ignored from the validation layer on a step, it will also be reflected as ignored in the designer header.
   

Auto-adjusting Connectors

Step connectors now automatically adjust to connect directly to the appropriate edge of the target step, providing a cleaner and more intuitive Flow layout. In previous versions, all connectors were directed to a single fixed point, making complex Flows harder to follow.

Connector Attachment Modes

Users can now connect steps in two distinct ways, depending on how they drop the connector onto the target Step:

1. Attach to Surface (Dynamic): When the connector is dragged and dropped onto the surface of a target Step (highlighting the entire Step), it creates a flexible connection. This means the connector will automatically adjust its path to maintain the shortest connection as the target step moves around the canvas.
   
2. Attach to Edge (Locked): When the connector is dragged and snapped specifically to the edge of a target Step (highlighting only the edge), it creates a fixed connection. In this mode, the connector remains anchored to the same edge, regardless of how the target Step is repositioned.
   

Connector Labelling

Users can now double-click on a connector to rename it. This allows for clearer annotation of Step outcomes, making Flows easier to understand and review.

Note: Renaming a connector is purely for annotation purposes and does not change the Step's actual outcome name. It serves only as a visual aid to help clarify the Flow logic during design and review.

These enhancements are designed to improve usability, clarity, and overall design experience in the Flow Designer, empowering users to build and manage flows more efficiently in v9.11 and beyond.