SharePoint online (SPFx with react) - custom forms?

Question

I'm building custom New and Edit forms. I'm interested if there is some way to get the fields of list displayed on Edit/New that would work by default from SharePoint, or I must rebuild every field using packages such as office-ui-fabric-react/Fluent UI or similar packages?

And then I must create logic to prefill them when Edit Form is opened, and on save, must rebuild logic for updating/creating new items?

There isn't simpler solution in that way, such as render all fields and hide with code fields that should not be displayed?

Answer 1

Yes, you are correct.

For SharePoint online modern experience lists, you can either customize the list forms using SPFx or Power Apps.

As you want to develop custom list forms using SPFx and react, you can use the SPFx Form Customizer extension which gives you an option to override the list forms.

While using SPFx form customizer extension, you have to build everything custom on your own including UI of list forms, auto-populating field values for edit forms and saving the form field values back to SharePoint list.

Documentation: Build your first Form Customizer extension

Check this SPFx sample which will help you to get started with: SPFx form customizer to override the default list behavior

Also, check these videos:

1. How to create custom list forms with SharePoint Framework
2. Building polished form experiences with SPFx form customizer

Answer 2

To hide fields on the default forms, you can modify the form using JavaScript or CSS. Here's an example using JavaScript/jQuery to hide specific fields:

Copy code
// Hide fields on New form
$("nobr:contains('Field Display Name')").closest("tr").hide();

// Hide fields on Edit form
$("nobr:contains('Field Display Name')").closest("tr").hide();