Forum Discussion

Copper Contributor

Jan 31, 2023

Column Formatting Data Bars under Text

Hi everyone! I am trying to optimize a list of tasks and would love a choice column with 5 choices outlining the latest status on the projects that are populating the list. I.e. 5 "milestones" along...

JSON formatting

SharePoint

RobElliott

Jan 31, 2023

JHingst you'll probably want a choice option for 100% as well. The JSON column formatting (advanced mode) is as follows:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "2px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "background-color": "#faf0dc",
	"width": "=if(@currentField == 100, '100%', (@currentField * 1) + '%')"
  }
}

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

RobElliott

Silver Contributor

Jan 31, 2023

JHingst you'll probably want a choice option for 100% as well. The JSON column formatting (advanced mode) is as follows:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "2px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "background-color": "#faf0dc",
	"width": "=if(@currentField == 100, '100%', (@currentField * 1) + '%')"
  }
}

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

JHingst

Copper Contributor

Jan 31, 2023

RobElliott

Thank you very much for your help. It was 100% what I was looking for, but with your help I arrived at the formatting I was hoping for, and a penny or two dropped in my mind in the process 🙂

While perhaps not perfect, the final result looks like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "2px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "background-color": "#80c6ff",
    "width": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "[$Progress_x0020_Status]",
            "Received"
          ]
        },
        "25%",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$Progress_x0020_Status]",
                "Page Added"
              ]
            },
            "44%",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Progress_x0020_Status]",
                    "Layout Complete"
                  ]
                },
                "63%",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Progress_x0020_Status]",
                        "Integrated"
                      ]
                    },
                    "82%",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$Progress_x0020_Status]",
                            "Final Revision Pending"
                          ]
                        },
                        "100%",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "txtContent": "[$Progress_x0020_Status]"
}