Hi All,
Column formatting is used to customize how fields in
SharePoint lists and libraries are displayed, For this we need to construct
JSON Object that describes the element that are displayed when a field is
included in List/Library View .
Column formatting does not change the data , It only changes
how it is displayed to users . For the demo purpose I have created below list
and changed the column’s formatting as below .
NOTE : We will get the same column formats, If we restore the same list to another list as "Save As List Template".
Download List Template
Procedure to format the column.
Select the column click on down arrow button -> Column
Settings -> Format this column.
By default we can see this section as Empty. Here we need to
update the JSON Code which will change the format.
Let’s see, How I achieved formatting for the below columns .
Assigned To:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {},
"children": [
{
"elmType": "img",
"attributes": {
"src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + @currentField.email",
"title": "@currentField.title"
},
"style": {
"position": "relative",
"float": "left",
"width": "32px",
"height": "32px",
"border-radius": "50%"
}
},
{
"elmType": "span",
"style": {
"padding-right": "8px"
},
"txtContent": "@currentField.title"
},
{
"elmType": "a",
"attributes": {
"iconName": "Mail",
"class": "sp-field-quickActions",
"href": "='mailto:' + @currentField.email + '?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n' + @currentField.title + '\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=' + [$ID]"
}
}
]
}
]
}
View:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
"title": "Open Item"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Read",
"class": "ms-font-xl"
}
}
]
}
Edit:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "editProps"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
"title": "Edit Item"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Edit",
"class": "ms-font-xl"
}
}
]
}
Share:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "share"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
"title": "Share Item"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Share",
"class": "ms-font-xl"
}
}
]
}
Delete:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "delete"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
"title": "Delete Item"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Delete",
"class": "ms-font-xl"
}
}
]
}
Complete:
{
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"position": "absolute",
"white-space": "nowrap",
"padding": "0 4px"
}
},
{
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "&&",
"operands": [
{
"operator": "<",
"operands": [
0,
0
]
},
{
"operator": ">",
"operands": [
100,
0
]
},
{
"operator": ">=",
"operands": [
"@currentField",
0
]
}
]
},
"sp-field-dashedBorderRight",
""
]
}
},
"style": {
"min-height": "inherit",
"box-sizing": "border-box",
"padding-left": {
"operator": "?",
"operands": [
{
"operator": ">",
"operands": [
0,
0
]
},
{
"operator": "+",
"operands": [
{
"operator": "*",
"operands": [
{
"operator": "/",
"operands": [
{
"operator": "-",
"operands": [
{
"operator": "abs",
"operands": [
0
]
},
{
"operator": "?",
"operands": [
{
"operator": "<",
"operands": [
"@currentField",
0
]
},
{
"operator": "abs",
"operands": [
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
0
]
},
0,
"@currentField"
]
}
]
},
0
]
}
]
},
100
]
},
100
]
},
"%"
]
},
0
]
}
}
},
{
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "&&",
"operands": [
{
"operator": "<",
"operands": [
0,
0
]
},
{
"operator": "<",
"operands": [
"@currentField",
0
]
}
]
},
"sp-css-backgroundColor-errorBackground sp-css-borderTop-errorBorder",
"sp-css-backgroundColor-successBackground40 sp-css-borderTop-successBorder"
]
}
},
"style": {
"min-height": "inherit",
"box-sizing": "border-box",
"width": {
"operator": "?",
"operands": [
{
"operator": ">",
"operands": [
0,
0
]
},
{
"operator": "+",
"operands": [
{
"operator": "*",
"operands": [
{
"operator": "/",
"operands": [
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
0
]
},
{
"operator": "abs",
"operands": [
0
]
},
{
"operator": "?",
"operands": [
{
"operator": ">=",
"operands": [
"@currentField",
100
]
},
100,
{
"operator": "abs",
"operands": [
"@currentField"
]
}
]
}
]
},
100
]
},
100
]
},
"%"
]
},
{
"operator": "?",
"operands": [
{
"operator": ">=",
"operands": [
"@currentField",
100
]
},
"100%",
{
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
0
]
},
"0%",
{
"operator": "+",
"operands": [
{
"operator": "*",
"operands": [
{
"operator": "/",
"operands": [
{
"operator": "-",
"operands": [
"@currentField",
0
]
},
100
]
},
100
]
},
"%"
]
}
]
}
]
}
]
}
}
},
{
"elmType": "div",
"style": {
"min-height": "inherit",
"box-sizing": "border-box"
},
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "&&",
"operands": [
{
"operator": "<",
"operands": [
0,
0
]
},
{
"operator": ">",
"operands": [
100,
0
]
},
{
"operator": "<",
"operands": [
"@currentField",
0
]
}
]
},
"sp-field-dashedBorderRight",
""
]
}
}
}
]
}
