Forum Discussion
Change SharePoint library column JSON to highlight dates in the last 24 hrs to a different colour
I have a SharePoint document library with a "Last Posted Date" column which is updated by a Power Automate flow. I have the "Last Posted Date" column formatted with the JSON below to highlight any files which have been published, but I am trying to figure out how to have files published in the last 24 hours highlighted in DarkGreen instead. I am still new to JSON, so any advice is appreciated.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"[$Last_x0020_Posted_x0020_Date]"
]
}
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
null
]
}
]
}
]
}
]
},
"sp-field-fontSizeSmall",
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont"
]
}
},
"children": [
{
"elmType": "span",
"style": {
"overflow": "hidden",
"text-overflow": "ellipsis",
"padding": "0 3px"
},
"txtContent": "[$Last_x0020_Posted_x0020_Date.displayValue]",
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"[$Last_x0020_Posted_x0020_Date]"
]
}
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
null
]
}
]
}
]
}
]
},
"sp-field-fontSizeSmall",
"sp-field-fontSizeSmall sp-css-color-MintGreenFont"
]
}
}
}
]
}
1 Reply
Try this:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "box-sizing": "border-box", "padding": "0 2px", "overflow": "hidden", "text-overflow": "ellipsis", "background-color": { "operator": "?", "operands": [ { "operator": "<=", "operands": [ { "operator": "-", "operands": [ { "operator": "Number", "operands": [ { "operator": "Date()" } ] }, { "operator": "Number", "operands": [ { "operator": "Date()", "operands": [ "[$Last_x0020_Posted_x0020_Date]" ] } ] } ] }, 86400000 ] }, "darkgreen", // Highlight files posted in the last 24 hours { "operator": "?", "operands": [ { "operator": "!=", "operands": [ "[$Last_x0020_Posted_x0020_Date]", null ] }, "lightgreen", // Highlight files with a valid date "transparent" // Default background for files with no date ] } ] }, "color": "white" }, "children": [ { "elmType": "span", "style": { "overflow": "hidden", "text-overflow": "ellipsis", "padding": "0 3px" }, "txtContent": "[$Last_x0020_Posted_x0020_Date.displayValue]" } ] }
