Improving User Experience with SPFx Field Customizer In SharePoint Online Modern Sites

Introduction

With SharePoint Framework (SPFx) development, developers create and deploy modern SharePoint solutions in SharePoint Online. SharePoint Framework comprises different solutions that can be developed: Webparts, Extensions, and Library components.

SPFx Extensions help in enhancing end-user experience in modern document libraries and pages. It helps customize list views and toolbars, custom navigations, and custom headers and footers.

There are three types of extensions in the SharePoint Framework:

1. Field Customizers
2. Application Customizers
3. List-view Command Set

Challenges in customizing list views in modern SharePoint sites

• Only the box option available in modern sites for creating conditional columns is JSON-based columns formatting.
• JSON-based column formatting options are easy to develop and apply to the list views.
• Though JSON column formatting is easy to develop and apply, it also has limitations.
• JSON-based column formatting cannot be used in scenarios such as we cannot use complex programming constructs and cannot call APIs.

Effective solution to customize list views in modern sites: SPFx Field Customizer

Field Customizers are used to provide a custom look and feel for a column in a list view. OOB Column Formatting can achieve the same thing, but Field Customizer allows us to add custom JavaScript. We can make API calls to the back end, which triggers every row render in a list view for a column. This is how it is different from Column Formatting.

There are two types of Field Customizer implementations:

1. It generates a new site column and applies custom formatting.
2. It can be affixed to the existing list column without adding a custom field to the site.

SPFx Field Customizers – Site column with custom formatting

With this approach, the SPFx Field Customizer solution provisions a site column when the Field Customizer app is added to the site. When this site column is added to the list and a list view, it renders custom rendering specified in the extension.

Below are the steps to create an SPFx field customizer:

1. Create an SPFx extension project.
2. Debug the extension with the workbench.
3. Deploy the solution by adding an app package to the app catalog.

Below are the steps to use this Field Customizer to your site:

1. Add an app to the site where you want to use this field customizer.
2. Add the site column to the list provisioned by this Field Customizer app.
3. Add the site column to the list views to see a custom column rendering.

When to select this approach?

This approach is applicable for new deployments and when you want to reuse the Field Customizer across multiple lists. Site column provisioned by this app can be used across the lists in the site where that app is added.

SPFx Field Customizer – Apply formatting to an existing column:

With this approach, field customizer, we attach the Field Customizer extension to the current column. We are considering the same example of formatting a multiline text field with append-only property enabled in SharePoint online to show the last text/comment inserted.

Steps to create this type of Field Customizer will remain the same as the above approach.

Below are the steps to use this Field Customizer for your site:

1. Add an app to the site where you want to use this field customizer.
2. Attach Field Customizer to the existing column using PowerShell.

When to select this approach?

This approach applies to existing deployments. Field Customizer can be attached to existing list columns to achieve formatting. You must attach the Field Customizer solution to the existing column using PowerShell.

Sample business case: Multiline text field formatting in list view

Let’s see how a Field Customizer implemented for multiline text fields in SharePoint improves user experience in the modern SharePoint site.

Let’s assume the user must show the last comment entered in the list view and a pop-up to show all the comments entered. The multiline text field has an append-only feature enabled on the column. See how SPFx Field Customizer helps the user in viewing comments.

The steps required to view the last comments entered out-of-the-box way are as below:

1. Navigate to the list view in SharePoint.
2. Click on the View Entries link. This takes the user to the display form.
3. View comments on the display form

Steps required to view the last comments entered when column formatting is applied via the SPFx field customizer:

1. Navigate to list view; it will show the last comment entered and clicking on- The show All Entries Link will show all comments.

Conclusion

We have seen how SPFx extensions are useful in the above-explained business case scenario. The SPFx solutions provide ways in SharePoint Online to perform customizations.

Contact Jade’s Experts to know different options for customizing existing columns in a list view and providing a customized site column per the modern list/library requirement.