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
- 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