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/FluentUI or similar packages?

And then I must create logic to prefill them when EditForm 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

In addition to using custom code and UI libraries to build custom New and Edit forms, there are some simplifications that SharePoint Online offers to consider.

Leverage existing features of SharePoint: SharePoint provides features to customize the appearance and behavior of forms without writing custom code. You can configure it through SharePoint's list settings interface, such as field settings, column types, validation, etc. These settings can affect the default form rendering. This way, you can adjust the form's display and validation rules without writing custom code. list

Use Power Apps: Power Apps is a low-code/no-code platform for creating custom SharePoint forms. You can use Power Apps to build forms that bind directly to SharePoint columns, and customize the form's appearance and behavior as needed. Power Apps provides a rich set of visual design tools and presets that make it easier to create and customize forms without deep coding.

Using SharePoint's default functionality and Power Apps can help simplify the process of building forms and reduce the writing of custom code. These methods provide an easier way to customize forms, especially when the requirements for form appearance and behavior are not too complicated. But if you need a higher degree of customization and flexibility, using custom code and UI libraries is still a more powerful option.

Answer 2

Yes, there is a way to avoid writing extensive code for your requirement. I frequently come across similar requirements, and fortunately, the PnP Community has developed a useful library called "pnp/spfx-controls-react" which includes a component called DynamicForm.

Here is a step-by-step guide on how to use the DynamicForm component:

1. Start by creating a wrapper React component.
2. In the constructor of your React component, initialize a blank item. This is also an opportunity to prefill certain column values using SP PnP.
3. If you need to hide specific fields, you can add their internal names to the "hiddenFields" property of the control. This property accepts a string array.
4. In case the user decides to cancel the form without saving, you will need to implement logic to delete the blank item that was created.
5. Similarly, for an edit form, you can simply set the "listId" property to the ID of the existing item instead of creating a new one.

It's important to note that there may be certain limitations when using DynamicForm for real-life use cases. If you encounter any specific limitations, I'd be happy to hear about them and assist you further!

Sample code snippet to illustrate the usage of DynamicForm:

import * as React from 'react';
import { DynamicForm } from 'pnp/spfx-controls-react';
import { sp } from '@pnp/sp';

export default class YourFormComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      listItemId: null,
    };

    // Create a blank item in the constructor
    sp.web.lists.getByTitle("<List Name>").items.add({})
      .then((item: any) => {
        // Update the state with the ID of the blank item
        this.setState({ listItemId: item.Id });
      })
      .catch((error: any) => {
        console.log(error);
      });
  }

  handleFormSave = (formData) => {
    // Logic to save the form data
    console.log(formData);
  }

  handleFormCancel = () => {
    // Logic to handle form cancellation and delete the blank item if needed
  }

  render() {
    return (
      <div>
        <h1>Your Form Component</h1>
        <DynamicForm
          listId="<your-list-id>"
          listItemId={this.state.listItemId}
          onSave={this.handleFormSave}
          onCancel={this.handleFormCancel}
          hiddenFields={["Field1", "Field2"]}
        />
      </div>
    );
  }
}