Forum Discussion
How do I change the color of text based on a boolean field in sharepoint
I have the JSON Code below to show the header in my sharepoint contact list and it works fine when you delete "color": "=if([$Fallig], 'Red')" i want the color to be red when the ja/nein(yes/no[Boolean]) field is true. The header donst even show with this line and i dont know why.
{
"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": "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",
"color": "=if([$Fallig], 'Red')"
},
"children": [
{
"elmType": "div",
"txtContent": "='Kontaktinformationen für ' + [$Title]"
}
]
}
]
}
Justmeck Try using the expression like this:
"color": "=if([$Fallig],'Red','')"Where Fallig is the internal name of your SharePoint list Yes/No column. You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?
Please click Mark as Best Response & Like if my post helped you to solve 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.
Justmeck I just tested using this JSON and it works fine with the modifications I suggested above:
{ "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": "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", "color": "=if([$Fallig],'Red','')" }, "children": [ { "elmType": "div", "txtContent": "='Kontaktinformationen für ' + [$Title]" } ] } ] }Output:
Please click Mark as Best Response & Like if my post helped you to solve 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.
- Thank you for the quick response but it dosnt work for me now the header shows but maby it has something to do with the colum because it is a calculated one or it has something to do with the fact that i have sharepoint in german? My calculated colum is =WENN(DATWERT(Erinnerung_fällig_am)<HEUTE();WAHR;FALSCH) so =IF(DATVALUE(Reminder)<TODAY();TRUE;FALSE) or something like that in english
Justmeck It works with calculated Yes/No (boolean) column as well:
Try using correct internal name of your column in the JSON. Alternatively, you can try expression like:
"color": "=if([$Fallig]==true,'red','')"
Please click Mark as Best Response & Like if my post helped you to solve 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.
