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 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",
""
]
}
}
}
]
}
Excellent post. I used to be checking continuously this weblog and I'm impressed! Very helpful information particularly the last section :) I handle such info much. I used to be looking for this certain information for a very lengthy time. Thanks and good luck.
ReplyDelete