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? Dec 6, 2020 at 13:44
  • @GaneshSanap its numner datatype
    – Rinu
    Dec 6, 2020 at 17:05

1 Answer 1

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, 2020 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? Dec 7, 2020 at 3:26
  • 1
    Thank you Ganesh, I figured it out with the links provided.
    – Rinu
    Dec 7, 2020 at 4:39
  • Hi Ganesh, Just wondering can we add a text (Bold) below the score based on the condition
    – Rinu
    Dec 7, 2020 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. Dec 7, 2020 at 5:33

Your Answer

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

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