Working with the Flow canvas

The Flow canvas is where we build all our flows. When we create a new flow, we are led to this magical place, inside the drawing tool.  The canvas has nine map elements on the menu in the left-hand side, and a right-hand side navigation with options like Shared Elements or Publish.

We can find the Flow ID and Flow Version ID at the bottom of the canvas, as also the date when the flow was last modified, and the keyboard shortcut to a help menu.

This is what the canvas looks like:

Left-hand-side menu (Map elements)


On the left-hand side of the canvas we have the map elements. Map elements are the elements we can drag and drop to the canvas. Let’s take a quick look:

Step — The step element lets us display content to end-users of our apps. A step can contain videos, images, tables, links, presentations, or code snippets.

Page — With the Boomi Flow page element, we can lay out the structure of pages our users will interact with. We can create our own components and containers within page layout as well.

Operator — Operators are used to change values in the state. This can be done using standard operations or macro operations.

Decision — The decision element lets us create conditional routing – where one incoming sequence gets split into two or more outgoing sequences, based on pre-conditions.

Message — A message action is how we connect with third-party integrations. We use the message element to send zero to many inputs to a service to perform an action, or receive zero to many outputs from the service as a result.

Database Load — We use the database load element to load data from a service into an object or list value.

Database Save — We use the database save element for inserting/updating an object or list value associated with a service.

Database Delete — We use the database delete element to delete data from a service that has been stored in an object or list value.

Swimlane — We use the swimlane element to use different authentication strategies for some parts of the flow. For example, we can split the same process to take different lanes for different people, groups of people, or subprocesses.

Right-hand-side navigation


Let’s take a look at the right-hand side navigation now. There are four icons here – Shared Elements, Navigation, Properties, Run, and Publish.

Shared elements — We can access the shared elements in our tenant by clicking the Shared Elements tab on the right-hand side navigation.

This opens the Shared Elements dialog box that lists all the shared elements in our tenant. Shared elements – values, pages, types, services, and macros – are elements that can be used by multiple flows.

Navigation — Clicking the Navigation icon lets us add a new navigation and edit existing navigations.

We use the navigation element to build non-sequential workflows, where flow control passes from one element to another without waiting for a previous element to be executed.

Properties — We can edit the properties of a flow, after we have built it. The Properties icon opens the Flow Properties dialog box. 

We can change the name of the flow, flow access, and the option for social feed from here.

We can also configure some of the more advanced flow options from here if we like. We can configure Groups, Users, Identity Service, Navigation, and State from here. We can also add any comments we may like.

Run — Running a flow lets us see how our app will be rendered in real life. We can run a flow by clicking the Play button – the third icon on the right-hand-side navigation of the canvas.

The Run dialog box lets us select the player want to use with our flow, as well as the debug mode.

Publish — Publishing a flow creates a snapshot of the flow.

It generates a Flow URL, which we can share with others. If we subsequently edit or update the flow and publish it again, our end-users will automatically access the updated version of the app via the Flow URL.

We can find the Flow ID and Flow Version ID at the bottom of the canvas, as also the date when the flow was last modified, and the keyboard shortcut to a help menu.