Understanding the Code: CRUD Operations in SharePoint Using PnPjs
In this article, I’ll explain how the SPFx web part you’ve created uses PnPjs to interact with a SharePoint list. The goal is to show how to fetch and display SharePoint list data using TypeScript and React. We’ll also cover initializing PnPjs and the full integration of a SharePoint Framework (SPFx) web part.
Project Structure
Your project consists of the following files:
PnPGetStartList2WebPart.ts: Main entry point for the web part where the SharePoint context is passed to PnPjs and the React component is rendered.IPnPGetStartList2Props.ts: Defines the interface for the properties passed to the React component.PnPGetStartList2.tsx: The React component responsible for interacting with the SharePoint list and rendering data.
1. PnPGetStartList2WebPart.ts
This file is the entry point for the web part, where the SharePoint context is passed to PnPjs, which allows for CRUD operations on the list.
import { spfi, SPFx } from "@pnp/sp";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { PnPGetStartList2 } from './components/PnPGetStartList2';
import { IPnPGetStartList2Props } from './components/IPnPGetStartList2Props';
export default class PnPGetStartList2WebPart extends BaseClientSideWebPart<{}> {
public onInit(): Promise<void> {
// Initialize PnPjs with the SharePoint context
spfi().using(SPFx(this.context));
return super.onInit();
}
public render(): void {
const element: React.ReactElement<IPnPGetStartList2Props> = React.createElement(
PnPGetStartList2,
{
context: this.context
}
);
ReactDom.render(element, this.domElement);
}
}
Key Points:
- PnPjs Initialization: The line
spfi().using(SPFx(this.context))is where PnPjs is initialized using the SharePoint context. - React Component Rendering: The
render()method creates thePnPGetStartList2component and passes the SharePoint context to it.
2. IPnPGetStartList2Props.ts
This file defines the interface for the properties passed to the PnPGetStartList2 React component.
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IPnPGetStartList2Props {
context: WebPartContext;
}
Key Points:
- Context Property: The
contextproperty of typeWebPartContextis passed to the React component so that it can interact with the SharePoint environment.
3. PnPGetStartList2.tsx
This is the core React component that handles CRUD operations on the SharePoint list using PnPjs.
import * as React from 'react';
import { IPnPGetStartList2Props } from './IPnPGetStartList2Props';
import { spfi } from "@pnp/sp";
import "@pnp/sp/lists";
import "@pnp/sp/items";
export const PnPGetStartList2: React.FC<IPnPGetStartList2Props> = (props) => {
const [items, setItems] = React.useState<any[]>([]);
// Fetch items from the SharePoint list on component mount
React.useEffect(() => {
const fetchItems = async () => {
const sp = spfi().using(SPFx(props.context));
try {
const listItems = await sp.web.lists.getByTitle('YourListName').items();
setItems(listItems);
} catch (error) {
console.error("Error fetching items: ", error);
}
};
fetchItems();
}, []);
return (
<div>
<h2>List Items</h2>
<ul>
{items.map(item => (
<li key={item.Id}>{item.Title}</li>
))}
</ul>
</div>
);
};
Key Points:
- State and useEffect: The
useEffecthook fetches SharePoint list items when the component mounts, and updates theitemsstate. - PnPjs Operations: The line
sp.web.lists.getByTitle('YourListName').items()fetches list items from a SharePoint list. Replace'YourListName'with the actual name of your list. - Rendering Data: The fetched items are displayed in a list (
<ul>), rendering the title of each list item.
Full Example: Your Exact Code
Here’s your original code from the project, which we can break down for clarity.
1. PnPGetStartList2WebPart.ts
import { spfi, SPFx } from "@pnp/sp";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { PnPGetStartList2 } from './components/PnPGetStartList2';
import { IPnPGetStartList2Props } from './components/IPnPGetStartList2Props';
export default class PnPGetStartList2WebPart extends BaseClientSideWebPart<{}> {
public onInit(): Promise<void> {
spfi().using(SPFx(this.context));
return super.onInit();
}
public render(): void {
const element: React.ReactElement<IPnPGetStartList2Props> = React.createElement(
PnPGetStartList2,
{
context: this.context
}
);
ReactDom.render(element, this.domElement);
}
}
2. IPnPGetStartList2Props.ts
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IPnPGetStartList2Props {
context: WebPartContext;
}
3. PnPGetStartList2.tsx
import * as React from 'react';
import { IPnPGetStartList2Props } from './IPnPGetStartList2Props';
import { spfi } from "@pnp/sp";
import "@pnp/sp/lists";
import "@pnp/sp/items";
export const PnPGetStartList2: React.FC<IPnPGetStartList2Props> = (props) => {
const [items, setItems] = React.useState<any[]>([]);
React.useEffect(() => {
const fetchItems = async () => {
const sp = spfi().using(SPFx(props.context));
try {
const listItems = await sp.web.lists.getByTitle('YourListName').items();
setItems(listItems);
} catch (error) {
console.error("Error fetching items: ", error);
}
};
fetchItems();
}, []);
return (
<div>
<h2>List Items</h2>
<ul>
{items.map(item => (
<li key={item.Id}>{item.Title}</li>
))}
</ul>
</div>
);
};
By reviewing and understanding the flow of this code, you can easily set up CRUD operations in SharePoint using PnPjs and React in SPFx. You can use this example as a base to build more complex web parts for interacting with SharePoint lists.
edvaldo b. guimarães filho 
Leave a comment