Flow Builder Basics: Getting to Know the Step Element

Blog Post created by chris_cappetta Employee on Aug 13, 2018

Boomi Flow gives you the ability to build applications and business processes.  Think of it as integrating your humans with your systems and data. In this post I wanted to share some tips and best practices for using the Step Element in your next flow.


Simply put, a Step element allows a flow builder to create a simple user interface (UI), most often containing text and images. Let's learn more.



Reference Guide

Here is a link to a tutorial that you may find useful when using and configuring Step elements.


Step Element Usage


When to use a Step

A Step is a perfect way to present visual data to the Flow user, and give them options in the form of buttons. Conversely, If your goal is to collect data with components like input fields, toggles, or picklists, then a Page Element is the best choice. A Page has more capabilities than a Step, but requires more configuration. Stay tuned for a future post on Page elements; but now, back to the topic at hand. Here are a couple screenshots of the sort of views we often use Steps to create:


Mobile step with outcomes    Desktop process summary step

Connecting Steps with other parts of the flow

A step is the light blue element


A Step is the light blue element available to be dragged onto the build-canvas. Any Outcomes dragged from a Step, into another element, will appear at the bottom of the Step UI as buttons. The "Go" and "Approve" lines in the above image are Outcomes.


The text content of these buttons is defined by the label in the Outcome configuration dialogue that pops up after you drag a line from the middle of one element to the next. An Outcome with a label of "Approve" is rendered like this:


Sample 'approve' button


In the image above you can see the Outcome being rendered as a button. Interestingly, Outcomes can also be used on non-UI elements. In that case they provide logic, rules, and automated routing.


Configurations within a Step

While you're adding content to your Steps, HTML is being generated behind-the-scenes. Standard text added to a Step will generate a paragraph HTML tag by default.


For example, typing "My text content" will generate the following behind the scenes:

<p>My text content</p>


Of course, with Boomi Flow you don't have to worry about the code... unless you want to!


The rich-text editor includes the option to make-bold or italicize this text content.

Screenshot of configuration options


Within the Format menu of this rich-text editor you'll also find the ability to inject other varieties of style like block text, subscript & superscript. "Headings" are commonly used to style the size of style of text. Behind-the-scenes these generate the html heading tags.


Screenshot of formatting options

I've found a favorite format-configuration to be Heading 3 as the Step's 'title' (which generates the <h3> HTML tag when configured); with a combination of bold text, italicized text, and normal text to fill out content.

Other useful point-and-click configuration options

The Mountain icon lets you insert an image. You can either upload one on the fly, or use a file that you've already uploaded to your tenant's Assets.


Insert image icon


The Chain icon lets you insert a web link, to be opened in the same or a different tab.


Insert url icon


The Insert Value button lets you search and add a "value reference" to any of the values in your tenant. This is very handy for showing loaded or collected data, in text form.

Insert value button


Side-by-side example:

Value reference example



Going Deeper


Step source code


In the "View" menu of the Step element you're actually able to see and edit the HTML that's being generated.

Screenshot of view source


Within that view you can add the tag <hr> to generate a horizontal line. This is useful for separating sections of content.

HR Source HR Render


CSS and embedding

The Step source code allows you to leverage a number of HTML mechanisms. You can insert iframes in a Step (perhaps to embed a youtube video, or a document). 


You're also able to add inline style to any tags.


<h3 style="color: blue; margin-left: 30px;">Step Title</h3>


Additionally you could add a class within a tag, and then style it with code in the player or external style sheet. (Keep an eye out for a future post on the principles of a Flow player).



A Step element is relatively straightforward, but can be creatively applied in a lot of ways. We have a long-time Flow customer in the Healthcare & Life Sciences space that uses over a thousand call center agent conversation-scripting flows, comprised almost entirely of Steps and Outcomes. They also leverage a nifty history setting that can be turned on in the flow player. This setting show the agents a UI pane, that tracks the full path of selections (as well as the options that weren't selected) throughout the conversation.


Chris Cappetta is a Workflow Solutions Architect for the Boomi Flow team. He likes nachos.