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.

Tiles

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.

Tile Metadata

Settings for Tiles can be configured via the Tiles component metadata. Please note that if you wish to edit the size of the Tiles you should do this within a Flow Player – see below for more details.

Tile Size

Tiles are set to 300px by 300px by default, but this can be amended via CSS within a Flow Player. To change the size of the Tiles, target the  body .mw-bs .mw-tiles-item-container CSS style in a Flow Player and edit the height and width as required, for example:

<style>
body .mw-bs .mw-tiles-item-container {
height: 200px;
width: 300px;
}
</style>

Pagination

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.

Attributes

Key Value Description
classes strings Custom class names that will be added to the mw-tiles element
pagination true or false Enable pagination if the table is bound to a list of items
paginationSize number Set the number of items displayed on each “page” of this table. Set to zero to display all items (if supported by the Service the table is loading data from)
noResults string Custom message that will be displayed if no results are found
Goody bag
  1. Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=452c712b-4fa9-40d7-accf-6b349b771653
  2. Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/tiles.json