0

I have created formatted the list as a gallery. using two columns such as created by and score.

I was wondering if there are any way to do change the background color based on the score achieved. For example if the score is less than 25 its red, less than 50 to 25 its blue, and less than 75 yellow and above 75 its green.

please see the code below.

    // JavaScript source code
{
  "height": 98,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Author]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Author]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Author]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Author]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Author]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Author]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Author]) == 1, '', 'none')"
                    },
                    "txtContent": "[$Author.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "=if ([$Score.displayValue] == '', '–', [$Score.displayValue])",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Score.displayValue] == '', '–', [$Score.displayValue])"
              }
            ]
          }
        ]
      }
    ]
  }
}
2
  • What is the data type of your "Score" column? Number or anything else? – Ganesh Sanap Dec 6 '20 at 13:44
  • @GaneshSanap its numner datatype – Rinu Dec 6 '20 at 17:05
1

You can change the background-color based on value of [$Score] like below:

"background-color": "=if([$Score] < 25, 'red', if([$Score] > 25 && [$Score] < 50, 'blue', if([$Score] > 50 && [$Score] < 75, 'yellow', if([$Score] > 75, 'green', '' ))))"

Add this to style property of element where you want to apply background color.

Microsoft documentations:

  1. Use column formatting to customize SharePoint
  2. Use view formatting to customize SharePoint
7
  • Thanks Ganesh, can you show me the full code as i cant get it to work – Rinu Dec 6 '20 at 18:24
  • I don't have full code. But I can help you with your code. Where do you want to apply background color? To complete card or any specific button/span/div/p in your code? – Ganesh Sanap Dec 7 '20 at 3:26
  • 1
    Thank you Ganesh, I figured it out with the links provided. – Rinu Dec 7 '20 at 4:39
  • Hi Ganesh, Just wondering can we add a text (Bold) below the score based on the condition – Rinu Dec 7 '20 at 5:27
  • 1
    Sure, you can. you can add p or span element. set its txtContent property to the text you want to show and apply CSS like font-weight: bold inside its style property. – Ganesh Sanap Dec 7 '20 at 5:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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