Forum Discussion
SharePoint List Form Header
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
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 Replies
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.
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
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.
- Too big of an ask? Anybody got the time to help?
Thanks
