Modern SharePoint list columns can be customized using a simple rendering template built with a JSON syntax.  This is the successor of using conditional formatting in SharePoint Designer.  When using column formatting, you can replace the default style for how a column is rendered with your own rendering logic.  In this article we demonstrate a custom format for the Yes/No column type that will show a check mark in the list view when the value of the column is equal to Yes.  To learn how to use a visual status indicators on a choice column see our article SharePoint Modern List Traffic Light (Red-Yellow-Green) Status Indicator Column.

To display the column formatting pane use the drop-down for the column you want to format and select Column settings -> Format this column.

This will open the Format column pane to the right-side of the window.  You simply paste your JSON column formatting into this panel and then click Preview or Save to see the column rendering in action.

Paste the JSON code shown below into the Format column pane to render a SharePoint Yes/No column with a check mark when the value of the column is equal to Yes.

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "debugMode": true,
    "elmType": "div",
    "style": {
        "font-weight": "bold"
    },
    "attributes":
    {
        "iconName": {
            "operator": "?",
            "operands": [
                {
                    "operator": "==",
                    "operands": [
                        {
                            "operator": "toString()",
                            "operands": [
                                "@currentField"
                            ]
                        },
                        "true"
                    ]
                },
                "CheckMark",
                ""
            ]
        }
    }
}

For more information, see the Microsoft document about using JSON custom formatting Use column formatting to customize SharePoint.

This column formatting is also available from the PnP github repo SharePoint/sp-dev-column-formatting.

Share
This

Post a comment