Page layout — List

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.


The list component lets us add a list (ordered or unordered) to a page.

We can get the data from a service or a list value.

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:

Goody bag
  1. Sample flow –
  2. Sample package –