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