SharePoint List Header- JSON coding to change colour of font for free text field, date field and choice field

Question

Hi Team,

I've got 3 columns on my SharePoint list header where I want to change the colour of the font to be a light grey for the values and keep the column name as white. View below coding and I've circled the values I want to change to light grey

Free text field:

JSON Coding:

                    "elmType": "div",
                    "txtContent": "=if ([$Title] == '', 'Initiative Name:', 'Initiative Name: ' + [$Title])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"

Date Field:

JSON Coding:

                    "elmType": "div",
                    "txtContent": "= 'Go Live Date: ' + toLocaleDateString([$GoLiveDate])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"

Choice Field (for any selection, I want the values to be in light grey font:

JSON Coding:

                    "elmType": "div",
                    "txtContent": "=if ([$OriginatingBusinessUnit_x002f_Do] == '', 'Originating Business Unit:', 'Originating Business Unit: ' + [$OriginatingBusinessUnit_x002f_Do])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"

Thanks team

Regards,
Harry

Answer 1

Hi @Harry N Nomikos,

Thank you for posting in this community.

1.Initiative Name

{
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
      },
      "txtContent": "=if ([$Title] == '', 'B&PB-Change and Readiness Tracker (CART)', 'Initiative Name: ')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-gray100 ms-fontWeight-bold ms-fontSize-12"
      },
      "txtContent": "=if ([$Title] == '', '', [$Title])"
    }
  ]
}

2.Go Live Date

{
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "Go Live Date: ",
      "attributes": {
        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
      }
    },
    {
      "elmType": "span",
      "txtContent": "=toLocaleDateString([$GoLiveDate]",
      "attributes": {
        "class": "ms-fontColor-gray100 ms-fontWeight-bold ms-fontSize-12"
      }
    }
  ]
}

3.Originating Business Unit

{
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
      },
      "txtContent": "=if ([$OriginatingBusinessUnit_x002f_Do] == '', 'Originating Business Unit:', 'Originating Business Unit: ')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-gray100 ms-fontWeight-bold ms-fontSize-12"
      },
      "txtContent": "=if ([$OriginatingBusinessUnit_x002f_Do] == '', '', [$OriginatingBusinessUnit_x002f_Do])"
    }
  ]
}

---

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.