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

This example uses with 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

🛠️ 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