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 take a look at the list component.
Before we are able to display a list, we need to configure how we want the list to be displayed. We do this by clicking Add Column from the Data Presentation section.
Properties used in the columns are automatically populated based on the type. Here is one example:
We can add multiple columns. Clicking Save Component saves the list.
When configured, this is what the list component looks like on the page layout:
The list – Item 1, Item 2, Item 3 – are placeholders for the list. We will see the data when we run the flow. For example, this list gets rendered like this:
- Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=8df239dd-fd4b-4138-8638-4eb4c17ebe3d
- Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/list.json