DynamicForm with list selection in property pane

Proceeding with the appointments with the PnP React controls today I want to talk about the DynamicForm control.

You can find the code of this sample here on GitHub.

---

The DynamicForm control is surely one of my favorites from the PnP reusable React controls and, as the name suggests, it creates a form dynamically starting from a given SharePoint list.

This sample wants to demonstrate how to use the DynamicForm control inside a web part, in a future article I will cover a similar topic but using a form customizer instead (I will update this article with the link).

Starting with the result, you can see how the web part displays when no list has been selected and it needs to be configured:

Following you can see the resulting form when the default “Documents” list from my development environment has been selected, and as you can see it generates the input fields for the list columns:

To demonstrate a different behavior I changed the selected list to the “Calendar” one, this has different columns and as you can see the DynamicForm control produces a form that allow the user to select the fields accordingly with the list structure:

Show me the code

Starting from the list selection in the property pane, to make it simple and straight forward, I’m using the @pnp/spfx-property-controls package (which contains many controls to be used in the property pane), to enable the list selection I’m using the PropertyFieldListPicker control. To use this control first you need to install the package:

npm install @pnp/spfx-property-controls --save --save-exact

Next it’s required to import the control from the package to be used in the property pane:

import {
  PropertyFieldListPicker,
  PropertyFieldListPickerOrderBy,
} from "@pnp/spfx-property-controls/lib/PropertyFieldListPicker";

The last step to use the PropertyFieldListPicker is to use it in the getPropertyPaneConfiguration web part method like the following:

PropertyFieldListPicker("listId", {
    label: strings.SelectListFieldLabel,
    selectedList: this.properties.listId,
    includeHidden: false,
    orderBy: PropertyFieldListPickerOrderBy.Title,
    disabled: false,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    context: this.context as any,
    deferredValidationTime: 0,
    key: "listPickerFieldId",
})

Once defined the control for the property pane we need to bind the selected list to the component used inside the web part and to do so we need to set the property in the render method where the effective component is rendered:

const element: React.ReactElement<IDynamicFormWithListSelectionProps> = React.createElement(
  DynamicFormWithListSelection,
  {
    context: this.context,
    listId: this.properties.listId,
  }
);

The property listIdof the control is specified in the properties interface of the component:

export interface IDynamicFormWithListSelectionProps {
  listId: string;
  context: WebPartContext;
}

NB : the web part context is required by the DynamicForm control to work.

At this point we need to install the PnP package containing the DynamicForm control:

npm install @pnp/spfx-controls-react --save --save-exact

After installed the package we need the import statement in the web part component:

import { DynamicForm } from "@pnp/spfx-controls-react/lib/DynamicForm";

Finally, inside the render method of the web part’s component, we can use the DynamicForm control and configure the context and listId properties:

<DynamicForm
  context={context as any}
  listId={listId}
  key={`form_${listId}`}
/>

And that’s it! The control will automatically generate the form from the columns of the specified list.

Conclusions

The DynamicForm control is a great component that helps create a form for a specific SharePoint list in a matter of few minutes, it really boosts productivity and lighting speed development in an SPFx solution.

A plus for the PnP reusable React components package is that it’s open source! If you have some improvements, suggestions, or if you find a bug you can go to the GitHub repository and open an issue or provide your changes to make the package always better!

Hope this helps!