Writing column formatting json in SharePoint
In this article, We will learn how to write column formatting JSON in SharePoint online. In previous article, We learned basics of formatting a column in SharePoint.
You can navigate on that article by clicking on Column formatting in SharePoint online
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 choice field Named Status with below choices
-
Not Started
-
In progress
-
Done
While learning, we will create a simple column formatting json which, when applied, will look like below:
Here is what we will learn in this article:
-
Creating column formatting json in SharePoint online
-
Rendering field values in Column formatting json
-
Using predefined classes in column formatting json
-
Using icons in column formatting json
-
Using condition in column formatting json
Creating column formatting JSON in SharePoint Online
So let's start by creating a file named collumnformatingsample.json on your computer, open that file in visual studio code and paste below code.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
}
For SharePoint 2019 use below schema:
https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json
This schema helps visual studio code to provide intelligence.
Now to customize the rendering, we need to create some elements like div, Anchor, Button etc. We can also provide some styles , attributes to those elements and we can also create children's under that element. First thing we may want to create is an element as below.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div"
}
Here we have created a div but we can create.
-
Div
-
Span
-
A
-
img
-
svg
-
path
-
button
Now lets add some styles and attributes to our json.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style":{
"padding-left":"4px"
},
"attributes": {
"class":"sp-field-severity--good"
},
"children": [
{
"elmType": "span",
"txtContent":"@currentField"
}
]
}
In above json, We have used style to provide padding on the div and attributes to apply a class on div.
We also have used a children to render a children which is rendering the content simply.
Lets see how it looks like. go to Status column and click on little down arrow >> Column settings >> Format this column.
Click on advanced mode and paste above json. click on preview to see the preview.
Rendering field values in Column formatting JSON
We need to remember below points:
-
@currentField : To render the current field we can use @currentField as shown above.
-
[$fieldname] : [$fieldname] can be used to use any field value in the same list, Remember fieldname is internal name of the column. Try to use [$Title] in above example then you will see
-
For hyper link field, @currentField will be the url and @currentField.desc will give the description
-
For lookup fields, @currentField.lookupId will give the lookup id and @currentField.lookupValue will give lookup value
-
For user fields, You can use below properties.
{
"id": "13",
"title": "John Stark",
"email": "john@contoso.com",
"sip": "john@contoso.com",
"picture": "https://contoso.sharepoint.com/john_contoso_com_MThumb.jpg?t=123456",
"department":"Human Resources",
"jobTitle":"HR Manager"
}
6. Similarly for location type field contains following properties
{
"Address": {
"City": "city name",
"CountryOrRegion": "country",
"State": "state",
"Street": "streat value"
},
"Coordinates": {
"Latitude": "23.43",
"Longitude": "34.2"
},
"DisplayName": "display",
"LocationUri": "url"
}
Using predefined classes
In our example, We have applied a class named "sp-field-severity--good" . There are other predefined classes that can be applied. These classes gives some background colors to cell.
-
sp-field-customFormatBackground : Specifies the padding and margins for all classes that use backgrounds.
-
sp-field-severity--good
-
sp-field-severity--low
-
sp-field-severity--warning
-
sp-field-severity--severeWarning
-
sp-field-severity--blocked
-
sp-field-dataBars
-
sp-field-trending--up
-
sp-field-trending--down
-
sp-field-quickActions
These classes provides background color. To see what color these classes provides, try to apply these class and have a look.
Apart from these classes, we can also use classes provide by office UI Fabric.
Using icons in column formatting
In order to use an icon in column formatting, You need to use iconName in attributes. A lot of icons are already available on Office UI Fabric . You can navigate to https://developer.microsoft.com/en-us/fluentui#/styles/web/icons and choose the icon that you want to use and use the icon.
Lets rewrite the example we are working up on to use icon
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style":{
"padding-left":"4px",
"border-left-style": "solid",
"border-left-width":"5px",
"border-left-color":"green"
},
"attributes": {
"class":"sp-field-severity--good"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName":"SortUp"
}
},
{
"elmType": "span",
"txtContent":"@currentField"
}
]
}
Here we have applied a thick border of 5px on top div and then we have rendered two span elements. One span is used to render icon and other is used to render current field value. In the next section let's see how to use condition in column formatting.
Using condition in column formatting
In our choice field, we have three values, "Not started" , "In progress" and "Done". We may want to set a different border color , a different icon etc and So we need to use condition. There are two ways to write conditions as given below.
1. Excel style expression
These conditions like excel and very simple. Here is how we can use it.
=If(condition,'value if condition is true','value if condition is false')
In case we want to nest if then we can do that as below
=if(condition,'value If condition is true',if(condition,'value if condition is true','value if condition is false'))
Lets use this condition is our example to show a different border and class when status is different.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"style":{
"padding-left":"4px",
"border-left-style": "solid",
"border-left-width":"5px",
"border-left-color":"=if(@currentField=='Not Started','red',if(@currentField=='In progress','yellow','green'))"
},
"attributes": {
"class":"=if(@currentField=='Not Started','sp-field-severity--severeWarning',if(@currentField=='In progress','sp-field-severity--warning','sp-field-severity--good'))"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName":"SortUp"
}
},
{
"elmType": "span",
"txtContent":"@currentField"
}
]
}
Open your SharePoint list, click on the arrow on your status column, go to "format this column" in column settings. click on advanced mode and paste the json and try clicking on preview to see how it looks.
Here we have made debugMode to true which means errors, if any, will be reported.
2. Abstract syntax tree expression
For binary operations, we can use syntax tree expression as below. Example is for + operator.
"operator":"+",
"operands":[
"value1",
"value 2"
]
For our case we can concante class components in attributes as below
"attributes": {
"class": {
"operator": "+",
"operands": [
"sp-field-severity",
"--",
"good"
]
}
}
For ternary operator, syntax is below.
"operator":"?",
"operands";[
{
Binary operator as above
},
"value when condition in operand is true",
"value when condition is operand is false"
]
In case you want to check another condition when the value is true or false . i.e if you want to nest conditions then you can do that . Let's understand it with example. Lets apply different icons on the basis of value in current fields
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"style": {
"padding-left": "4px",
"border-left-style": "solid",
"border-left-width": "5px",
"border-left-color": "=if(@currentField=='Not Started','red',if(@currentField=='In progress','yellow','green'))"
},
"attributes": {
"class": "=if(@currentField=='Not Started','sp-field-severity--severeWarning',if(@currentField=='In progress','sp-field-severity--warning','sp-field-severity--good'))"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Not Started"
]
},
"StatusCircleBlock",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"In progress"
]
},
"Trending12",
"StatusCircleCheckmark"
]
}
]
}
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
Apply this JSON in column and see the results. Here we have used ternary operation twice in nested way.
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