0

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?

3
  • Are you using SPFx form customizer extension? Commented May 29, 2023 at 9:06
  • @GaneshSanap I can use spfx form customizer extension or I can develop custom dialog and display fields there, both are fine. If I use SPFx form customizer extension, is there a way to achieve this?
    – private7
    Commented May 29, 2023 at 9:15
  • 1
    You have to build everything custom including UI, auto-populating field values and saving the forms. Check this documentation and SPfx sample. Let me know if this answers your question Commented May 29, 2023 at 9:22

2 Answers 2

2

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
1

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();
1
  • You cannot add custom JavaScript like this on the modern experience list forms. Commented Aug 19, 2023 at 4:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.