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
Here 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.
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
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
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
