SharePoint conditional formatting rule only available for date, how to include time in the rule?
https://sharepoint.stackexchange.com/questions/286801
-
18-02-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'm new to SharePoint. I have a SP list for my schedule. I have overdue column that I would like to change background color based on Datetime column and status. The two column are Deadline and Status. The logic is, if datetime now > Deadline (including time) and status = PENDING, change background color to red. Means that its already overdue. I managed to change the background color to red by using conditional formatting function in the SP online. But it only filter based on date not including the time. I want it to include time as well as my Deadline column is a Datetime column. Any idea on how to do this?
Here is the screenshot of my SP:
As you can see above, the time have not passed yet but the column color already turn red because its only filter the date.
Here is the JSON for the conditional formatting:
{
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "&&",
"operands": [
{
"operator": "<=",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"[$Deadline]"
]
}
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"@now"
]
}
]
}
]
}
]
},
{
"operator": "==",
"operands": [
"[$Status]",
"PENDING"
]
}
]
},
"sp-css-backgroundColor-blockingBackground50",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"COMPLETED"
]
},
"sp-css-backgroundColor-successBackground30",
""
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"line-height": "16px",
"height": "14px"
},
"attributes": {
"iconName": {
"operator": ":",
"operands": [
{
"operator": "&&",
"operands": [
{
"operator": "<=",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"[$Deadline]"
]
}
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"@now"
]
}
]
}
]
}
]
},
{
"operator": "==",
"operands": [
"[$Status]",
"PENDING"
]
}
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"COMPLETED"
]
},
"",
""
]
}
]
}
}
},
{
"elmType": "span",
"style": {
"overflow": "hidden",
"text-overflow": "ellipsis",
"padding": "0 3px"
},
"txtContent": "[$Overdue]",
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "&&",
"operands": [
{
"operator": "<=",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"[$Deadline]"
]
}
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"@now"
]
}
]
}
]
}
]
},
{
"operator": "==",
"operands": [
"[$Status]",
"PENDING"
]
}
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"COMPLETED"
]
},
"",
""
]
}
]
}
}
}
]
}
Solution
The following is working for me (JSON applied to [Overdue]):
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": "=if(@now >[$Deadline] && [$Status]=='PENDING', 'red', 'green')"
}
}
Update for PENDINGs when [Deadline] > @now
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": "=if((@now >[$Deadline] && [$Status]=='PENDING'), 'red', if([$Status]=='COMPLETED', 'green', 'white'))"
}
}
Updated screenshot
