Form customizer tutorial does not work

[Neutrino-Sunset]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: Latest
• SPFx version: 1.21.1
• Node.js version: 22.21.1

Describe the bug / error

There are issues with the Form Customizer Getting Started tutorial here https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-form-customizer Issues include documentation that makes no sense, and the tutorial not working.

This passage for example is grammatically malformed, and without further context is meaningless.

This file defines your extension type and a unique identifier id for your extension which can be used to set to be used in content type level for enabling a custom rendering with this component.

pageUrl in serve.json bears no relation to the url of a list in SharePoint Online.

After creating a list in SO you will be at a page with the url https://mytenant.sharepoint.com/sites/Site1/Lists/List1/AllItems.aspx?npsAction=createList

The url template in serve.json is https://{tenantDomain}/_layouts/15/SPListForm.aspx

Replacing the url with the url of the list, and running gulp serve the page displays

Steps to reproduce

1. Follow the tutorial

Expected behavior

It should work.

[Ashlesha-MSFT]

Hello @Neutrino-Sunset,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.
If you don’t receive a reply within two working days, please use this escalation form to escalate.

[Ashlesha-MSFT]

@Neutrino-Sunset,
Thanks for sharing the detailed feedback — The key point is that the pageUrl in serve.json should reference the form page, not the list view page.

The URL pattern should look like this:

"https://yourtenant.sharepoint.com/sites/yoursite/_layouts/15/SPListForm.aspx"

The PageType value (e.g. 8) defines whether it’s a new, edit, or display form. Also, make sure your list exists at the location in RootFolder.
Check serve.json again - ```
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321,
"https": true,
"serveConfigurations": {
"default": {
"pageUrl": "https://yourtenant.sharepoint.com/sites/yoursite/_layouts/15/SPListForm.aspx",
"formCustomizer": {
"componentId": "your-component-id-from-manifest-json",
"PageType": 8,
"RootFolder": "/sites/yoursite/Lists/YourListName",
"properties": {
"sampleText": "Value"
}
}
}
}
}

[Ashlesha-MSFT]

@Neutrino-Sunset,
I’ve created a PR to correct the content you pointed out. Could you please verify if your serve.json is configured correctly? For reference, here’s the recommended structure from the SPFx sample: Form Customizer Basics Sample

[Ashlesha-MSFT]

@Neutrino-Sunset,
Just checking in to see if you were able to review the updated guidance and verify your serve.json configuration.

Please let us know if the issue is now resolved on your side.