Skip to main content

Action-Button

📘 Developer Guide

With the Action-Button Brick, you can easily add 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
showVisibility of the ButtonAccepts either true or false (boolean)true
id ID of the Button Can be selected using CSS via #flyze-button-id
string UUID		 Random UUID
version Decider for the version of the Button Please always use modern, since legacy will be removed in the future!
modern-inline allows you to inject content into button directly in the template (Not viable in scripting!)
It just exists for backward compability purposesM
modern legacy modern-inline		 legacy
text The text inside the Button Accepts strings (string) -
tooltip Displays a tooltip on hover Accepts a string, which will be set inside the tooltip wrapper (string) -
state The state of the button Allows to switch between pre defined states. UseYou customcan also specify a string to define your own state.state and corresponding styles
default | inverted | transparent | disabled | hover | custom		 default
size The size of the button Allows to switch between pre defined sizes. Use custom to define your own size.
xsmall | small | default | medium | large | custom		 default
customStateNameThe custom state attribute namee.g. insane 
 Lets you create your own custom state. You can target via CSS with [state="insane"]		string
customSizeNameThe custom size attribute namee.g. massive 
 Lets you create your own custom size. You can target via CSS with [size="massive"]		string
Shortcut (config.shortcut)
Key Label Description Default Value
key The key to be pressed Accepts keys as strings e.g. a
Once this is set, the shortcut will be available		 string
ctrlKey Enables the Ctrl-Modifier Accepts either true or false (boolean) -
altKey Enables the Alt-Modifier Accepts either true or false (boolean) -
shiftKey Enables the Shift-Modifier Accepts either true or false (boolean) -
Prefix-Icon (config.prefixIcon)

Accepts an Icon-Configuration

Suffix-Icon (config.suffixIcon)

Accepts an Icon-Configuration

🎨 CSS Variables

(These

variableswillevenyoutooverridepredefinedstateswithout the use of /* translates to the background-color of the button */ -–fyz-sb-button-color /* translates to the text*//*Size specific */ /* /* translates to the height*/– /*thepadding Left)*/–/*theborder-radius
Variable allowName Description
!important)

:root {
/* State specific */
-–-fyz-sb-buton-action-button-bg
 Background color of the button
-–-fyz-sb-action-button-colorText color of the button
--fyz-sb-action-button-font-size Font translates to the font-size of the button */text
-–-fyz-sb-action-button-auto-font-size@see -auto- variables
--fyz-sb-button-height Height of the button
--fyz-sb-button-paddingauto-height @see translates-auto- tovariables
--fyz-sb-button-padding-tbPadding of the button (Top,top Right,and Bottom,bottom)
--fyz-sb-button-radiusauto-padding-tb @see translates-auto- tovariables
--fyz-sb-button-padding-lrPadding of the button */(left }and right)
--fyz-sb-button-auto-padding-lr@see -auto- variables
--fyz-sb-button-radiusBorder-Radius of the button
--fyz-sb-button-auto-radius@see -auto- variables
--fyz-sb-button-gapGap between icon and text inside the button
--fyz-sb-button-auto-gap@see -auto- variables

The -auto- variables are used to automatically adjust the respective property based on device view or respective parent components. They should not be set directly by the user. For each -auto- variable, there is a corresponding non--auto- variable that can be set by the user to override the automatic behavior.

🛠️ Usage

Designer

(Use the build in configuration Inputs in the right Side-Nav)

image.png

Config

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

image.png

⌨️ Programmatical Data

How to style custom States/Styles

This example shows, how to style your Button via CSS
(For this example we set customStateName to insane and customSizeName to round-massive)

[state="insane"] {
--fyz-sb-button-bg: red;
--fyz-sb-button-color: yellow;
}
[state="insane"]:hover {
--fyz-sb-button-bg: blue;
}

[size="round-massive"] {
--fyz-sb-button-font-size: 32px;
--fyz-sb-button-height: 78px;
--fyz-sb-button-padding: 12px 8px 12px 8px;
--fyz-sb-button-radius: 50%;
}

Use the Layout Brick to style buttons based on that example

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

// 💱 Modify and merge the config to change to the desired button/behavior
fyzBrick.cRef.mergeConfig({
...config,
text: 'Hello, i am updated!',
shortcut: {
key: 'a',
ctrlKey: true,
shiftKey: true,
altKey: false
},
state: 'custom',
customStateName: 'updated-button'
})
Example of a fully fletched Button config
 
{
  "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"
  }
}
Example of reacting to a button action

Define a Relation-Key in the Button-Configurator

image.png

Define a Action-Script named after your Relation-Key
(Keep an eye on the Event-Bus Scope!)

image.png

image.png

You'd better push the button and let me know 🤓

image.png

Back to top