Column formatting in SharePoint Online

Recently Microsoft introduced a new way of Column formatting in SharePoint Lists and Libraries. Simply you create a JSON object that describes how the elements should be rendered with the styles when a field is included in a list view. The users with create and manage views permission in a list can change how the fields will be displayed. Formatting columns will not have any effect on the underlying data.

I have created a simple List, shown below. Let's start how column formatting will work on it.

So, how exactly the JSON file is structured? Well, best place to start is, SharePoint/sp-dev-column-formatting repository by customizing the existing sample.

 You can simply paste your JSON code into the text box in the Format column section.

 {  
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",  
  "debugMode": true,  
  "elmType": "div",  
  "txtContent": "@currentField",  
  "attributes": {  
   "class": "sp-field-dataBars"  
  },  
  "style": {  
   "width": {  
    "operator": "?",  
    "operands": [  
     {  
      "operator": ">",  
      "operands": [  
       "@currentField",  
       "20"  
      ]  
     },  
     "100%",  
     {  
      "operator": "+",  
      "operands": [  
       {  
        "operator": "toString()",  
        "operands": [  
         {  
          "operator": "*",  
          "operands": [  
           "@currentField",  
           5  
          ]  
         }  
        ]  
       },  
       "%"  
      ]  
     }  
    ]  
   }  
  }  
 }  

I've used the above JSON block to format the "Effort" column in my Project estimate list. Also I have applied custom formatting to "Assign to" column to display the users profile pic and "Status" column to show the status of each task.

Would love to see someone releasing a tool to simply generate the JSON. :)