Skip to main content

Action-Button Group

📘 Developer Guide

With the Action-Button Group Brick, you can easily add multiple grouped Buttons to your dashboards.
You are able to listen to the Actions, which will be emitted on Button click to react with Scripting onto them.

🔁 Example

Designer

image.png

Runtime

image.png

⚙️ Configuration Properties
Config
Key Label Description Default Value
id ID of the Button Can be selected using CSS via #flyze-button-id
string UUID		 Random UUID
orderId The order of button groups Accepts a number. Allows to orderordering the groups to your likingliking.
number		 -
version Decider for the version of the Button Please alwaysAlways use modern, since legacy will be removed in the future!future.
It just exists for backward compability purposescompatibility
modern legacy		 legacy
layout The layout of the action button group Allows to switchswitching between pre definedpredefined layouts.
row | column		 row
buttons * The Buttons within the group Accepts aan array of Action-Button Configs.configs.
FyzSbActionButtonConfig[]		 []
🎨 CSS Variables

(These variables will even allow you to override predefined states without the use ofusing !important)

–

  • --fyz-sb-button-group-direction translates to the direction of the group
    –
  • --fyz-sb-button-group-gap translates to the gap between each button
    –
  • --fyz-sb-buton-group-margin translates to the margin between each group (Top, Right, Bottom, Left)

🛠️ Usage

Config

(Edit the whole configuration of the Button-Group to your liking)

image.png

2.⌨️ Programmatical Data

2.1 How to style the layout

This example shows,shows how to style your Button-Group via CSS
CSS.

[layout="row"] {
  --fyz-sb-button-group-direction: row-reverse;
  justify-content: center;
  align-items: centercenter;
}

Use the Layout Brick to style groups based on thatthis exampleexample.

2.2 How to update the Button-Group via Scripting
 
// ⚙️ Retrieve the current configuration of the Brick
const config = fyzBrick.cRef.getConfig();

// 🏭 Define a new Button
const newButton = {
  version: "modern",
  text: "Hit me up",
  tooltip: "I dare you",
  visible: true,
  show: true,
  eventBus: "brick",
  state: "default",
  shortcut: {
    key: "a",
    ctrlKey: true,
    altKey: true,
    shiftKey: false
  },
  prefixIcon: {
    version: "modern",
    iconCategory: "social",
    iconName: "eco",
    size: "small"
  },
  suffixIcon: {
    version: "modern",
    iconCategory: "action",
    iconName: "play",
    size: "default"
  }
};

// 💱 Modify and merge the config to change to the desired button-group/behavior
fyzBrick.cRef.mergeConfig({ ...config, layout: 'column'"column", buttons: [newButton, newButton] });
Back to top