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.

Adnan, a distinguished professional, boasts an impressive track record as a Microsoft MVP, having achieved this prestigious recognition for the eighth consecutive year since 2015. With an extensive career spanning over 18 years, Adnan has honed his expertise in various domains, notably excelling in SharePoint, Microsoft 365, Microsoft Teams, the .Net Platform, and Microsoft BI. Presently, he holds the esteemed position of Senior Microsoft Consultant at Olive + Goose. Notably, Adnan served as the MCT Regional Lead for the Pakistan Chapter from 2012 to 2017, showcasing his leadership and commitment to fostering growth within the tech community. His journey in the realm of SharePoint spans 14 years, during which he has undertaken diverse projects involving both intranet and internet solutions for both private and government sectors. His impact has transcended geographical boundaries, leaving a mark on projects in the United States and the Gulf region, often collaborating with Fortune 500 companies. Beyond his roles, Adnan is a dedicated educator, sharing his insights and knowledge as a trainer. He also passionately advocates for technology, frequently engaging with the community through speaking engagements in various forums. His multifaceted contributions exemplify his dedication to the tech field and his role in driving its evolution.

Leave a Reply