SharePoint Online

PnP Dynamic Form Control for SPFx

Video Ravichandran Krishnasamy6 Comments

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>
      </div>

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.

      Like

      Reply

  3. 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

    Like

    Reply

Comments