SharePoint Framework (SPFX) Extensions – Field Customizer

What is Field Customizer?

Using this we can customize the list view field representation/format. Here in this tutorial we will see how to display a number field into a progress bar. This is a type of SharePoint framework extension with which we can extend the field as per our business requirement.

Step 1: Create a SPFX Field Customizer extension

Its same as we did for SPFX application customizer and only difference is we need to select “Field Customizer” in type of extension

Here you go. Our SPFX field customizer project is created for us.

I will open with my usual Visual Studio Code “Code .”

The project structure and files in it are same as the SPFX webparts and SPFX application customizer.

Only difference I could see is the base Typescript file has 3 private methods in it. Application customizer did have only the onInit() and not the others. All we managed by adding extra code.

  • onInit(): As the name says, this method is used to initialize any parameters before the render method is called. The render method will be triggered only if the promise in onInit is resolved
  • onRenderCell(): this runs when each cell renders, so here we can add out custom code logic how you want to represent your field look like
  • onDisposeCell(): Its a dispose method to free the resources that were created while field rendering. Else the resources get accumulated and creates resource leakage

I have a list named “Projects” with fields “Title” and “Progress” (a Number Field). This is how it look like this with OOTB list view fields

But I want the progress field to look more expressive format like a progress bar like below.

Do get this let’s go step by step. For now, I am not adding any customization. Just want to try debugging with the default Microsoft given code.

Step 2: Update “serve.Json” file

As we know all SPFX extensions cannot be tested with local workbench we need test against our SP Online list. So let us open the “serve.json” file and update the list “PageURL” and the list field “Name” which we need to customize. In our case its “Progress”

Step 3: Debug

Start with “Gulp serve”

Click “Load debug scripts” so that it will load as below having a prefix “Value:” in progress field value

But it didn’t work as expected.

The page loaded without the prefix “Value:”. I tried many ways from many expert articles. So finally raised an issue in sp-dev-docs its open for resolution meanwhile one of our mate shared an interesting workaround as below and it worked. Thanks again.

In the redirection debug page URL update this “&loadSPFX=true” to “&loadSpfx=true”

Please refer for more details here sp-dev-docs. For now, let’s continue with the workaround until we get a permanent solution.

Step 4: Add style to field Open “SpfxFieldCustomizerFieldCustomizer.module.scss” and add the below css code in it

Open “SpfxFieldCustomizerFieldCustomizer.ts” and update the render method with the below code which adds the html part of the field

We are ready now. Go for gulp serve. Remember after redirection we need to change the redirected page URL query string as “&loadSpfx=true” and hit enter. Page will load again with pop up as below, click “Load debug scripts”.

Amazing to see the progress bar type representation for my list field. Gives very good user experience.

Thanks Microsoft. Thanks everyone for stopping here to read my blog.

Issue References:

spfx ListViewCommandSet CommandBar does not show up

https://github.com/SharePoint/sp-dev-docs/issues/4338

SPFX Field Customizer Extension not loading

https://github.com/SharePoint/sp-dev-docs/issues/4374

Command Set extension has stooped working on Gulp serve and on package deployment

https://github.com/SharePoint/sp-dev-docs/issues/4219