Tab Block – tabs or an accordion¶
The tab block splits a part of the dashboard into tabs, so several views share the same space. It can also be drawn as an accordion. Each tab is a Tab Item Block that holds the widgets of that tab.
This page is part of the widget reference. It describes both the Tab Block and the Tab Item Block.
1. At a glance¶
| Purpose | Several views in the same space, as tabs or as an accordion |
| Typical use | "My tasks / Team tasks / Overdue"; heavy charts that should only load when needed |
| Related | Vertical Stack with "Expandable" for a single foldable section |
Add the Tab Block first, then add Tab Item Blocks inside it. A Tab Block only accepts Tab Item Blocks as children.
2. Settings¶
Tab Block¶
In addition, the widget has the settings every widget has, except "Auto Refresh".
| Setting | Meaning | Default |
|---|---|---|
| "Display Style" | "Tab" or "Accordion" | none – must be set, otherwise nothing is drawn |
| "Header Placement" | Where the tab headers sit: Left, Right, Top, Bottom. Applies to the style "Tab". | none |
| "Loading Behavior" | "Preload" loads every tab when the dashboard opens. "OnDemand" (and "None") loads a tab when it is first selected. | None (on demand) |
| "Preserve Selection" | Remembers per user which tab was open and opens it again on the next visit | off |
| "Header Padding" | Inner spacing of the tab headers, per side, as CSS length (plain numbers are pixels). "Tab": indents the whole header strip – a left and right value of 16 leaves 16px in front of the first and behind the last header; the line between the headers and the content keeps its full length. "Accordion": the inner spacing of every section header. | empty – the built-in spacing |
The Typography settings of the Tab Block ("Font Size", "Font Weight", "Text Color", "Text Decoration", "Text Transform") style the tab headers and accordion headers, not the content: the widgets inside a tab have a typography of their own. A "Text Color" applies to the selected and the other tabs alike; the line under the selected tab still marks it.
Tab Item Block¶
| Setting | Meaning | Default |
|---|---|---|
| "Title" | The title on the tab header | none |
| "Icon" | An icon in front of the title (category Appearance) | none |
| "Disabled" | Condition that makes the tab unselectable | never |
| "Selected" | Condition deciding which tab is open when the dashboard loads | – |
A tab needs a title, an icon or both – otherwise its header is empty.
3. Behaviour¶
- Which tab opens: a tab remembered by "Preserve Selection" wins. Otherwise the first tab whose "Selected" condition is true. Otherwise the first tab. An accordion without a selected item starts closed.
- Loading on demand keeps a dashboard with several heavy tabs fast: the queries of a tab run only when the user selects it.
- "Visible" of a Tab Item Block hides the tab completely.
- The tab block does not refresh itself. Switch on "Auto Refresh" on the widgets inside the tabs.
4. Example¶
Tasks in three tabs. Tab Block with "Display Style" "Tab", "Header Placement" "Top", "Loading Behavior" "OnDemand" and "Preserve Selection" on. Three Tab Item Blocks "My tasks", "Team tasks" and "Overdue", each with a query result grid.
5. Limitations¶
- Without "Display Style" the tab block draws nothing. New tab blocks start without it.
- Header blocks in front of or behind the title, as forms offer them, are not available on dashboards.