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