SharePoint Online Header-Multi choice fields, coloured values for SharePoint List and inserting underline

Question

SharePoint Online Header-Multi choice fields, coloured values for SharePoint List and inserting underline

Harry N Nomikos 1,336

Hi Team

I need help with 3 scenarios to update my header for a SharePoint List and I'm currently using SharePoint Online.

I have a field by the name of 'Merchant Services' which is a single choice field and can return a value of Unknown, Low, Medium, High & None. I have it included already in my header and I want it to return the text value in a specific colour. Below is my expected colour text result when the field changes and I've provided my current JSON coding I need amended;
Unknown-White text

Low- Green text
Medium- Orange text
High- Red text

None- Blue text

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

2. I have multi-choice field called 'Strategic Alignment' which is included in my Header. For some reason, the values aren't returning in the header. The options are below and I'd also like them to return those text values in specific colours. I've provided the current JSON coding for this section I need amending.
NPS aligned -Aqua text
Risk - Orange text
Regulatory - Purple text
Digitalisation- Light Grey text
AML- Blue text
ECOM - Green text
NICI - Red text

                    "elmType": "div",
                    "txtContent":"=if ([$StrategicAlignment] == '', 'Strategic Alignment', 'Strategic Alignment: ' + [$StrategicAlignment])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-15"

3.I want to be able to underline key headings within my header, whilst keeping my font in a bold format. Can you please look at providing me the specific JSON coding to achieve this. Here's the section within the JSON coding I'd like for it be in bold and underlined.

                    "elmType": "div",
                    "txtContent": "Change Readiness Impacts",
                    "attributes": {
                        "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"

Look forward to your response team,

Regards,
Harry

Accepted answer

2 additional answers

Your answer

Answer 1

Hi@

1.Merchant Services

You can replace the code below:

{
  "elmType": "div",
  "attributes": {
    "class": "ms-fontWeight-bold ms-fontSize-12"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": " ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
      },
      "txtContent": "=if([$MerchantServices] == '', 'Merchant Services', 'Merchant Services: ')"
    },
    {
      "elmType": "span",
      "style": {
        "color": "=if([$MerchantServices] =='Low','#008000',if([$MerchantServices] =='Medium','#ffa500',if([$MerchantServices] =='High','#ff0000 ',if([$MerchantServices] =='None','#0000ff',''))))"
      },
      "txtContent": "=if([$MerchantServices] == '', '', [$MerchantServices])"
    }
  ]
}

2.Strategic Alignment

Here I may have misunderstood that you are using view formatting, and you are using header formatting. I re-tested your header formatting on my end. Unfortunately, there seems to be no support for displaying multi-option content in this header formatting (In view formatting is applicable), single-option content is displayed normally. This seems to be designed by SharePoint Online and there is no way for us to change it at the moment.

You can send feedback to SharePoint about this issue and maybe this can be fixed afterwards.

Please accept my sincerely apologizes for any inconvenience this may cause. Thank you for your kind understanding!

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

Ling Zhou_MSFT 23,620 Microsoft External Staff

Hi @Harry N Nomikos,

Apologize for the late reply.

1.Merchant Services Column:

You can replace the code below:

{
  "elmType": "div",
  "attributes": {
    "class": "ms-fontWeight-bold ms-fontSize-12"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": " ms-fontColor-white"
      },
      "txtContent": "=if([$MerchantServices] == '', 'Merchant Services', 'Merchant Services: ')"
    },
    {
      "elmType": "span",
      "style": {
        "color": "=if([$MerchantServices] =='Low','#008000',if([$MerchantServices] =='Medium','#ffa500',if([$MerchantServices] =='High','#ff0000 ',if([$MerchantServices] =='None','#0000ff',''))))"
      },
      "txtContent": "=if([$MerchantServices] == '', '', [$MerchantServices])"
    }
  ]
}

If the color of the font is not what you expect, you can modify the color value after each condition in the style->color style above.

This is the color of all the options in the column:

User's image

2.Strategic Alignment Column

You can replace the code below:

