SharePoint List Header-Conditional Formatting ( Colour Coding) a date field

Question

Hi Team

I have a "Days till Go Live" field in my SharePoint list header that counts how many days are left before it goes live and I was after a formula to colour code the number value based on the below conditions.

If Days till Go Live is 10 days from @now will highlight RED

If Days till Go Live is 20 Days from @now will highlight Orange

If Days till Go Live is 90 Days From @now will highlight Green

Below is my JSON coding that I need amending.

                    "elmType": "div",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    },
                    "children": [
                        {
                            "elmType": "span",
                            "txtContent": "=if (Number([$GoLiveDate]) == 0, 'Days till Go Live', 'Days till Go Live: ')"
                        },
                        {
                            "elmType": "span",
                            "txtContent": "=if (Number([$GoLiveDate]) == 0, '',floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24)))"

Regards,
Harry

Answer 1

Hi @Harry N Nomikos,

I am using header JSON formatting here.

Please replace the code in your Days till Go Live section with the following JSON:

{
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
      },
      "txtContent": "=if (Number([$GoLiveDate]) == 0, 'Days till Go Live', 'Days till Go Live:')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "=if((floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24)))<= 10 &&(floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24)))>=1 ,'ms-fontColor-red ms-fontWeight-bold ms-fontSize-12',if((floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24)))<=30,'ms-fontColor-orangeLighter ms-fontWeight-bold ms-fontSize-12','ms-fontColor-greenLight ms-fontWeight-bold ms-fontSize-12'))"
      },
      "txtContent": "=if (Number([$GoLiveDate]) == 0, '',floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24)))"
    }
  ]
}

Here is the result in my side:

---

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.

Answer 2

Hi @Harry N Nomikos,

Thank you for posting in this community.

Please replace the code in your Days till Go Live section with the following JSON:

{
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
      },
      "txtContent": "=if (Number([$GoLiveDate]) == 0, 'Days till Go Live', 'Days till Go Live:')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "=if((floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24))) == 10,'ms-fontColor-red ms-fontWeight-bold ms-fontSize-12',if((floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24))) == 20,'ms-fontColor-orangeLighter ms-fontWeight-bold ms-fontSize-12',if((floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24))) == 90,'ms-fontColor-greenLight ms-fontWeight-bold ms-fontSize-12','ms-fontColor-white ms-fontWeight-bold ms-fontSize-12')))"
      },
      "txtContent": "=if (Number([$GoLiveDate]) == 0, '',floor((Number([$GoLiveDate])-Number(@now))/(1000*60*60*24)))"
    }
  ]
}

Here is the test result in my side:

---

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.