DynamicForm with list selection in property pane
Tags: development, pnp, pnpspfxcontrolsreact, pnpspfxpropertycontrol
Published: 2024-05-16 15:28:28

---
title: DynamicForm with list selection in property pane
published: true
date: 2024-05-15 09:00:00 UTC
tags: Development,PnP,pnpspfxcontrolsreact,pnpspfxpropertycontrol
canonical_url: https://iamguidozam.blog/2024/05/15/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](https://github.com/GuidoZam/blog-samples/tree/main/web%20parts/DynamicFormWithListSelection).

* * *

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:

![](https://iamguidozamcode.files.wordpress.com/2023/11/image.png?w=1024)

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:

![](https://iamguidozamcode.files.wordpress.com/2023/11/image-1.png?w=1024)

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:

![](https://iamguidozamcode.files.wordpress.com/2023/11/image-2.png?w=1024)

### 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 `listId `of 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](https://github.com/pnp/sp-dev-fx-controls-react) and open an issue or provide your changes to make the package always better!

Hope this helps!