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