Button Component
The Button component adds a clickable action to a report page. Buttons support navigation between pages, drill-through to detail views, external URL links, bookmark navigation, back navigation, and filter actions. They are primarily used in interactive web outputs; in PDF export, buttons render as styled visual elements but the action is not active.
Action types​
| Action type | Description |
|---|---|
| Navigate page | Jumps to another page in the same output when clicked. |
| Navigate bookmark | Jumps to a named bookmark anchor on the same page or another page. |
| Navigate URL | Opens an external URL in a new browser tab. Use for linking to source systems, documentation, or external dashboards. |
| Drill through | Opens a detail page filtered to the context of the current selection (e.g., clicking a discipline name on a summary page opens the discipline detail page filtered to that discipline). |
| Back | Returns to the previously viewed page (browser-style back navigation). |
| Filter | Applies or clears a filter on the current page when clicked (toggleable). |
Navigate page setup​
- Set Action type to Navigate page.
- Select the Target page from the dropdown of pages in the current output.
- Optionally pass parameter values to the target page: In Properties → Parameters, map the current page context to parameters the target page consumes.
Drill-through setup​
Drill-through is the most powerful button action. It allows a summary page to act as a navigation hub into detail pages:
- Set Action type to Drill through.
- Select the Detail page (the destination page configured as a drill-through target).
- In Properties → Drill-through mapping, map each filter field: the field value from the current page (e.g., the selected discipline) maps to a parameter or filter on the detail page.
- On the detail page, ensure the target parameters or filters reference the passed values.
Navigate URL setup​
- Set Action type to Navigate URL.
- Enter the URL (must begin with
https://). - Enable or disable Open in new tab (default: enabled).
Dynamic URL segments can include field values: use {[FieldName]} syntax. For example: https://app.example.com/activities/{[ActivityID]}.
Filter action setup​
| Property | Description |
|---|---|
| Filter field | The field to filter when the button is clicked. |
| Filter value | The value to apply. Can be a static value or bound to a field. |
| Toggle behavior | Click once to apply the filter; click again to clear it. |
| Scope | Page (affects only the current page) or Report (affects all pages sharing the field). |
Button style options​
| Option | Description |
|---|---|
| Label text | The text shown on the button. |
| Icon | Optional icon from the icon library, shown before or after the label. |
| Button style | Filled, outlined, ghost (text only), or icon only. |
| Fill color | Background color for filled style. |
| Border color | Border color for outlined style. |
| Text color | Label text color. |
| Font size and weight | Typography of the label. |
| Corner radius | Rounded corners (0 = sharp, 50% = pill shape). |
| Padding | Inner spacing around the label. |
| Size | Small, medium, large, or custom width/height. |
| Disabled state | Style when the button is non-interactive (greyed out). |
| Hover state | Color change on hover (interactive mode only). |
Icon support​
Buttons can display an icon from the built-in icon library (1000+ icons from Material Design and project-specific sets):
- In Properties → Icon, click the icon picker.
- Search by name or browse by category.
- Set icon position: Left of label or Right of label or Icon only (no label).
- Set icon size independently of the label font size.
PDF export behavior​
In PDF export, buttons render as styled visual elements (label and icon visible) with the appearance configured, but are not clickable. If a button's purpose is navigation, consider adding a tooltip or footnote explaining what the button links to in the interactive version.
Good practice​
- Use Back buttons on drill-through detail pages so users can return to the summary page without using the browser's back function.
- Use Navigate URL buttons sparingly — external links should be stable and should not require authentication.
- For filter toggle buttons, use a visual indicator (e.g., border change or fill toggle) so users know when the filter is active.
- Group navigation buttons in a consistent location on each page (e.g., top-right or bottom-center).
Related​
- Parameters and Calculated Fields — parameters used in drill-through mapping
- Slicers and Filters — filter controls alternative to filter buttons
- Output Designer Overview — page and canvas layout structure