1

I am trying to update SharePoint List Form in SharePoint Online so that when a Single Line text field is blank the Header will display a specific message and color but if there is any data in the Single Line Text field it will display a different message and color.

Below is the JSON script I tried but it's not working:

{
    "debugmode": "true",
    "elmType": "div",
    "attributes": {
        "class": "=if([$Question] == '', 'ms-bgColor-redDark', ifno([$Question] == '', 'ms-bgColor-greenDark')"
    },
    "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": "Bug",
                        "class": "ms-fontSize-42 ms-fontWeight-regular  ms-fontColor-black",
                        "title": "Question"
                    },
                    "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 ([$Question] == '', 'Complete the QA Frequently Asked Questions form below. Select the Category that most closely matches the question or select Other:', 'See Question Below')"
                }
            ]
        }
    ]
}

1 Answer 1

1

Syntax for if function is like:

if(logical_test, value_if_true, value_if_false)

Use below JSON to customize the header:

{
    "elmType": "div",
    "attributes": {
        "class": "=if([$Question] == '', 'ms-bgColor-redDark', 'ms-bgColor-greenDark')"
    },
    "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": "Bug",
                        "class": "ms-fontSize-42 ms-fontWeight-regular  ms-fontColor-black",
                        "title": "Question"
                    },
                    "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([$Question] == '', 'Complete the QA Frequently Asked Questions form below. Select the Category that most closely matches the question or select Other:', 'See Question Below')"
                }
            ]
        }
    ]
}

Documentation: Configure the list form


Update from comments:

You have to use the internal name of column in JSON formatting. So, use [$Title] instead of [$Question] in JSON at all the places. You can get the exact internal name of any of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?

5
  • Thank you for the quick reply. I tried the updated code but the Header text does not change when the Question field has data. I am not sure if the IF field is blank code ("txtContent": "=if([$Question] == '') is working or if something else is causing it to not work properly. Any additional help will be greatly appreciated.
    – Zygon
    Jul 15, 2022 at 14:42
  • Question column is of type "single line of text" right? You can also try the condition like: =if([$Question], 'ms-bgColor-greenDark', 'ms-bgColor-redDark') Jul 15, 2022 at 14:48
  • Yes, it is a single text field. It is the Title field renamed to Question. When I use the above condition the result defaults to the false or the second condition, so if the field is blank or has data it will be red, if I use the original condition (=if([$Question] == '') then it defaults to green for both blank and if there is data.
    – Zygon
    Jul 15, 2022 at 16:05
  • You have to use the internal name of column in JSON formatting. So, use [$Title] instead of [$Question] in JSON at all the places. Jul 15, 2022 at 16:16
  • Ganesh you are a lifesaver, thank you so much. I can't believe I forgot that JSON requires internal field names. Thanks again.
    – Zygon
    Jul 15, 2022 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.