change the background color of items updated during a specific period in the gallery view of Lists.

Question

I am a beginner with MS Lists and JSON. I was able to change the background color of all items in the gallery view of Lists using the reference from this page, but I would like to add a condition here to change the background color if an item was updated between "March 7, 2025, and March 14, 2025," or if a new item was added during that same period.

Currently, the background color of all items is set to MistyRose with the following default JSON code.

I have added the red part to the original code.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 379,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"background-color": "MistyRose"
},
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!_x8ab2__x984c_.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$_x8ab2__x984c_]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$_x8ab2__x984c_] == '', '–', [$_x8ab2__x984c_])",
"style": {
"-webkit-line-clamp": "2",
"height": "40px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!_x65e5__x7a0b_.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$_x65e5__x7a0b_.displayValue] == '', '–', [$_x65e5__x7a0b_.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$_x65e5__x7a0b_.displayValue] == '', '–', [$_x65e5__x7a0b_.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!_x671f__x9650_.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$_x671f__x9650_.displayValue] == '', '–', [$_x671f__x9650_.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$_x671f__x9650_.displayValue] == '', '–', [$_x671f__x9650_.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!_x72b6__x614b_.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$_x72b6__x614b_]"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Hirisk.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$Hirisk]"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!_x6a5f__x7a2e_.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$_x6a5f__x7a2e_]"
}
]
}
]
}
]
}
]
}
}

(auto translate from Japanese to English)

Answer 1

Hi @lily66 ,

Thank you for posting in this community.

Calculating time in json can currently only be done using the @now parameter. We can't directly use the expression or code for “March 7, 2025, and March 14, 2025,”.

You can use the following json condition to change the background color:

"style": {
  "background-color": "=if(([$Created] >= @now- (10*86400000) && [$Created] <= @now-(3*86400000)) || ([$Modified] >= @now- (10*86400000) && [$Modified] <= @now-(3*86400000)), 'yellow', 'MistyRose')"
},

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.