Here’s an extended article based on the “Lists” section from the PnPjs documentation.

Working with SharePoint Lists Using PnPjs

When developing applications on top of SharePoint, one of the most common tasks is interacting with lists and list items. PnPjs provides a streamlined and fluent API to perform operations such as retrieving, adding, updating, and deleting list items, making it easier for developers to integrate with SharePoint lists. This article will walk you through the key features of PnPjs for working with SharePoint lists, with examples.

Prerequisites

Before you begin, ensure that you have the following set up:

1. Node.js installed.
2. SharePoint Framework (SPFx) set up.
3. PnPjs installed. If not installed yet, run:

   npm install @pnp/sp

Retrieving Lists and List Items

Getting All Lists

To retrieve all the lists in a SharePoint site, you can use the following PnPjs method:

import { sp } from "@pnp/sp/presets/all";

sp.web.lists().then(lists => {
    console.log(lists);
});

This will return a promise that resolves to an array of lists within the SharePoint site.

Getting a Specific List

To retrieve a specific list by its title, you can use the getByTitle method:

sp.web.lists.getByTitle("MyList").get().then(list => {
    console.log(list);
});

This will retrieve details of the list named “MyList”.

Retrieving List Items

To retrieve the items from a list, use the items property:

sp.web.lists.getByTitle("MyList").items.get().then(items => {
    console.log(items);
});

You can also specify the number of items to retrieve using the top method, which limits the results:

sp.web.lists.getByTitle("MyList").items.top(5).get().then(items => {
    console.log(items);
});

Filtering List Items

You can filter list items based on specific criteria using the filter method. For example, to retrieve items where the “Status” field is set to “Completed”:

sp.web.lists.getByTitle("MyList").items.filter("Status eq 'Completed'").get().then(items => {
    console.log(items);
});

This filters the list items to only return those that meet the condition provided.

Adding List Items

To add a new item to a list, use the add method. Here’s an example of how to add a new item with some custom field values:

sp.web.lists.getByTitle("MyList").items.add({
    Title: "New Item Title",
    Status: "In Progress"
}).then(result => {
    console.log(result);
});

After the item is added, the promise will resolve to an object containing the newly created item’s details.

Updating List Items

Updating a list item requires both the item ID and the fields you want to update. Use the update method to achieve this:

sp.web.lists.getByTitle("MyList").items.getById(1).update({
    Title: "Updated Item Title",
    Status: "Completed"
}).then(result => {
    console.log(result);
});

This updates the item with ID 1 and changes the “Title” and “Status” fields.

Deleting List Items

To delete an item, you can call the delete method on the item:

sp.web.lists.getByTitle("MyList").items.getById(1).delete().then(() => {
    console.log("Item deleted");
});

This will delete the item with ID 1 from the list.

Working with List Fields

Retrieving Fields

To retrieve the fields (columns) of a SharePoint list, use the following code:

sp.web.lists.getByTitle("MyList").fields.get().then(fields => {
    console.log(fields);
});

Adding a New Field

You can also add a new field (column) to a list:

sp.web.lists.getByTitle("MyList").fields.addText("NewField").then(result => {
    console.log(result);
});

This example adds a new text field called “NewField” to the list.

Working with Content Types

Content types are templates you can apply to lists for consistent metadata. You can retrieve the content types associated with a list using the contentTypes property:

sp.web.lists.getByTitle("MyList").contentTypes.get().then(contentTypes => {
    console.log(contentTypes);
});

Working with Folders in Lists

If your SharePoint list is structured into folders, PnPjs makes it easy to work with them. You can retrieve all the folders in a list like this:

sp.web.lists.getByTitle("MyList").rootFolder.folders.get().then(folders => {
    console.log(folders);
});

Creating a Folder

To create a new folder in a list, use the following method:

sp.web.lists.getByTitle("MyList").rootFolder.folders.add("NewFolder").then(result => {
    console.log(result);
});

This creates a folder called “NewFolder” inside the list.

Summary

PnPjs provides a comprehensive set of methods to manage SharePoint lists efficiently. Whether you’re retrieving, adding, updating, or deleting list items, PnPjs simplifies the process with its fluent API. You can also work with list fields, content types, and folders, making it an essential tool for any SharePoint developer.

Useful Links for Further Reading

• PnPjs Official Documentation
• Getting Started with PnPjs
• PnPjs SharePoint Operations
• Working with Lists in SharePoint
• PnPjs API Reference

This guide should help you get up and running with PnPjs and master working with SharePoint lists. Feel free to extend it with your customizations!