Badge-Collection Column

📘 Developer Guide

With the Badge-Array-Column Brick, you are able to define a collection of badges. It will display the corresponding badges depending on the defined props data set. Check out the example

🔁 Example

Designer

(Only dropable in body columns)

Runtime

This example uses the following data set:

{    
  "data": [
        {
            "id": "123",
            "firstname": "Jane",
            "lastname": "Doe",
            "personalInfo": {
                "age": 34,
                "gender": "female"
            },
            "profession": [
                "Developer"
            ]
        },
        {
            "id": "456",
            "firstname": "John",
            "lastname": "Doe",
            "personalInfo": {
                "age": 27,
                "gender": "male"
            },
            "profession": [
                "AI Specialist",
                "10X Dev"
            ]
        },
        {
            "id": "789",
            "firstname": "Max",
            "lastname": "Mustermann",
            "personalInfo": {
                "age": 35,
                "gender": "male"
            },
            "profession": [
                "Data Analyst"
            ]
        }
    ]
}

⚙️ Configuration Properties

(Extends BodyCell)

component: `'FyzSbTableCellBadgeArrayComponent'`

component.config

Key	Label	Description	Default Value
`badges`	The configurations of the badges	Find out more under Badge	-

component.contentByPropPath

Key	Label	Description	Default Value
`type`	The type of the display mechanism	`'script'`	`'script'`
`data`	The script which will be executed and parsed.	The script as `string` needs to return a value `string`	`return row[column.propPath] \|\| column.title`