SharePoint List Form Header

[SG523]

I have a modern site with a list. I have tried piecing together a form header for this list and most of it works as I need it to but one part is not working and I'm sure it's due to my Json piecework. I'm wondering if someone can see why this part is not working?

"children": [
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"iconName": "=if([$Closed] == 'yes','boxcheckmarksolid','boxmultiplysolid')",
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
"title": "Details"
},
"debugMode": true,
"txtContent": "@currentField",
"style": {
"flex": "none",
"padding": "0px",
"padding-left": "10px",
"padding-top": "20px",
"height": "40px",
"visibility": "=if([$Title]=='','hidden','visible'",
"color": "=if([$Closed] == 'true', 'green', 'red')"
}
},
{
"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 5px",
"overflow": "hidden",
"color": "white",
"visibility": "=if([$Title]=='','hidden','visible'"
},
"children": [
{
"elmType": "div",
"txtContent": "Closed"
}
]
}
]
},

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "15px",
        "background-color": "RGBA(0,95,131,1)"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "tagsolid",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "10px",
                        "height": "40px",
                        "color": "white"
                    }
                }
            ]
        },
        {
            "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",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$Title]=='','New','Reject Tag Database - Tag #' + [$Title])"
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "left"
            },
            "children": [
                {
                    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
                    "elmType": "div",
                    "attributes": {
                        "iconName": "=if([$Closed] == 'yes','boxcheckmarksolid','boxmultiplysolid')",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "debugMode": true,
                    "txtContent": "@currentField",
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "10px",
                        "padding-top": "20px",
                        "height": "40px",
                        "visibility": "=if([$Title]=='','hidden','visible'",
                        "color": "=if([$Closed] == 'true', 'green', 'red')"
                    }
                },
                {
                    "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 5px",
                        "overflow": "hidden",
                        "color": "white",
                        "visibility": "=if([$Title]=='','hidden','visible'"
                    },
                    "children": [
                        {
                            "elmType": "div",
                            "txtContent": "Closed"
                        }
                    ]
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "right",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$Title]=='','','Part Number : '+[$PartNumber])"
                },
                {
                    "elmType": "div",
                    "txtContent": "=if([$Title]=='','','Tag Quantity : '+[$Quantity])"
                }
            ]
        }
    ]
}

This is supposed to put a red box if closed is no, a green checkbox if closed is yes and hidden if Title is empty.

Thanks

[#2]

Too big of an ask? Anybody got the time to help?

Thanks

[#3]

@SG523 There may not be enough detail for a complete answer, but I can see one issue. If Closed is a Yes/No field (Boolean), the conditional formats would look like this

"iconName": "=if([$Closed],'boxcheckmarksolid','boxmultiplysolid')"

"color": "=if([$Closed], 'green', 'red')"

You can also use [$Closed] == true

Hope this helps.

Please click Mark as Best Response & Like if my post helped you to answer or resolve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#4]

@Don Kirkham 

I changed it to this and it still does not work. Closed is Boolean.

"iconName": "=if([$Closed] ,'boxcheckmarksolid','boxmultiplysolid')"

How can I help get an answer to solve this? I need this header when not new. Except the box will change from red X to green check when the tag is closed.

And this for a new tag.

It would be nice to also have an image/logo to the left of everything as well.

Thanks

[#5]

A little more on this. I tried to just display the information form the Closed column and it just returns blank. This might point as to why I am not able to make the box change. Reminder that the Closed column is a calculated column with an output of boolean.

"children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$Title]=='','New','Closed: '+[$Closed])"
                }
            ]
        },

should return Closed: Yes or True but instead I only get this.

[#6]

@SG523 This worked for me.

"iconName": "=if([$Closed],'BoxCheckmarkSolid','BoxMultiplySolid')",

"color": "=if([$Closed], 'green', 'red')"

I don't understand the last line "It would be nice to also have an image/logo to the left of everything as well."

Please click Mark as Best Response & Like if my post helped you to answer or resolve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#7 · Accepted solution]

@SG523 Disregard my last answer. The fact that [$Closed] is a calculated column changes everything. Calculated columns are not available in custom form formatting since they are only calculated when the record is saved.

To make this work, you need to use the formula that is used in the calculated column in the formatting json. For example, if the [$Closed] column calculation is

IF([Status] = "Closed", "Yes","No")

Then use the same formula in the formatting json like this

"iconName": "=if([$Status]=='Closed','BoxCheckmarkSolid','BoxMultiplySolid')",

Hopefully this will fix the problem!

Please click Mark as Best Response & Like if my post helped you to answer or resolve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#8]

@Don Kirkham 

This was the problem! Sorry I didn't include the calculated column info right off the bat. That was my fault. Thank you for the great explanation of why as well.

As for the Logo, I'm not sure how to add an image in the header and I would like to put one in there on the left side of the header. I have the image I want saved to my Site Assets on the same SP site but I have no idea what the Json would look like to include an image from my SP site assets. Can you help with that?

[#9]

@SG523 I can help you place a logo in the header. It will help me if you create a new request for that. Feel free to tag me in the request so I can easily reply.