Actions-Column
📘 Developer Guide
With the Action-Column Brick, you are able provide multiple Action-Buttons in a Action-Group, to react to button clicks which throws actions defined by the buttons.
For more information, see Action-Button and Action-Button Group
🔁 Example
Designer
(Only dropable in body columns)
Runtime
⚙️ Configuration Properties
(Extends BodyCell)
component: 'FyzSbTableCellActionsComponent'
component.config
| Key | Label | Description | Default Value |
|---|---|---|---|
buttonGroupConfig |
The configuration of the Button Group | Find out more under Action-Button Group | - |
🛠️ Usage
Designer
(Use the build in configuration Inputs in the right Side-Nav)
Config
(Edit the whole configuration of the Action-Column to your liking)
2. Programmatical Data
2.1 How to react to action button events
Define an relation key, to listen to the click actions
For this we are setting the Event Bus to Scope, since we want to react on the actions in the table brick. Otherwise we can't gather the information needed, which is contained in the row data
Create action scripts based on the relation keys defined in the button configs
Set the Event Bus to Scope here also, otherwise the action will not get fired
fullNameAction:
// ⬇️ Extract the row data via the actionData
const rowData = actionData.row;
// 🧑💻 Do your thing
console.log(`${rowData.firstname} ${rowData.lastname}`);renteAction:
// ⬇️ Extract the row data via the actionData
const rowData = actionData.row;
// 🧑💻 Do your thing
console.log(`${67 - rowData.personalInfo.age} years left to Rente 🌄`);🪄 See how the magic unfolds, after clicking a button in the Table