{
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-15"
      },
      "txtContent": "=if ([$StrategicAlignment] == '', 'Strategic Alignment', 'Strategic Alignment: ')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#bcd4e6"
      },
      "txtContent": "=if(indexOf([$StrategicAlignment],'NPS aligned') != -1,'NPS aligned ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#ffa500"
      },
      "txtContent": "=if(indexOf([$StrategicAlignment],'Risk') != -1,'Risk ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#800080"
      },
      "txtContent": "=if(indexOf([$StrategicAlignment],'Regulatory') != -1,'Regulatory ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#d3d3d3"
      },
      "txtContent": "=if(indexOf([$StrategicAlignment],'Digitalisation') != -1,'Digitalisation ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#0000ff"
      },
      "txtContent": "=if(indexOf([$StrategicAlignment],'AML') != -1,'AML ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#008000"
      },
      "txtContent": "=if(indexOf([$StrategicAlignment],'ECOM') != -1,'ECOM ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#ff0000"
      },
      "txtContent": "=if(indexOf([$StrategicAlignment],'NICI') != -1,'NICI ','')"
    }
  ]
}

The column I'm testing according to your description is a multiple-choice selection column.

User's image

You can see the effect of my selecting all and none:

I will explain how I determine if an option is selected or not:

"txtContent": "=if(indexOf([$StrategicAlignment],'ECOM') != -1,'ECOM ','')"

The indexOf() method looks for the starting position of the string for a particular option in the values of the column and returns -1 if it is not found. So, if the returned value is not -1, the option is selected and the text of the option is displayed, otherwise no text is displayed.

Since I can't reproduce your situation exactly, some JSON shows up well for me but doesn't use your situation. I apologize for the inconvenience. If there is any other assistance I can provide, please feel free to let me know, we will do our best to help you.

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.

Harry N Nomikos 1,336

Hi Ling Zhou_MSFT

I'm getting a Expected comma or closing bracketjson(517) error when copying your JSON coding above. Can you please review and I've provided the number range off both codes so you can quickly review and amend of where I've added your code in.

101-180 is for the Strategic Alignment code
254-273 is the Merchant Services code

