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

Harry N Nomikos 1,336 Reputation points
2023-09-14T14:06:14.0666667+00:00

Hi Team

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

  1. 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

Microsoft 365 and Office | SharePoint | For business | Windows
0 comments No comments
{count} votes

Accepted answer
  1. Ling Zhou_MSFT 23,620 Reputation points Microsoft External Staff
    2023-09-21T03:10:38.85+00:00

    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

    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.

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. Ling Zhou_MSFT 23,620 Reputation points Microsoft External Staff
    2023-09-18T07:37:29.2533333+00:00

    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:

    sd

    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.


  2. Ling Zhou_MSFT 23,620 Reputation points Microsoft External Staff
    2023-09-15T02:56:56.2333333+00:00

    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.

    1 person found this answer helpful.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.