Page layout — Outcomes

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

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

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
  1. Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default?flow-id=d2ebd60f-4433-448a-8d07-7c7e2c8f35e3
  2. 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.