Forum Discussion
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 the way of completing the task that can be signified in the list.
I would love that column to be formatted with data bars that show different percentages for each milestone (e.g. 15,30,50,65,85%).
I am sure I could built a calculated column to show that progress-bar by linking it to the choice-column, perhaps even transferring that formatting back to the choice column itself, but that seems like an unnecessary workaround. Unfortunately, my JSON skills are not the best, so any pointers would be appreciated.
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 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)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]" }
JHingst Check below samples, it should help you:
1. How to create a progress bar that updates on status change
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
