PnP Dynamic Form Control for SPFx

This control can dynamically generate a SharePoint list or SharePoint document library form and everything is controlled through the list setting. include a default value, mandatory and options. we can build the long-form by just using one line of code

Importing Dynamic Form

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

Control tag and the attributes

      <div className={styles.spfxPnpDynamicform}>
        <DynamicForm context={this.props.context} listId={"3071c058-549f-461d-9d73-8b9a52049a80"} listItemId={14}
          onBeforeSubmit={(listItemData) => { console.log(listItemData); return listItemData }}
          onSubmitted={async (listItemData) => { console.log(listItemData) }}></DynamicForm>

Download complete project in the blow GitHub link,

If you have any questions, feel free to let me know in the comments section.
Happy coding!!!

6 thoughts on “PnP Dynamic Form Control for SPFx

    • Hi Murtuza,

      Although I haven’t tested that case, my recommendation is in the onclick event. Delete the control and then re-add it with a new list item id.

      Put the control within the if condition as an example. If the condition is false, the control will be deleted. If the condition is true, the control will be set with a new list item id. it is just workaround suggestions

      I’ll test this scenario and fix this issue in the control.


  1. Hi, can you add an example for fieldOverrides paramter? I am facing issues while passing internalname and custom function

    fieldOverrides={{[“BrandUpdateOwner”]: peoplePicker}}
    this throws an error



Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s