{
    "debugmode": "true",
    "elmType": "div",
    "attributes": {
        "class": "ms-bgColor-black"
    },
    "style": {
        "width": "100%",
        "border-top-width": "0px",
        "border-bottom-width": "0px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "img",
                    "style": {
                        "width": "150px"
                    },
                    "attributes": {
                        "src": ""
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "6px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "Change Summary",
                    "attributes": {
                        "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"
                    },
                    "style": {
                        "text-decoration": "underline"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$Title] == '', 'B&PB-Change and Readiness Tracker (CART)', 'Initiative Name: ' + [$Title])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$Initiativename_x002a_] == '', 'GRACE ID', 'GRACE ID: ' + [$Initiativename_x002a_])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$ChangeStatus] == '', 'Change Status', 'Change Status: ' + [$ChangeStatus])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "= 'Go Live Date: ' + toLocaleDateString([$GoLiveDate])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "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)))"
                        }
                    ]
                },
                    {
                        "elmType": "div",
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-15"
                            },
                            "txtContent": "=if ([$StrategicAlignment] == '', 'Strategic Alignment', 'Strategic Alignment: ')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#bcd4e6"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'NPS aligned') != -1,'NPS aligned ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#ffa500"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'Risk') != -1,'Risk ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#800080"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'Regulatory') != -1,'Regulatory ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#d3d3d3"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'Digitalisation') != -1,'Digitalisation ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#0000ff"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'AML') != -1,'AML ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#008000"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'ECOM') != -1,'ECOM ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#ff0000"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'NICI') != -1,'NICI ','')"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$PrimaryContact_x002f_ProjectLead0] == '', 'Primary Contact', 'Primary Contact: ' + [$PrimaryContact_x002f_ProjectLead0])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "Middle",
                "padding": "6px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "Change Readiness Impacts",
                    "attributes": {
                        "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"
                    },
                    "style": {
                        "text-decoration": "underline"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BusinessMetro_x002d__x0028_HIERA] == '', 'Business Metro', 'Business Metro: ' + [$BusinessMetro_x002d__x0028_HIERA])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$RegionalAgri] == '', 'Regional & Agri', 'Regional & Agri: ' + [$RegionalAgri])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BDSB] == '', 'BDSB', 'BDSB: ' + [$BDSB])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$PrivateWealth] == '', 'Private Wealth', 'Private Wealth: ' + [$PrivateWealth])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BusinessLending] == '', 'Business Lending', 'Business Lending: ' + [$BusinessLending])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BusinessEverydayBanking] == '', 'Business Everyday Banking', 'Business Everyday Banking: ' + [$BusinessEverydayBanking])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-fontWeight-bold ms-fontSize-12"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "class": " ms-fontColor-white"
                        },
                        "txtContent": "=if([$MerchantServices] == '', 'Merchant Services', 'Merchant Services: ')"
                      },
                      {
                        "elmType": "span",
                        "style": {
                          "color": "=if([$MerchantServices] =='Low','#008000',if([$MerchantServices] =='Medium','#ffa500',if([$MerchantServices] =='High','#ff0000 ',if([$MerchantServices] =='None','#0000ff',''))))"
                        },
                        "txtContent": "=if([$MerchantServices] == '', '', [$MerchantServices])"
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "6px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "box-sizing": "border-box",
                        "width": "100%",
                        "text-align": "Right",
                        "padding": "6px 12px",
                        "overflow": "hidden"
                    },
                    "children": [
                        {
                            "elmType": "a",
                            "txtContent": "GRACE",
                            "attributes": {
                                "href": "='' + [$Email]",
                                "class": "ms-fontColor-white ms-fontSize-16"
                            }
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "box-sizing": "border-box",
                        "width": "100%",
                        "text-align": "Right",
                        "padding": "6px 12px",
                        "overflow": "hidden"
                    },
                    "children": [
                        {
                            "elmType": "a",
                            "txtContent": "B&PB Change Hub",
                            "attributes": {
                                "href": "='' + [$Email]",
                                "class": "ms-fontColor-white ms-fontSize-16"
                            }
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "box-sizing": "border-box",
                        "width": "100%",
                        "text-align": "Right",
                        "padding": "6px 12px",
                        "overflow": "hidden"
                    },
                    "children": [
                        {
                            "elmType": "a",
                            "txtContent": "Workforce Planning Form",
                            "attributes": {
                                "href": "='' + [$Email]",
                                "class": "ms-fontColor-white ms-fontSize-16"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

Regards,
Harry

Ling Zhou_MSFT 23,620 Microsoft External Staff

Hi @Harry N Nomikos,

I checked your JSON and added the missing right brackets. You can copy the code below.

{
  "debugmode": "true",
  "elmType": "div",
  "attributes": {
    "class": "ms-bgColor-black"
  },
  "style": {
    "width": "100%",
    "border-top-width": "0px",
    "border-bottom-width": "0px",
    "border-left-width": "0px",
    "border-right-width": "0px",
    "border-style": "solid",
    "margin-bottom": "16px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "box-sizing": "border-box",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "img",
          "style": {
            "width": "150px"
          },
          "attributes": {
            "src": ""
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "width": "100%",
        "text-align": "left",
        "padding": "6px 12px",
        "overflow": "hidden"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Change Summary",
          "attributes": {
            "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"
          },
          "style": {
            "text-decoration": "underline"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$Title] == '', 'B&PB-Change and Readiness Tracker (CART)', 'Initiative Name: ' + [$Title])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$Initiativename_x002a_] == '', 'GRACE ID', 'GRACE ID: ' + [$Initiativename_x002a_])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$ChangeStatus] == '', 'Change Status', 'Change Status: ' + [$ChangeStatus])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "= 'Go Live Date: ' + toLocaleDateString([$GoLiveDate])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "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)))"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-15"
              },
              "txtContent": "=if ([$StrategicAlignment] == '', 'Strategic Alignment', 'Strategic Alignment: ')"
            },
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-15"
              },
              "style": {
                "color": "#bcd4e6"
              },
              "txtContent": "=if(indexOf([$StrategicAlignment],'NPS aligned') != -1,'NPS aligned ','')"
            },
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-15"
              },
              "style": {
                "color": "#ffa500"
              },
              "txtContent": "=if(indexOf([$StrategicAlignment],'Risk') != -1,'Risk ','')"
            },
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-15"
              },
              "style": {
                "color": "#800080"
              },
              "txtContent": "=if(indexOf([$StrategicAlignment],'Regulatory') != -1,'Regulatory ','')"
            },
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-15"
              },
              "style": {
                "color": "#d3d3d3"
              },
              "txtContent": "=if(indexOf([$StrategicAlignment],'Digitalisation') != -1,'Digitalisation ','')"
            },
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-15"
              },
              "style": {
                "color": "#0000ff"
              },
              "txtContent": "=if(indexOf([$StrategicAlignment],'AML') != -1,'AML ','')"
            },
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-15"
              },
              "style": {
                "color": "#008000"
              },
              "txtContent": "=if(indexOf([$StrategicAlignment],'ECOM') != -1,'ECOM ','')"
            },
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-15"
              },
              "style": {
                "color": "#ff0000"
              },
              "txtContent": "=if(indexOf([$StrategicAlignment],'NICI') != -1,'NICI ','')"
            }
          ]
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$PrimaryContact_x002f_ProjectLead0] == '', 'Primary Contact', 'Primary Contact: ' + [$PrimaryContact_x002f_ProjectLead0])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "width": "100%",
        "text-align": "Middle",
        "padding": "6px 12px",
        "overflow": "hidden"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "Change Readiness Impacts",
          "attributes": {
            "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"
          },
          "style": {
            "text-decoration": "underline"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$BusinessMetro_x002d__x0028_HIERA] == '', 'Business Metro', 'Business Metro: ' + [$BusinessMetro_x002d__x0028_HIERA])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$RegionalAgri] == '', 'Regional & Agri', 'Regional & Agri: ' + [$RegionalAgri])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$BDSB] == '', 'BDSB', 'BDSB: ' + [$BDSB])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$PrivateWealth] == '', 'Private Wealth', 'Private Wealth: ' + [$PrivateWealth])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$BusinessLending] == '', 'Business Lending', 'Business Lending: ' + [$BusinessLending])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if ([$BusinessEverydayBanking] == '', 'Business Everyday Banking', 'Business Everyday Banking: ' + [$BusinessEverydayBanking])",
          "attributes": {
            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
          }
        },
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-fontWeight-bold ms-fontSize-12"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "class": " ms-fontColor-white"
              },
              "txtContent": "=if([$MerchantServices] == '', 'Merchant Services', 'Merchant Services: ')"
            },
            {
              "elmType": "span",
              "style": {
                "color": "=if([$MerchantServices] =='Low','#008000',if([$MerchantServices] =='Medium','#ffa500',if([$MerchantServices] =='High','#ff0000 ',if([$MerchantServices] =='None','#0000ff',''))))"
              },
              "txtContent": "=if([$MerchantServices] == '', '', [$MerchantServices])"
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "box-sizing": "border-box",
            "width": "100%",
            "text-align": "left",
            "padding": "6px 12px",
            "overflow": "hidden"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "Right",
                "padding": "6px 12px",
                "overflow": "hidden"
              },
              "children": [
                {
                  "elmType": "a",
                  "txtContent": "GRACE",
                  "attributes": {
                    "href": "='' + [$Email]",
                    "class": "ms-fontColor-white ms-fontSize-16"
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "Right",
                "padding": "6px 12px",
                "overflow": "hidden"
              },
              "children": [
                {
                  "elmType": "a",
                  "txtContent": "B&PB Change Hub",
                  "attributes": {
                    "href": "='' + [$Email]",
                    "class": "ms-fontColor-white ms-fontSize-16"
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "Right",
                "padding": "6px 12px",
                "overflow": "hidden"
              },
              "children": [
                {
                  "elmType": "a",
                  "txtContent": "Workforce Planning Form",
                  "attributes": {
                    "href": "='' + [$Email]",
                    "class": "ms-fontColor-white ms-fontSize-16"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Harry N Nomikos 1,336 Reputation points

2023-09-19T02:02:08.8466667+00:00

Hi Ling Zhou_MSFT

I've copied in the above coding and I'm still getting the issue with Merchant Services not showing the impact rating in colour (the below should show High in red) & Strategic Alignment is not returning any values. Would the JSON coding in this section throw out the JSON coding in the Header?

Also it's thrown out the display where the three columns are not even;

The display in the columns should be even such as the below

Look forward to your response.

Cheers
Harry
Ling Zhou_MSFT 23,620 Reputation points Microsoft External Staff

2023-09-19T08:37:57.0933333+00:00

Hi @Harry N Nomikos,

You should go to your view -> Format current view -> Advanced mode to add your view formatting JSON.

Since I don't know your complete JSON code, it's hard for me to pinpoint where your problem is occurring. I would suggest that you restore your JSON to the version you started with, then find where Merchant Services columns and Strategic Alignment columns are to be added and copy the code from my second answer over.

Harry N Nomikos 1,336

Hi Ling Zhou_MSFT

I've managed to revert the JSON coding back to answer 2 and Merchant Services colour values are now working. Seems the column name was spelt incorrectly, but the column name should be white with the values from the column in a different colour. I'll provide you with the complete JSON coding below and If you can update this, where it doesn't move any column names around, it'll be greatly appreciated User's image

Also, I'm updating the JSON coding for the header of my SharePoint list form, when editing a list item, as shown below. Not sure if this is throwing out the Strategic Alignment values because you've updated this in a different section?

User's image

{
    "debugmode": "true",
    "elmType": "div",
    "attributes": {
        "class": "ms-bgColor-black"
    },
    "style": {
        "width": "100%",
        "border-top-width": "0px",
        "border-bottom-width": "0px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "img",
                    "style": {
                        "width": "150px"
                    },
                    "attributes": {
                        "src": ""
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "6px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "Change Summary",
                    "attributes": {
                        "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"
                    },
                    "style": {
                        "text-decoration": "underline"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$Title] == '', 'B&PB-Change and Readiness Tracker (CART)', 'Initiative Name: ' + [$Title])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$Initiativename_x002a_] == '', 'GRACE ID', 'GRACE ID: ' + [$Initiativename_x002a_])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$ChangeStatus] == '', 'Change Status', 'Change Status: ' + [$ChangeStatus])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "= 'Go Live Date: ' + toLocaleDateString([$GoLiveDate])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "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)))"
                        }
                    ]
                },
                    {
                        "elmType": "div",
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                            },
                            "txtContent": "=if ([$StrategicAlignment] == '', 'Strategic Alignment', 'Strategic Alignment: ')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#bcd4e6"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'NPS aligned') != -1,'NPS aligned ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#ffa500"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'Risk') != -1,'Risk ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#800080"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'Regulatory') != -1,'Regulatory ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#d3d3d3"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'Digitalisation') != -1,'Digitalisation ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#0000ff"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'AML') != -1,'AML ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#008000"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'ECOM') != -1,'ECOM ','')"
                          },
                          {
                            "elmType": "span",
                            "attributes": {
                              "class": "ms-fontWeight-bold ms-fontSize-15"
                            },
                            "style": {
                              "color": "#ff0000"
                            },
                            "txtContent": "=if(indexOf([$StrategicAlignment],'NICI') != -1,'NICI ','')"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$PrimaryContact_x002f_ProjectLead0] == '', 'Primary Contact', 'Primary Contact: ' + [$PrimaryContact_x002f_ProjectLead0])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "Middle",
                "padding": "6px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "Change Readiness Impacts",
                    "attributes": {
                        "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"
                    },
                    "style": {
                        "text-decoration": "underline"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BusinessMetro_x002d__x0028_HIERA] == '', 'Business Metro', 'Business Metro: ' + [$BusinessMetro_x002d__x0028_HIERA])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$RegionalAgri] == '', 'Regional & Agri', 'Regional & Agri: ' + [$RegionalAgri])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BDSB] == '', 'BDSB', 'BDSB: ' + [$BDSB])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$PrivateWealth] == '', 'Private Wealth', 'Private Wealth: ' + [$PrivateWealth])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BusinessLending] == '', 'Business Lending', 'Business Lending: ' + [$BusinessLending])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$BusinessEverydayBanking] == '', 'Business Everyday Banking', 'Business Everyday Banking: ' + [$BusinessEverydayBanking])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "=if ([$Merchant_x0020_Services] == '', 'Merchant Services', 'Merchant Services: ' + [$Merchant_x0020_Services])",
                    "attributes": {
                        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-12"
                    },
                    "style": {
                        "color": "=if([$Merchant_x0020_Services] =='Low','#008000',if([$Merchant_x0020_Services] =='Medium','#ffa500',if([$Merchant_x0020_Services] =='High','#ff0000 ',if([$Merchant_x0020_Services] =='None','#0000ff',''))))"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "6px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "box-sizing": "border-box",
                        "width": "100%",
                        "text-align": "Right",
                        "padding": "6px 12px",
                        "overflow": "hidden"
                    },
                    "children": [
                        {
                            "elmType": "a",
                            "txtContent": "GRACE",
                            "attributes": {
                                "href": "='' + [$Email]",
                                "class": "ms-fontColor-white ms-fontSize-16"
                            }
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "box-sizing": "border-box",
                        "width": "100%",
                        "text-align": "Right",
                        "padding": "6px 12px",
                        "overflow": "hidden"
                    },
                    "children": [
                        {
                            "elmType": "a",
                            "txtContent": "B&PB Change Hub",
                            "attributes": {
                                "href": "='' + [$Email]",
                                "class": "ms-fontColor-white ms-fontSize-16"
                            }
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "box-sizing": "border-box",
                        "width": "100%",
                        "text-align": "Right",
                        "padding": "6px 12px",
                        "overflow": "hidden"
                    },
                    "children": [
                        {
                            "elmType": "a",
                            "txtContent": "Workforce Planning Form",
                            "attributes": {
                                "href": "='' + [$Email]",
                                "class": "ms-fontColor-white ms-fontSize-16"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

Harry N Nomikos 1,336 Reputation points

2023-09-19T12:52:29.1866667+00:00

......

Answer 3

Hi @Harry N Nomikos,

Thank you for posting in this community.

For your question, I use style to determine the color of your font and add underlining. If the font color is not what you expect, you can change the color value.

1.Merchant Services Column:

You can replace the code below:

{
  "elmType": "div",
  "attributes": {
    "class": "ms-fontWeight-bold ms-fontSize-12"
  },
  "style": {
    "color": "=if([$MerchantServices] =='Low','#008000',if([$MerchantServices] =='Medium','#ffa500',if([$MerchantServices] =='High','#ff0000 ',if([$MerchantServices] =='None','#0000ff',''))))"
  },
  "txtContent": "=if([$MerchantServices] == '', 'Merchant Services', 'Merchant Services: ' + [$MerchantServices])"
}

2.Strategic Alignment Column

You can replace the code below:

{
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-15"
      },
      "txtContent": "=if ([$StrategicAlignment] == '', 'Strategic Alignment', 'Strategic Alignment: ')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#bcd4e6"
      },
      "txtContent": "=if(indexOf(join([$StrategicAlignment],''),'NPS aligned') != -1,'NPS aligned ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#ffa500"
      },
      "txtContent": "=if(indexOf(join([$StrategicAlignment],''),'Risk') != -1,'Risk ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#800080"
      },
      "txtContent": "=if(indexOf(join([$StrategicAlignment],''),'Regulatory') != -1,'Regulatory ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#d3d3d3"
      },
      "txtContent": "=if(indexOf(join([$StrategicAlignment],''),'Digitalisation') != -1,'Digitalisation ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#0000ff"
      },
      "txtContent": "=if(indexOf(join([$StrategicAlignment],''),'AML') != -1,'AML','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#008000"
      },
      "txtContent": "=if(indexOf(join([$StrategicAlignment],''),'ECOM') != -1,'ECOM ','')"
    },
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-15"
      },
      "style": {
        "color": "#ff0000"
      },
      "txtContent": "=if(indexOf(join([$StrategicAlignment],''),'NICI') != -1,'NICI ','')"
    }
  ]
}

3.underline

You can replace the code below:

{
  "elmType": "div",
  "txtContent": "Change Readiness Impacts",
  "attributes": {
    "class": "ms-fontColor-red ms-fontWeight-bold ms-fontSize-17"
  },
  "style": {
    "text-decoration": "underline"
  }
}

Here is the test result in my side:

User's image

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.

Harry N Nomikos 1,336 Reputation points

2023-09-15T11:57:44.0733333+00:00

Hi @Ling Zhou_MSFT

Thanks for your response.

I've copied the coding you've provided for scenario 1 & 2 and it seems to not show on my header as my expected result. My header has a black back ground, so I'm not sure if the JSON coding has to be amended? Please see below screen shot

As you can see, nothing has come up under Strategic Alignment section and Merchant Services has been greyed out all together and I can't see the 'High' impact rating in red text.. The column names should be white with the values from the column in a different colour based on my initial request.

I look forward to your response.
Regards,
Harry

Share via

SharePoint Online Header-Multi choice fields, coloured values for SharePoint List and inserting underline

2 additional answers

Your answer