How to change a row colour based on cell entry in SP

Question

I've looked at various sources, tried various solutions but nothing seems to work for me. I'm using SP, I don't know which version but it's a later one - it has the option to click back to 'Classic Experience'.

I have a list, and I want to make the STATUS field with Assigned, Ongoing, and Complete change the full row color depending on which option is selected.

I've attached a screenshot of the only field I have which mentions Column formatting. This is all I can find that seems to have anything to do with JSON. I've put various formulas in there but at best, the option selected in the status field vanishes from view and it's just blank, at worst it gives me an error about illegal character entry.

Here are various examples I've tried:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Complete', 'sp-field-severity--good', if([$Status] == 'Ongoing', 'sp-field-severity--low' ,if([$Status] == 'Assigned', 'sp-field-severity--low' ,''))))"
}

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "color": "=if([$Status] != 'Complete' , 'red' , '')"
    },
    "txtContent": "@currentField"
}



{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Assigned', 'sp-field-severity--good', if([$Status] == 'Ongoing', 'sp-field-severity--low' ,if([$Status] == 'Complete','sp-field-severity--warning', ''))))"
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if(@currentField == 'Assigned', '#008000', if([$Date] < @now , '#ff0000',if([$Date] > @now, '#FFFF00', '#00FF00')))"
  }
}




{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Assigned', 'sp-field-severity--good', if(@currentField == 'Ongoing', 'sp-field-severity--low', if(@currentField == 'Complete', 'sp-field-severity--warning')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Assigned', 'CheckMark', if(@currentField == 'Ongoing', 'Forward', if(@currentField == 'Complete', 'Error'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]

Edit: Sorry, don't know why I can't get the image to show. It's here:

Answer 1

For your requirements, you have to use the JSON View formatting in SharePoint.

Use below JSON:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "additionalRowClass": "=if([$Status] == 'Complete', 'sp-field-severity--good', if([$Status] == 'Ongoing', 'sp-field-severity--low', if([$Status] == 'Assigned', 'sp-field-severity--warning', '')))"
}

Where Status is internal name of your choice column. Check below article to find out the internal name of SharePoint column:

Find the internal name of SharePoint column

Make sure you are using correct internal name & adding the JSON at right place like below:

Documentation: Use view formatting to customize SharePoint

---

Update from comments:

View formatting is currently supported only in SharePoint Online and not in SharePoint 2019.