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.
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.
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
- Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=452c712b-4fa9-40d7-accf-6b349b771653
- Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/tiles.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.