Conditional formatting in Modern list view form based on status change

SharePoint modern list are not just user friendly but also provide a easy wasy for customizations on list views and list forms where you can define descriptive customizations based on your business requirements.

In this blog post I am sharing a way to conditionally customize your list view form layout which can also define the current status of your application. I have taken an example of a Issue Tracker list.

Implementation

I am going conditionaly change the form’s header background color and also the icon based on status changed for the form value. Below is a small condition which I have used in header layout section to update the form header background color:

"class": "=if([$Status] == 'Completed', 'ms-bgColor-greenLight', if([$Status] == 'In Progress', 'ms-bgColor-sharedYellow10', if([$Status] == 'Blocked', 'ms-bgColor-red', if([$Status] == 'New', 'ms-bgColor-communicationTint20','ms-bgColor-gray50'))))"

You can find these color classes from SharePoint Online CSS Classes. Now I am going to add another small conditional formula for changing the icon name of list item:

"iconName": "=if([$Status] == 'Completed', 'Emoji2', if([$Status] == 'Rejected', 'Sad', 'Clock'))"

You can find list of all available icons from Fluent UI Icons.

Header JSON

Below is the complete JSON which I have used in my scenario for changing the form header colors and icon.

{
    "elmType": "div",
    "attributes": {
        "class": "=if([$Status] == 'Completed', 'ms-bgColor-greenLight', if([$Status] == 'In Progress', 'ms-bgColor-sharedYellow10', if([$Status] == 'Blocked', 'ms-bgColor-red', if([$Status] == 'New', 'ms-bgColor-communicationTint20','ms-bgColor-gray50'))))"

    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px",
        "padding-left": "10px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "=if([$Status] == 'Completed', 'Emoji2', if([$Status] == 'Rejected', 'Sad', 'Clock'))",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24 "
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Issue Tracker detail for ' + [$Title]"
                }
            ]
        }
    ]
}

You can further modify this JSON or can write your on JSON for custom formatting.