The Group component allows you to group two or more components together. When grouped, the line between components is indented on the left side. The Group component has an optional label.

In the image below, the first three link components are in a group without a label. The second set of link components are in a group with a label.

The Group dashboard card component

Groups can have a label and just one component. For example, if a group had three components and then in an update has just one, the group component is still valid and the label will still display. ​

Group Properties

The Group component (type = group) uses the following properties:

Property Type Description Required?
label ​String Text displayed as a title for the group no
components ​Array The components included in the group yes

This graphic shows how the properties are used to display the components in a group:

Properties of the Group component

Here’s an example of the JSON to display a group as shown in the above image.

[
    {
        "type": "group",
        "components": [
            {
                "type": "link",
                "label": "Warning style",
                "value": 50,
                "style": "warning",
                "link": "https://myurl.com:jwt"
            },
            {
                "type": "link",
                "label": "Info style",
                "value": 50,
                "style": "info",
                "link": "https://myurl.com:jwt"
            },
            {
                "type": "link",
                "label": "Success style",
                "value": 100,
                "style": "success",
                "link": "https://myurl.com:jwt"
            }
        ]
    },
    {
        "type": "group",
        "label": "Disable when empty",
        "components": [
            {
                "type": "link",
                "label": "Disable when empty not set & 0 value",
                "value": 0,
                "style": "info",
                "link": "https://myurl.com:jwt"
            },
            {
                "type": "link",
                "label": "Disable when empty true & 0 value",
                "value": 0,
                "style": "info",
                "link": "myurl.com:jwt",
                "disable_when_empty": true
            },
            {
                "type": "link",
                "label": "Disable when empty false & 0 value",
                "value": 0,
                "style": "warning",
                "link": "myurl.com:jwt",
                "disable_when_empty": false
            }
        ]
    }
]

Help make these docs better!