Actions-Column
📘 Developer Guide
With the Action-Column Brick, you can provide multiple Action-Buttons in an Action-Group to react to button clicks which trigger actions defined by the buttons.
For more information, see Action-Button and Action-Button Group.
🔁 Example
Designer
(Only droppable in body columns)
Runtime
This example uses the following data set:
{
"data": [
{
"id": "1",
"firstname": "Jane",
"lastname": "Doe",
"personalInfo": {
"age": 34,
"gender": "female"
}
},
{
"id": "2",
"firstname": "John",
"lastname": "Doe",
"personalInfo": {
"age": 27,
"gender": "male"
}
},
{
"id": "3",
"firstname": "Max",
"lastname": "Mustermann",
"personalInfo": {
"age": 35,
"gender": "male"
}
}
]
}
⚙️ 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 built in configuration Inputs in the right Side-Nav)
Config
(Edit the whole configuration of the Action-Column to your liking)
⌨️ Programmatical Data
How to react to action button events
Define a relation key to listen to the click actions.
Set the Event Bus to Scope, so you can react on the actions in the Table Brick and access 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.
Example script for fullNameAction:
// ⬇️ Extract the row data via the actionData
const rowData = actionData.row;
// 🧑💻 Do your thing
console.log(`${rowData.firstname} ${rowData.lastname}`);
Example script for 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
</details>
No Comments