Sharepoint list header Json formatting

Question

I created a SharePoint list for user to place purchase order. When create a new item, the header will show "Submit a new order".

When viewing a item, the header will show "Order Status".

I would like to add a red text to remind user when create new item, When order type equals to Chemical - Non-DGMT, a text will appear under "submit a new order" that tell users to beware of sth like the following.

The code I use:

Please help. Thanks so much.

{
    "debugmode": "true",
    "elmType": "div",
    "attributes": {
        "class": "=if([$Status] == 'Completed', 'transparent', if([$Status] == 'Duplicate', 'transparent', if([$Status] == 'Blocked', 'transparent', if([$Status] == 'New', 'transparent','transparent'))))"
    },
    "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"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "EntitlementPolicy",
                        "class": "ms-fontSize-42 ms-fontWeight-regular  ms-fontColor-black",
                        "title": "Issue"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-black 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": "=if ([$Status] == '', 'Submit a new order', 'Order Status: ' + [$Status])"
                }
            ]
        }
    ]
}

Answer 1

Hi @Ceres215678，

I made a test for your reference:

Here is code:

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "flex-start",
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Group",
                        "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": "='Contact details for ' + [$Title]"
                        }
                    ]
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "color": "red"
            },
            "txtContent": "=if([$Test] == 'Choice 1', '1', 'Other Value')"
        }
    ]
}

I modified it according to the code you provided, please try:

{
    "debugmode": "true",
    "elmType": "div",
    "attributes": {
        "class": "=if([$Status] == 'Completed', 'transparent', if([$Status] == 'Duplicate', 'transparent', if([$Status] == 'Blocked', 'transparent', if([$Status] == 'New', 'transparent','transparent'))))"
    },
    "style": {
         "display": "flex",
        "flex-direction": "column",
        "align-items": "flex-start",
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "EntitlementPolicy",
                        "class": "ms-fontSize-42 ms-fontWeight-regular  ms-fontColor-black",
                        "title": "Issue"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-black 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": "=if ([$Status] == '', 'Submit a new order', 'Order Status: ' + [$Status])"
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "color": "red"
            },
            "txtContent": "=if([$Order Type] == 'Chemical - Non-DGMT', '*Remain ', 'Other Value')"
        }
    ]
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng

Answer 2

I struggled in it for a long time. Thanks so much for you help.