Formatting list row background color

Question

I am trying to change the background color of rows in my SharePoint (365) list based on values in a column. I am aware you can use additionalRowClass in the JSON formatting pane to alter a row based on a column, however this then relies on exsiting classes and the background color defined in the classes. I what to be able to define my own custom colors.

This question Formatting list row based on status column Office365 indicates it is possible using rowFormatter in JSON but I have not found clear examples of how you might use it to alter just the background color of the list. The samples https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples don't provide an example of this.

Any ideas? Thanks

Answer 1

Just sample demo:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "background-color": "coral"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Refer]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Display]"
          }

        ]
      }
    ]
  }
}