When you build custom workbooks, you can go beyond tables and charts by using layout components that display data as structured cards, detail panels, and organised lists. These components are designed for users who create their own workbooks and want to build polished, interactive pages.
These features are currently in early access. They are available to customers with an AQ Advanced licence.
What you can build
These three components work together to create interactive, data-driven layouts. A common pattern is a gallery of cards (repeated container) where clicking a card reveals detailed information about that record (single row container with value lists). We use this pattern in the PCF customer report templates to create live methodology reports.
You can also use each component independently—for example, a standalone value list to display key metrics, or a repeated container to create a visual gallery of products or facilities.
Value lists
A value list displays data as an organised set of label-value pairs, similar to a details card or summary panel.
Create a value list
In Edit mode, click Add element in the toolbar.
Select UI, then choose Value list.
A value list with three empty fields appears on your page.
Result: The value list is added to your page, ready for configuration. Each field has a label and a value area.
Configure fields
Each field in a value list can display data in one of two ways:
Source column — pulls a value directly from a connected data source. This option is available when the value list is placed inside a container (repeated container or single row container).
Formula — displays a custom formula result, a control value, or static text. This option is always available, even for standalone value lists.
To configure a field:
Click the field you want to edit.
In the Editor panel, choose Source column or Formula.
Select the column or enter your formula.
Optionally, edit the field label by clicking it directly.
You can add fields using the Add field button, remove fields you don't need, and reorder fields by dragging them.
Each field displays a single value. If the data source or formula returns multiple values, the field shows "Multiple values".
Customise appearance
Select the value list, then open the Format tab in the Editor panel to adjust its appearance.
Setting | Options |
Layout | Grid, compact, separated, stacked |
Background | Colour picker or hex code |
Border | On/off, corner style (square, round, pill) |
Label format | Font size, weight, colour |
Value format | Font size, weight, colour |
Repeated containers
A repeated container is a layout element that generates a card for each row in a data source. You define the card layout once, and it repeats dynamically with data from each row—useful for creating galleries, card-based dashboards, or visual overviews of your data.
Create a repeated container
In Edit mode, click Add element in the toolbar.
Select Layout, then choose Repeated container.
Select a data source for the container.
Alternatively, hover over an existing table, click the Create child element icon, and select Repeated container.
Result: The container appears on your page, generating one card for each row in the data source.
Configure the layout
Setting | Options |
Layout | Grid (default) or List |
Card size | Small, Medium, Large |
Spacing | Card gap, padding, element gap |
Styling | Background colour, border, corner style (square, round, pill) |
In Grid layout, the number of cards per row adjusts automatically based on the container width. In List layout, each card takes up a full row.
Add content to cards
You define the layout of one card, and every card in the container mirrors that layout with its own row's data. You can add the following elements inside a card:
Text, images, and buttons
Value lists (for structured label-value details per card)
Tables, charts, controls, and nested containers cannot be placed inside repeated containers.
Set up card click actions
You can configure what happens when a user clicks a card—commonly used to update a single row container to show the clicked record's details.
Select the repeated container.
In the Editor panel, select the Actions tab.
Under On select card, configure the action sequence.
For example, you might set the action to update a single row container with the clicked row's key value.
Single row containers
A single row container is a layout element that displays data from one row of a data source at a time. By selecting a key column and value, you choose which row's data appears inside the container. When the selected row changes, all elements inside the container update automatically.
Create a single row container
In Edit mode, click Add element in the toolbar.
Select Layout, then choose Single row container.
Select a data source (table or input table).
Choose a key column—a column with unique values that identifies each row (for example, a product ID or facility name).
Optionally, select a default row to display.
Result: The container appears on your page, displaying data from the selected row.
Display data inside the container
Place elements inside the single row container and connect them to columns from the data source:
Value lists — show structured label-value pairs for the selected row
Text elements — display individual column values as text
Image elements — show images from URL columns
When the container switches to a different row, all connected elements refresh automatically to show the new row's data.
Connect to a repeated container
The most common use of a single row container is as a detail panel that updates when a user clicks a card in a repeated container:
Add a repeated container connected to your data source.
Add a single row container connected to the same data source, with a unique key column selected.
Select the repeated container and open the Actions tab.
Under On select card, add a Set single row container action. Configure it to pass the clicked row's key value to the single row container.
Result: Clicking a card in the repeated container updates the single row container to display that record's details. This creates an interactive gallery-and-detail layout where users can browse records visually and drill into specifics.
Tips
Start simple: Build a value list on its own before combining it with containers. This helps you understand how fields and data sources work before adding the complexity of dynamic row selection.
Use unique key columns: Single row containers require a column with unique values to identify rows. If the key column contains duplicates, you'll see "Multiple values" errors in connected elements.
Pair containers for detail views: Use a repeated container as a gallery and a single row container as the detail panel. Connect them with an "On select card" action for a dynamic, interactive layout.
Keep cards focused: Repeated container cards work best with a few key fields. Use value lists inside cards for a clean, structured look rather than cramming in too many separate elements.