Page layout — Outcomes

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Let’s look at outcomes.

Outcomes

The outcomes component displays outcomes associated with page components. It is useful for more complex positioning of outcomes within a page layout.

Outcomes will be rendered in a row and can be aligned using the Bootstrap column classes.

We drag and drop the outcomes component to a container in the page layout.

Like with other components, this opens a configuration panel on the right-hand-side that lets us customize the component.

Attributes

We can configure the following attributes either from the metadata or the drawing tool.

Key	Value	Description
justify	string	Left, center, right.
group	string	Bootstrap button groupings: horizontal or vertical.
columns	string	Bootstrap column sizes. Example: xs-6, md-12, etc. Setting this attribute causes the outcome button elements to be wrapped in a `div` element.
outcomeClasses	string	Custom class names that will be added to each child outcome.
classes	string	Part of our classes framework, added to the root element.

Using the drawing tool:

Here are some examples of how outcomes in the page layout can be rendered:

Goody bag

Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default?flow-id=d2ebd60f-4433-448a-8d07-7c7e2c8f35e3
Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/outcomes.json

Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, drawing tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.