Saturday, October 24, 2020
Home Microsoft 365 Column Formatting to Customize SharePoint List

Column Formatting to Customize SharePoint List

Format a column in a SharePoint list or library using the modern experience to change the way items look.

Both column formatting and SharePoint Framework Field Customizer extensions enable you to customize how fields in SharePoint lists are displayed. The Field Customizer is more powerful because you can use it to write any code that you want to control how a field is displayed.

Column formatting is more easily and broadly applied. However, it is less flexible, because it does not allow for custom code; it only allows for certain predefined elements and attributes.

Display field values

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField"
}

If you can accomplish your scenario by using column formatting, it’s typically quicker and easier to do that than to use a Field Customizer. Anyone who can create and manage views in a list can use column formatting to create and publish customizations. Use a Field Customizer for more advanced scenarios that column formatting does not support.

Conditional Formatting for Column Formatting

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= 70,'sp-field-severity--warning', '')"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= 70,'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Conditional formatting based on the value in a text or choice field (advanced)

{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“attributes”: {
“class”: “=if(@currentField == ‘Done’, ‘sp-field-severity–good’, if(@currentField == ‘In progress’, ‘sp-field-severity–low’, if(@currentField == ‘In review’, ‘sp-field-severity–warning’, if(@currentField == ‘Has issues’, ‘sp-field-severity–severeWarning’, ‘sp-field-severity–blocked’)))) + ‘ ms-fontColor-neutralSecondary'”
},
“children”: [
{
“elmType”: “span”,
“style”: {
“display”: “inline-block”,
“padding”: “0 4px”
},
“attributes”: {
“iconName”: “=if(@currentField == ‘Done’, ‘CheckMark’, if(@currentField == ‘In progress’, ‘Forward’, if(@currentField == ‘In review’, ‘Error’, if(@currentField == ‘Has issues’, ‘Warning’, ‘ErrorBadge’))))”
}
},
{
“elmType”: “span”,
“txtContent”: “@currentField”
}
]
}

SharePoint list showing JSON with with two columns formatted

To get more information you can visit:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Most Popular

Microsoft 365 All Tenants in the admin center

More than one-third of admins that use the Microsoft 365 admin center manage multiple tenants. This applies to two-thirds of enterprise customers...

Windows Defender Advanced Threat Protection (ATP) software is undergoing some changes

Microsoft has announced that its Windows Defender Advanced Threat Protection (ATP) software is undergoing some changes. The antivirus program is expanding beyond...

Improvements to SharePoint news feeds and digests

The news feed delivers an intelligent view of news, targeted to you based on factors like your role or location, and further...

Microsoft Endpoint Management Deploy an application to a device

From the Microsoft Endpoint Management admin center, you can initiate an application install in real time for a tenant attached device.