Formatting SharePoint Modern List columns using JSON

Thanks Microsoft to release such a great feature of SharePoint modern UI list column formatting. This will be a modern way to apply customization of your SharePoint list.

Customization can be done by adding a custom “code” to the column settings. This code must be in JSON format and follow a defined schema.

Organization can switch their list pages classic to modern UI to get latest UI experience of SharePoint. This approach is simple, safe and easy to apply with basic JSON knowledge.

Citizen developer, business owner, user can modify list view with their own style. in case if anything went wrong on OOTB forms it’s easy to restore, you just delete your JSON code. using this feature users can easily find list item value by different color, indicator icon, bar chart, prefix, clickable columns etc. Also, it’s possible to format any custom action from column field e.g Lookup, Hyperlink, currency, status, number choice etc.

How column formatting is works?

Column formatting works with Json functionality and json file contains condition and predefined class. You can create your own json file with required condition or you can use already existing PnP sample json files based on your requirement

It’s very simple, click on the required,column from your list view as shown in the below screenshot, and use your JSON code to format a column.

Field color based format example

Field icon prefix format example

You can also format list view without updating Modern your List UI.

Thanks for reading, hope this helps!