JSON Formatting - IF Statement controls colors of JSON formatted list

%3CLINGO-SUB%20id%3D%22lingo-sub-1843093%22%20slang%3D%22en-US%22%3EJSON%20Formatting%20-%20IF%20Statement%20controls%20colors%20of%20JSON%20formatted%20list%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1843093%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20List%20Library%20with%20a%20Choice%20column.%20I%20want%20the%20background%20color%20of%20each%20item%20in%20my%20JSON%20formatted%20listed%20to%20change%20based%20on%20the%20selection%20from%20that%20Choice%20column%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EChoice%20Column%20title%20%3D%20%22Organization%22%3C%2FP%3E%3CP%3EOrganization%20choices%3A%3C%2FP%3E%3CUL%3E%3CLI%3ECommunity%20Action%3C%2FLI%3E%3CLI%3EMissouri%20Slope%3C%2FLI%3E%3CLI%3EUnited%20Way%3C%2FLI%3E%3C%2FUL%3E%3CP%3ECommunity%20Action%20%3D%20Green%20color%3C%2FP%3E%3CP%3EMissouri%20Slope%20%3D%20Red%20color%3C%2FP%3E%3CP%3EUnited%20Way%20%3D%20Blue%20color%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20the%20Class%20I%20want%20to%20add%20an%20IF%20statement%20to%20change%20the%20background%20color%20based%20on%20what%20%5B%24Organization%5D%20is%20equal%20to%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20two%20lines%20that%20will%20need%20this%20are%3A%3C%2FP%3E%3CP%3E%22class%22%3A%20%22ms-borderColor-greenDark%20ms-bgColor-greenDark%22%3C%2FP%3E%3CP%3E%22class%22%3A%20%22ms-fontColor-greenDark%20ms-borderColor-greenDark%20ms-fontWeight-semibold%20ms-fontSize-l%22%3C%2FP%3E%3CP%3EWhat%20I%20have%20so%20far%20just%20has%20greenDark%20showing%20all%20the%20time.%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20image-alt%3D%22Untitled.png%22%20style%3D%22width%3A%20491px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F230754i30224F870D97434E%2Fimage-dimensions%2F491x135%3Fv%3D1.0%22%20width%3D%22491%22%20height%3D%22135%22%20role%3D%22button%22%20title%3D%22Untitled.png%22%20alt%3D%22Currently%20with%20the%20greenDark%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ECurrently%20with%20the%20greenDark%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20in%20advance%20for%20any%20help!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%2C%0A%20%20%22hideListHeader%22%3A%20true%2C%0A%20%20%22hideSelection%22%3A%20true%2C%0A%20%20%22rowFormatter%22%3A%20%7B%0A%20%20%20%20%22elmType%22%3A%20%22button%22%2C%0A%20%20%20%20%22customRowAction%22%3A%20%7B%0A%20%20%20%20%20%20%22action%22%3A%20%22defaultClick%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%22class%22%3A%20%22ms-bgColor-white%20ms-bgColor-neutralLight--hover%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20%22inline-flex%22%2C%0A%20%20%20%20%20%20%22width%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%22margin%22%3A%20%228px%200%22%2C%0A%20%20%20%20%20%20%22padding%22%3A%200%2C%0A%20%20%20%20%20%20%22border%22%3A%20%22none%22%2C%0A%20%20%20%20%20%20%22cursor%22%3A%20%22pointer%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-borderColor-greenDark%20ms-bgColor-greenDark%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22min-width%22%3A%20%22280px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22border-width%22%3A%20%223px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22border-style%22%3A%20%22solid%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22align-items%22%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22giftbox%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontSize-su%20ms-fontWeight-regular%20%20ms-fontColor-white%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22%5B%24Organization%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex%22%3A%20%22none%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%2212px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding-left%22%3A%20%2218px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20%2242px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-grow%22%3A%20%221%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22left%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22max-width%22%3A%20%22200px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontSize-l%20ms-fontWeight-semibold%20ms-fontColor-white%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22%5B%24Organization%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22margin-right%22%3A%20%2212px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22white-space%22%3A%20%22nowrap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Organization%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontSize-l%20ms-fontWeight-semibold%20ms-fontColor-white%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22%5B%24Title%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22margin-right%22%3A%20%2212px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22white-space%22%3A%20%22nowrap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Title%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontColor-greenDark%20ms-borderColor-greenDark%20ms-fontWeight-semibold%20ms-fontSize-l%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22border-width%22%3A%20%223px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22border-style%22%3A%20%22solid%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22left%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%2221px%2012px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Gift%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20%2224px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22%5B%24Gift%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1847601%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Formatting%20-%20IF%20Statement%20controls%20colors%20of%20JSON%20formatted%20list%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1847601%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F853769%22%20target%3D%22_blank%22%3E%40LandonJochim%3C%2FA%3E%26nbsp%3BYou%20can%20use%20IF%20condition%20for%20class%20something%20like%20below%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%22class%22%3A%20%22%3Dif(%5B%24Organization%5D%3D'Community%20Action'%2C%20'ms-borderColor-greenDark%20ms-bgColor-greenDark'%2C%20if(%5B%24Organization%5D%3D'Missouri%20Slope'%2C%20'%3CSPACE%20separated%3D%22%22%20red-color-classes%3D%22%22%3E'%2C%20if(%5B%24Organization%5D%3D'United%20Way'%2C%20'%3CSPACE%20separated%3D%22%22%20blue-color-classes%3D%22%22%3E'%2C%20'')))%22%3C%2FSPACE%3E%3C%2FSPACE%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhere%20you%20can%20replace%26nbsp%3B%3CSPACE%20separated%3D%22%22%20red-color-classes%3D%22%22%3E%20and%26nbsp%3B%3CSPACE%20separated%3D%22%22%20blue-color-classes%3D%22%22%3E%20with%20the%20class%20names%20as%20per%20your%20requirement.%20you%20can%20add%20multiple%20comma%20separated%20classes%20at%20the%20same%20time.%3C%2FSPACE%3E%3C%2FSPACE%3E%3C%2FP%3E%3CP%3ECheck%20below%20reference%20to%20know%20how%20you%20can%20use%20IF%20condition%20for%20%22class%22%3A%3C%2FP%3E%3CP%3E%3CSTRONG%3EReference%3C%2FSTRONG%3E%3A%26nbsp%3B%3CA%20title%3D%22Use%20column%20formatting%20to%20customize%20SharePoint%22%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EUse%20column%20formatting%20to%20customize%20SharePoint%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%20%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Frequent Visitor

