Page layout — Tiles

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


The tiles component lets us display a list of objects as a series of tiles.

We drag and drop the tile component to a container in the page layout. Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component.

We can make the tiles editable, required, multi select, or searchable from the Settings menu in the configuration panel.

The first defined column will be displayed as the heading of the tile. The second defined column is displayed as a paragraph in the body of each tile. Every other column will be displayed at the bottom of the tile using a Label: Content format.

The tiles are rendered at runtime. We will not be able to see them in action using preview.

Outcomes associated with the tiles component will be displayed at the bottom of each tile. Each outcome’s width is distributed evenly. For example, one outcome will fill the entire width, two outcomes would be 50 per cent wide each, and so on. If an outcome is defined as Is Bulk Action, it will be displayed above the tiles and will operate on whatever item(s) are selected.

Outcomes with the Delete type will be displayed on the top right corner of the tile.

By default each tile is 300px by 300px. We can customize the tiles settings by updating the tiles component metadata with our preferred configuration:

By default, pagination is disabled for tiles populated by a list. We can enable it by setting the pagination attribute to true. We can also change the number of tiles that are displayed on a page (default is 20) or adjust the page size itself by using the paginationSize attribute.


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