Creating a Simple SharePoint List Item Creator WebPart using SPFx, React, and PnPjs

This article presents a technical walkthrough for building a SharePoint Framework (SPFx) WebPart using React and the PnPjs library to create list items in SharePoint. The WebPart is designed for modern SharePoint sites and demonstrates the integration of Fluent UI components for a clean and functional user interface.

Objective

The component, named WorkflowPrjSite, enables users to enter a value in a text field and submit it to a SharePoint list. Upon successful creation of the item, a modal dialog displays a confirmation with the submitted value.

Technologies Used

• React: Component-based UI rendering.
• Fluent UI: User interface components like TextField, PrimaryButton, and Dialog.
• SPFx: Framework for building SharePoint customizations.
• PnPjs: Simplified access to SharePoint REST APIs.
• TypeScript: Static typing for reliability and IDE support.

Key Functional Elements

1. User Interface

The UI consists of:

• A text input (TextField) for the user to type a value.
• A primary button (PrimaryButton) that triggers item creation.
• A dialog (Dialog) that confirms the item creation.

<TextField
  label="Digite algo"
  value={textValue}
  onChange={(_, newValue) => setTextValue(newValue || '')}
/>
<PrimaryButton text="Mostrar texto" onClick={listItemCreation} />
<Dialog ... />

2. Business Logic

The listItemCreation function calls the PnPjs API to add a new item to the "WorkflowPrjSite" list using the value entered in the text field.

const listItemCreation = () => {
  getSP(spContext).web.lists.getByTitle("WorkflowPrjSite").items.add({
    Title: textValue    
  }).then((item) => {
    console.log("Item created with ID:", item.ID);
    showDialog();
  }).catch((error) => {
    console.error("Error creating item:", error);
  });
}

3. Context Setup with PnPjs

A context-aware SPFI instance is initialized using getSP, allowing efficient reuse across the application. This follows the official PnPjs Getting Started guide.

export const getSP = (context?: WebPartContext): SPFI => {
  if (_sp === undefined || _sp === null) {
    _sp = spfi().using(spSPFx(context as ISPFXContext));
  }
  return _sp;
};

Best Practices Observed

• Separation of Concerns: UI logic, business logic, and context configuration are clearly separated.
• Context-aware Singleton Pattern: Avoids unnecessary reinitialization of PnP SP and Graph clients.
• Graceful Fallbacks: Uses .catch() to handle and log errors.

Deployment Notes

Ensure the SharePoint list WorkflowPrjSite exists and that the WebPart is granted permission to access it. This can be handled via API permissions in the tenant admin center or via manifest configuration depending on the environment.

Summary Table

By following this pattern, developers can rapidly deploy interactive SPFx components with consistent code structure, modularity, and intuitive interfaces powered by Fluent UI and PnPjs.