Hello,

 

I have a List Library with a Choice column. I want the background color of each item in my JSON formatted listed to change based on the selection from that Choice column

 

Choice Column title = "Organization"

Organization choices:

  • Community Action
  • Missouri Slope
  • United Way

Community Action = Green color

Missouri Slope = Red color

United Way = Blue color

 

In the Class I want to add an IF statement to change the background color based on what [$Organization] is equal to

 

The two lines that will need this are:

"class": "ms-borderColor-greenDark ms-bgColor-greenDark"

"class": "ms-fontColor-greenDark ms-borderColor-greenDark ms-fontWeight-semibold ms-fontSize-l"

What I have so far just has greenDark showing all the time. 

Currently with the greenDarkCurrently with the greenDark

 

 

 

 

Thanks in advance for any help!

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideListHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "button",
    "customRowAction": {
      "action": "defaultClick"
    },
    "attributes": {
      "class": "ms-bgColor-white ms-bgColor-neutralLight--hover"
    },
    "style": {
      "display": "inline-flex",
      "width": "100%",
      "margin": "8px 0",
      "padding": 0,
      "border": "none",
      "cursor": "pointer"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-borderColor-greenDark ms-bgColor-greenDark"
        },
        "style": {
          "min-width": "280px",
          "display": "flex",
          "border-width": "3px",
          "border-style": "solid",
          "box-sizing": "border-box",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "iconName": "giftbox",
              "class": "ms-fontSize-su ms-fontWeight-regular  ms-fontColor-white",
              "title": "[$Organization]"
            },
            "style": {
              "flex": "none",
              "padding": "12px",
              "padding-left": "18px",
              "height": "42px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "text-align": "left",
              "max-width": "200px"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white",
                  "title": "[$Organization]"
                },
                "style": {
                  "margin-right": "12px",
                  "overflow": "hidden",
                  "white-space": "nowrap"
                },
                "txtContent": "[$Organization]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white",
                  "title": "[$Title]"
                },
                "style": {
                  "margin-right": "12px",
                  "overflow": "hidden",
                  "white-space": "nowrap"
                },
                "txtContent": "[$Title]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-fontColor-greenDark ms-borderColor-greenDark ms-fontWeight-semibold ms-fontSize-l"
        },
        "style": {
          "border-width": "3px",
          "border-style": "solid",
          "box-sizing": "border-box",
          "width": "100%",
          "text-align": "left",
          "padding": "21px 12px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Gift]",
            "style": {
              "height": "24px"
            },
            "attributes": {
              "title": "[$Gift]"
            }
          }
        ]
      }
    ]
  }
}

 

 

1 Reply

@LandonJochim You can use IF condition for class something like below:

 

"class": "=if([$Organization]='Community Action', 'ms-borderColor-greenDark ms-bgColor-greenDark', if([$Organization]='Missouri Slope', '<space separated red-color-classes>', if([$Organization]='United Way', '<space separated blue-color-classes>', '')))"

 

Where you can replace <space separated red-color-classes> and <space separated blue-color-classes> with the class names as per your requirement. you can add multiple comma separated classes at the same time.

Check below reference to know how you can use IF condition for "class":

ReferenceUse column formatting to customize SharePoint 


Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.