2

I'm looking to have a 'Status' column, that a user will change, for example:

  • Not started
  • Investigating
  • Review
  • Completed

When the user drops down and selects a status, another column 'Progress' will change.

  • When user selects 'Not Started' progress is 0% with a red color
  • When user selects 'Investigating' progress is 25% with orange color
  • When user selects 'Review' progress is 50% with yellow color
  • When user selects 'Completed' progress is 100% with green color

I've seen some guides, but they look to be quite in depth, and they don't seem to cover this exact situation.

1 Answer 1

3

You can use SharePoint JSON column formatting for this.

Example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "=if([$Status] == 'Not Started', '0%', if([$Status] == 'Investigating', '25%', if([$Status] == 'Review', '50%', if([$Status] == 'Completed', '100%', ''))))",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "role": "progressbar",
    "aria-valuenow": "@currentField",
    "aria-valuemin": "0",
    "aria-valuemax": "1"
  },
  "style": {
    "display": "=if([$Status] == '', 'none', 'block')",
    "padding": "0",
    "color": "=if([$Status] == 'Not Started', 'red', 'black')",
    "background-color": "=if([$Status] == 'Not Started', '#c86c70', if([$Status] == 'Investigating', '#ffa500', if([$Status] == 'Review', '#ffc83d', '#85b44c')))",
    "border-top": "='2px solid' + if([$Status] == 'Not Started', '#a4262c', if([$Status] == 'Investigating', '#8b4000', if([$Status] == 'Review', '#997825', '#498205')))",
    "width": "=if([$Status] == 'Not Started', '0', if([$Status] == 'Investigating', '25%', if([$Status] == 'Review', '50%', if([$Status] == 'Completed', '100%', '0'))))",
    "box-sizing": "border-box"
  }
}

Output:

enter image description here

Documentation: SharePoint JSON column formatting

Related JSON sample: Multi-Colored Databars

Your Answer

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

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