Microsoft has recently released SPFx 1.15.1 Preview version adding a few new features and updates for building SPFx-based solutions. We can find full release notes at the link. One of the major and important features coming with this version is the ability for users to customize new, edit, and display forms of lists and libraries. This has been la ong asked-for and awaited feature which we now have a way to achieve using SPFx.


Please note that as this is still in preview, it involves some manual steps to test the customizer. Also as of today, applying the customizer to list or content type is still in progress and we are developers would only be able to test and debug this and cannot deploy to actually list.

In this article, we will go step by step on creating a Form customizer and then test it by the local debugging experience of SPFx.

Assuming you have already set up your SPFx environment, below are steps to be followed.

Step 1 – Install the latest preview version of SPFx

Step 2 – Create the targeted List

For the sake of simplicity, we will create a list with only two columns,

Title – Single Line of Text

Description – Multiple lines of Text 

Next, we will have to enable Content type, Go to list settings -> Advanced Settings -> Select Yes on “Allow management of content types?” and click on Save.

In this step, we will also have to copy the List content type which we will need later. Now on the list settings, we will see Item content type added. Click on Item and then copy the content type id from url.

Copy this ctype value from the query string and keep it handy to be used later.

Step 3 – Create Project

Next, we will go ahead and create the SPFx project. Go to the command prompt and create a folder of your choice. Run below command


We will be asked a series of questions, choose the below options and continue.

Select component type as Extension and then type of extension as Form Customizer, this is a new option that you will find with this new release.

Once successful, we should see below screen:

Replace this in all the serveConfigurations objects. Refer screenshot below.

Step 5 – Modify render Method

Next, we will modify React component which is responsible for showing control when the form customizer is loaded.

Go to src\extensions\firstCustomizer\components\FirstCustomizer.tsx

Modify the render method to below

Step 6 – Test the configuration

Go to command prompt again and run

It should open the browser with the below screen,

Click on Load Debug Scripts, if it loads correctly, we will see the below screen.

Step 7 – Modify Code to Create a new Entry in the SP list

Now that we know the configuration is correct we will modify the Form code to add input controls and buttons and logic to save data to SP list. For saving data to SP list we will use pnpjs.

Kill the gulp serve and run the below command to install a specific version of pnpjs

Please note we are using an older version of pnpjs for simplicity and reuse my old code 🙂

Once it is installed, let us modify Go to src\extensions\firstCustomizer\components\FirstCustomizer.tsx.

Add a few imports which we need to use.

Replace render method to add controls

Create a State interface to hold values from controls, you can add below where IFirstCustomizerProps is declared.

Add below line below state declaration 

Modify FirstFormCustomizer class to use State and then create a constructor

Add below 4 methods to handle the logic to save state, save in sp list, and reset controls

Explanation about code

  • So here we are adding two controls Title and Description from the user and associating these controls with the state object to hold its value, onChange method on these controls takes care of saving the value to State.
  • Then we have added two buttons – one to Save and create a new items and the Reset button to reset the values in controls.
  • Create new item button click will call the method createNewItem which uses PNP js to save the data from state to create a new entry in list.
  • If you would have noticed we have used this.props.context.list.title to target the list name, so here we are using the context object from FormCustomizer which gives us objects and context on which the form Customizer is running.
  • There are 3 important attributes that would be important for developers to
    • this.props.displayMode –  this will help us identify if the form is in new, edit or display mode and we can use this to control our logic, please note as we are debugging using gulp serve for now this will always be new
    • this.props.context.list – this provides us the list object on which the form customizer is running. it has 3 attributes which are list title, list GUID and list server relative url.
    • this.props.context.itemId – this will provides us itemId on which current form is opened, this will be applicable when displayMode would be “Edit” or “Display”

Step 8 – Test the latest code

Run gulp serve again and click on Load debug script on the browser once opened

We should see the below output

Enter some value in Title and Description and click on Create new item

Go to the list and see a new entry is created

This will conclude our First Demo on Form customizer with SPFx, you can refer to the source code at this repo. We’re waiting for the release of the new feature when we will be able to assoicate this with actual Lists. It will be interesting to see how this will work out and the experience when user clicks on New Item, Edit Item, etc…