SharePoint Online: Format list columns in modern UI

Customizing a list view was never easily and we used different ways in past which including working on custom xslt templates, add css and .js scripts on the list view page and working with JSlink to override the rendering of list view web parts. There was always a challenge that if you have multiple list views then you need to add these customization for each list view which can be a time taking job.

Microsoft introduced Modern UI in SharePoint online which will included to next SharePoint server product. At start, I also faced it bit difficult to manage but after sometime it looked quite easy to manage and modify changes on the modern list views.  As I mentioned earlier that modifying list view involve technical skills on writing scripts and sometime you need to be verify careful as you changes can impact on all other lists. But in modern UI it got so easy that a normal user can customize the list view with zero code and it will not have impact on any other list. And best part is that formatting is defined at column level which means if there are multiple list view, you do not need to modify others as changes will be applied automatically.

In this blog post, I am sharing steps to format list columns in modern ui. Follow below steps:

1. Go to a list view page where you want to apply formatting on list columns.
2. You can see a down arrow next to the column name, click on that. It will show you a context menu to sort of filter the list view.
3. Click on the Column settings which will show you the options for formatting column, click on Format this column

4. This will show an edit pane on right side of the page as shown in below picture where you can see the option to Edit template or go to Advanced mode.

5. Click on Edit template, it will show a UI based formatting option, you can select the color for each column choice and click on apply changes.

6. Click on Advance mode listed on point 4 If you like a more customize look n feel for the column like adding extra space, icons or different color codes. This will show you a script page where you can modify your changes.

7. You can also preview changes, save the changes and you can see your changes on the modern list view.

This do not require any administrative skills or edit the list view pages.