Articles

Creating data bars in column formatting json SharePoint

Creating data bars in column formatting json SharePoint

In this article we will have a look on how to create data bars in SharePoint online using column formatting json.
If you don’t have Visual Studio Code, Please download it from https://code.visualstudio.com/download.

 

Although you can use any editor but I prefer this as it give intelligence.


Next, in this example, I suppose that we have a list named products having a Number field named Estimate. We will do formatting and create data bars on this field.

 

You can also learn basics of column formatting in below articles.


Let's start by creating a json file on your computer and open it with visual studio code and paste below code.

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
 }

If you are working on SharePoint Server 2019 then use https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json schema instead

Please note that You can write your json directly in the column >> Column settings >> Format this column >> Advanced mode

 

Data bars can be easily created by applying a border on the top and a background. We only need to focus on applying proper width on the basis value in our Estimate field.

 

For example,

Go to your column Estimate >> click on down arrow >> Column settings >> Format this column and click on advanced mode and paste below json.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
     "debugMode": true,
     
     "style":{
         "width":"=if(@currentField>=80,'100%',(@currentField)+'%')",
         "background-color":"yellow" ,
         "padding-left":"4px",
         "border-top-style": "solid",
         "border-top-width":"3px",
         "border-top-color":"green"  
     },
     "children": [
        {
            "elmType": "span",
             "style":{
                 "padding-left":"8px",
                 "white-space":"nowrap"
             },
             "txtContent":"@currentField"
        }
     ]

}

Notice the style in div, it creates a 3px top border with green background as shown in below image. We can also use theme colors in background and border but I will write a separate article for that.

Creating data bars in column formatting json example -tutorialsinhand.com Instead of applying a border using style you can also use a predefined class named "sp-field-dataBars" . So let's use this class and see how we can create column formatting.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
     "debugMode": true,
     
"attributes": {
    "class":"sp-field-dataBars"
   },
     "style":{
         "width":"=if(@currentField>=80,'100%',(@currentField)+'%')",
         "padding-left":"4px"
         
     },
     "children": [
        {
            "elmType": "span",
             "style":{
                 "padding-left":"8px",
                 "white-space":"nowrap"
             },
             "txtContent":"@currentField"
        }
     ]
}

So I have used an attribute class instead of applying border because sp-field-dataBars class provides background and border automatically.

 


SharePoint Online
SharePoint Column Formatting

Would you like to see your article here on tutorialsinhand. Join Write4Us program by tutorialsinhand.com

About the Author
Mukesh Tiwari
Always ready to learn new technologies, A problem solver, exhibit to do attitude. Having around 10+ years of experience of development and management skills. I believe don't just set random goals but right goals suited for you.
Page Views :    Published Date : Aug 16,2020  
Please Share this page

Related Articles

Like every other website we use cookies. By using our site you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Learn more Got it!