Articles

Column formatting in SharePoint Online

Column formatting in SharePoint Online

In this article, We will have a look on
  • Ways to Format a Column in SharePoint online List or Library
  • JSON Column formatting vs SPFx Field Customizer
  • How to format a Column in SharePoint Online
  • Creating your first custom column formatting JSON
  • Fields which does not support Column Formatting

Column formatting can be used to change the rendering of columns in SharePoint online / SharePoint 2019. Let's start with a look on below picture
Column formatting in SharePoint onlineHere Status and data bars column have been formatted.

Ways to format a column in SharePoint Online  List or Library

We have two ways to format a column in SharePoint
  • JSON column formatting :   Here, In this article, we will talk about JSON column formatting in SharePoint online. 
  • Using Field Customizer :  We can also create Field Customizer in SharePoint Framework SPFx to format the column. You can learn SPFx Field customzer in detail on tutorialsinhand.com by navigating to SPFx Feild customizer.

JSON Column formatting vs SPFx Field Customizer

So both JSON column formatting and SPFx Field customizer is used to format a Column in SharePoint, What's difference between them?. Below are the difference between JSON Column formatting and SPFx Field customizer.
 
Difference between json column formatting and field customizer
JSON column formatting SPFx Field Customizer
JSON column formation can be used in simple scenarios SPFx can be used in Advance scenarios.
JSON column formatting can be used to create links but cannot call custom script. SPFx Field customizer can call script
JSON column only supports simple data visualization supported by html and css SPFx column formatting can support any data visualization.

How to Format a column in SharePoint Online

In this section let's have a look on how to format a column in SharePoint online. 

Create a list named Products and add a choice column named Status with below choices

  • Not Started
  • In progress
  • In review
  • Approved
  • On hold

Now let's enter some records with different status. A lot of column formatting options are allowed without writing any code. For example you can just select small down arrow and then from Column settings, click on Format this column.

Column formatting in SharePoint online applying predefined style

The formatting options that will appear to you may be little different with different type of column but concept is similar.

As soon as we select first option, column is automatically formatted. If you want to change the color you can click on Edit Styles and change the color.

 

Similarly you can apply  formatting on the basis of some condition/ value of a column. You need to select conditional formatting and  click on  Add a rule. 

 

Here you can create a condition. Condition can be on the basis of any column. Applied formatting will appear when condition evaluates to true.

 

As  we have only one column so let's apply a formatting when  Status is "In progress"  then 

  • Show a left side border(Thick) with green color
  • An Icon reflecting in progress
  • Then text "In progress" with light green background color 

This kind of thing can be achieved without applying any code. So Add a rule, create a condition when Status is equal to "In progress" and In the section Show list item as , click on Edit icon as shown in image below

 
Conditionally format a column in SharePoint online

Click on more styles , you can select a fill color, icon and left side border. Click on Save if you want to save the rule

Whatever rule we have created or style we have applied, SharePoint keeps creating a JSON which is called column formatting json. You can click on advanced mode just below the formatting options. And see what JSON SharePoint have created, you can modify or  paste your own JSON there.


Creating your first custom column formatting JSON

In this section we will learn how to create custom column formatting JSON in SharePoint Online. In case You have not downloaded Visual Studio Code already then you should first download Visual Studio code from https://code.visualstudio.com/download as it provides intelligence while writing Custom JSON.

On a folder in your computer, create a json file and open that file with VS code and paste below content.

{
     "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "txtContent":"@currentField",
    "style":{
        "color":"red"
    }
}
First line here is very important enter the schema and save the file. And then you can get intelligence by pressing on CTRL+ <SPACE> .

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

It is very basic JSON We have created. Let's use it.

Go to Status Column, click on that down arrow, from column settings, click on format this column. Click on Advanced mode and paste above json. You can click on preview to see how it looks like and save your json. It will make the text appear in red color

 
This column formatting JSON is very powerful, we can use condition , foreach loop, css, UI Fabric icons etc. and it is not possible to explain everything here. In the next article, we will see more on how to create column formatting json.

Fields which does not support Column Formatting

Although column formatting is very powerful, but following field types do not support column formatting.

  • Managed Metadata
  • Filename (in Document Libraries)
  • Retention Label

 


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 14,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!