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",
""
]
}
}
}
]
}
Related Post
Library
- Import Data From XML
- Import Data from Excel to Dataverse using PowerApps
- Get List Field Type using ECMA Script in SP Hosted Apps
- Related Items Column in SharePoint 2013
- Set List/Library Default Content Type Programatically
- Adding Content Type to List/Library Programatically
- Difference between List and Library in SharePoint
List
- List view render using JSLink with Fabric UI
- PowerShell :: Delete All List Items
- Get List Field Type using ECMA Script in SP Hosted Apps
- What is the Content Type for Custom List in SharePoint 2013, SharePoint 2010
- Related Items Column in SharePoint 2013
- Bulk Insert/Update/Delete Items from SharePoint List/Library
- Create list in SharePoint 2013 using OOB feature:
- Difference between List Definition , List Template and List Instance
- Create List Definition in SharePoint 2013
- Set List/Library Default Content Type Programatically
- Adding Content Type to List/Library Programatically
- Difference between List and Library in SharePoint
- Adding an Item to the Sharepoint List Programatically
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