1

In Sharepoint online list - Configure Layout, I want to change the Title color based on selection of choice type column "Category".

Sharing the current code below:

{
    "elmType": "div",
    "attributes": {
        "class": " ms-fontColor-themePrimary"
    },
    "style": {
        "display": "flex",
        "justify-content": "left",
        "font-size": "24px",
        "border-radius": "10px 10px 0 0",
        "padding": "8px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "justify-content": "space-between",
                "border-radius": "10px 10px 0 0",
                "padding": "8px",
                "font-size": "24px"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Group",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "=if([$Category] == 'ABC', 'ms-fontColor-BgMintGreen'"
            },
            "style": {
                "font-weight": "bold",
                "padding": "18px 13px",
                "overflow": "hidden"
            }
        },
        {
            "elmType": "div",
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=' Details - ' + [$Title]",
                    "style": {
                        "font-weight": "bold",
                        "padding": "18px 11px",
                        "overflow": "hidden"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "[$Category]",
                    "style": {
                        "text-align": "center",
                        "display": "flex",
                        "padding": "4px 14px",
                        "font-size": "10px"
                    }
                }
            ]
        }
    ]
}

1 Answer 1

0

To change the color of title text, you can use color attribute like:

"color": "=if([$Category] == 'ABC', 'green', if([$Category] == 'XYZ', 'red', 'black'))"

Here's the complete JSON:

{
  "elmType": "div",
  "attributes": {
    "class": " ms-fontColor-themePrimary"
  },
  "style": {
    "display": "flex",
    "justify-content": "left",
    "font-size": "24px",
    "border-radius": "10px 10px 0 0",
    "padding": "8px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "justify-content": "space-between",
        "border-radius": "10px 10px 0 0",
        "padding": "8px",
        "font-size": "24px"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "iconName": "Group",
            "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
            "title": "Details"
          },
          "style": {
            "flex": "none",
            "padding": "0px",
            "padding-left": "0px",
            "height": "36px"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "txtContent": "=' Details - ' + [$Title]",
          "style": {
            "font-weight": "bold",
            "padding": "18px 11px",
            "overflow": "hidden",
            "color": "=if([$Category] == 'ABC', 'green', if([$Category] == 'XYZ', 'red', 'black'))"
          }
        },
        {
          "elmType": "div",
          "txtContent": "[$Category]",
          "style": {
            "text-align": "center",
            "display": "flex",
            "padding": "4px 14px",
            "font-size": "10px"
          }
        }
      ]
    }
  ]
}

Output:

enter image description here

2
  • 1
    Thank you so much, using the above suggested color attribute solved my code issue. Appreciate your help. Mar 23, 2022 at 19:11
  • 1
    Great, glad it worked for you. Please Upvote(^) and accept as an Answer as it helped you & it will help others with similar question in future to find the correct answer easily. Mar 24, 2022 at 4:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.