Image
Improving user experience with SPFx field customizers in SharePoint Online Modern Sites

Improving user experience with SPFx field customizers in SharePoint Online Modern Sites

Ankush Adhav
July 9, 2021

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, toolbars, create custom navigations, create 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 comes with limitations as well.
  • 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 Customizers

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 the custom formatting to it.
  2. It can be affixed to the existing list column without adding a custom field to the site.

SPFx Field Customizer – 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 rendering of the column.
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 existing 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 is applicable for existing deployments. This type of 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 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.

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

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

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

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

Conclusion

In the above-explained business case scenario, we have seen how SPFx extensions are useful. The SPFx solutions provide ways in SharePoint Online to perform customizations. This whitepaper helps explain different options for customizing existing columns in a list view and providing a customized site column per the modern list/library requirement.

About the Author

Ankush Adhav, Senior Software Engineer

Ankush has more than 9 years of IT experience. For the last 7+ years, he has been working on Microsoft SharePoint online and on-prem implementations mainly in SharePoint business solutions development.

Add New Comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.