PnP Dynamic Form Control for SPFx

The PnP DynamicForm control for SPFx lets you render list forms dynamically within your web parts, without duplicating setup logic or UI code.

🔍 Key Benefits

• Renders SharePoint list forms based on schema and list settings
• Minimal code required — just configure context, list ID, and callbacks
• Hooks like onBeforeSubmit, onSubmitted, and onSubmitError let you control custom logic

✅ Usage Example

Import the control:

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

Add it inside your component:

<DynamicForm
  context={this.props.context}
  listId="3071c058-549f-461d-9d73-8b9a52049a80"
  listItemId={14}
  onBeforeSubmit={(data) => {
    console.log("Before submit:", data);
    return data;
  }}
  onSubmitted={(data) => {
    console.log("Submitted:", data);
  }}
/>

This control pulls the list fields, builds the form, applies validation, and handles submission.

🎥 Demo Walkthrough

Check out the step-by-step video demo showing how to set up and use this control:

📂 GitHub Sample Project

🧠 Notes from the Author

I developed this control as part of the PnP SPFx Controls initiative to simplify form handling in SPFx. The goal was to help developers build dynamic, data-driven SharePoint forms without manually writing repetitive UI code for each list.

• Re-rendering with new listItemId: If you switch items dynamically, unmount/remount the DynamicForm (e.g., change a key) so the control re-initializes with the new item.
• Selective visibility: Use hiddenFields to hide columns you don’t want to expose in the UI.

✅ Final Thoughts

The PnP DynamicForm control standardizes form UI in SPFx, saves you from boilerplate, and gives you hooks to plug in business logic.
Give it a try — comment with feedback or custom use cases!