Button
The widget allows you to add a panel with buttons to a dashboard. When clicked, each button triggers an assigned click action.
You can assign multiple actions to a single button. In this case, clicking the button displays a menu listing all assigned actions.
Data Settings
To configure the widget, add one or more buttons by clicking + Button.
For each button, you can specify:
- Title
- Type (Primary, Secondary, or Link)
- Button color
- Text color
- Border color (available only for Secondary type)
- Click actions
For the button, border, or text, you can select a basic color from the palette (default is Auto).
To remove a button, click Delete.
The button’s appearance on the panel depends on its type.
Input Methods for Click Actions in the Button Widget
Available input methods depend on the selected click action:
- Run script:
- Variable
- From Data Model
- Set by aggregation
- Manual
- Static list
- Dynamic list
- Update variable:
- Variable
- Set by aggregation
- Open view:
- Variable
- Set by aggregation
If you use Manual, Static list, or Dynamic list as the input method, a modal window appears in Browse mode when the Button is clicked, prompting you to enter or select parameters. To execute the click action, make the necessary changes and click Execute.
Additionally, when configuring the Run script action with the Dynamic list input method, the Consider filters toggle becomes available. When enabled, the parameter receives data filtered according to the filters applied in Browse mode.
Input methods cannot be used with the Go to the URL click action.
Display Settings
In addition to standard display settings, you can configure vertical and horizontal alignment for buttons within the widget:
- Vertical alignment: top, center, or bottom
- Horizontal alignment: left, center, right, or full width
Widget Configuration in YAML
You can edit the widget not only in the visual editor but also in the YAML editor. To add the widget, use the buttons block. The tables below list the keys and values used for configuration.
Data Settings in YAML
| Key | Type | Definition |
|---|---|---|
| name | string | Title |
| buttonType | enum | Button type: - primary — Primary- primary-outlined — Secondary- link — Link |
| onClick | — | Click action |
Color Settings in YAML
To specify button and text colors, use the color block with the keys and values shown in the table.
| Key | Type | Definition |
|---|---|---|
| mode | enum | Coloring mode: - AUTO — Auto- BASE — Solid |
| value | string | HEX color code |
For secondary buttons, use the borderColor block with the same mode and value keys to set the border color.
Display Settings in YAML
| Key | Type | Definition |
|---|---|---|
| verticalAlign | enum | Vertical alignment: - TOP — Top- CENTER — Center- BOTTOM — Bottom |
| horizontalAlign | enum | Horizontal alignment: - LEFT — Left- CENTER — Center- RIGHT — Right- FILL — Full width |
Example of a Configured Widget in the YAML Editor
- key: button
apiVersion: "16"
type: BUTTON
settings:
buttons:
- name: Refresh store list
onClick:
- type: UPDATE_VARIABLE
name: Update variable
variables:
- inputMethod: VARIABLE
sourceVariable: Stores
name: Stores
buttonType: primary
horizontalAlign: LEFT
verticalAlign: TOP
sorting: []
Was the article helpful?