Category Formatting Example

column-formatting.json

{
    "elmType": "div",
    "style": {
        "flex-wrap": "wrap",
        "display": "flex"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "box-sizing": "border-box",
                "padding": "4px 8px 5px 8px",
                "overflow": "hidden",
                "text-overflow": "ellipsis",
                "display": "flex",
                "border-radius": "16px",
                "height": "24px",
                "align-items": "center",
                "white-space": "nowrap",
                "margin": "4px 4px 4px 4px"
            },
            "attributes": {
                "class": {
                    "operator": ":",
                    "operands": [
                        {
                            "operator": "==",
                            "operands": [
                                "@currentField",
                                "Twitter"
                            ]
                        },
                        "sp-css-backgroundColor-BgDarkRed sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                        {
                            "operator": ":",
                            "operands": [
                                {
                                    "operator": "==",
                                    "operands": [
                                        "@currentField",
                                        "LinkedIn"
                                    ]
                                },
                                "sp-css-backgroundColor-BgBlue sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                                {
                                    "operator": ":",
                                    "operands": [
                                        {
                                            "operator": "==",
                                            "operands": [
                                                "@currentField",
                                                "Mastadon"
                                            ]
                                        },
                                        "sp-css-backgroundColor-BgTeal sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                                        {
                                            "operator": ":",
                                            "operands": [
                                                {
                                                    "operator": "==",
                                                    "operands": [
                                                        "@currentField",
                                                        ""
                                                    ]
                                                },
                                                "",
                                                {
                                                    "operator": ":",
                                                    "operands": [
                                                        {
                                                            "operator": "==",
                                                            "operands": [
                                                                "@currentField",
                                                                "Print"
                                                            ]
                                                        },
                                                        "sp-css-backgroundColor-BgGray sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                                                        {
                                                            "operator": ":",
                                                            "operands": [
                                                                {
                                                                    "operator": "==",
                                                                    "operands": [
                                                                        "@currentField",
                                                                        "Google Ads"
                                                                    ]
                                                                },
                                                                "sp-css-backgroundColor-BgOrange sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                                                                {
                                                                    "operator": ":",
                                                                    "operands": [
                                                                        {
                                                                            "operator": "==",
                                                                            "operands": [
                                                                                "@currentField",
                                                                                "Bing Ads"
                                                                            ]
                                                                        },
                                                                        "sp-css-backgroundColor-BgPurple sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
                                                                        "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                                                                    ]
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            },
            "txtContent": "@currentField"
        }
    ],
    "templateId": "BgColorChoicePill"
}