Easily Access SharePoint Content Using @pnp/sp

DMC has previously covered how to utilize SharePoint’s REST API for building workflows, creating list items and folders, and additional tips. In this blog, I’ll discuss an easy way to consume the SharePoint REST APIs using @pnp/sp in a typesafe way. I recently utilized @pnp/sp in a React SPFx webpart over direct queries, which simplified much of the development and made my life a whole lot easier.

What is @pnp/sp?

@pnp is an open-source library that can be utilized in JavaScript, NodeJS, and SharePoint Framework projects to accomplish many things that we would need to write custom REST requests for. @pnp/sp pertains specifically to SharePoint and is one part of the @pnp collection. 

Why Use @pnp/sp?

Using a library is advantageous because it abstracts the REST queries and puts them in readable, understandable code. We also get the benefits of type-checking as @pnp returns defined objects, as well as abstracting some of the nitty-gritty of REST Requests away.

Simply put, @pnp/sp makes performing requests a lot easier and should be utilized if available. A major advantage of this library is that it also offers IntelliSense, a robust code-completion aid developed by Microsoft. This means we can quickly see many different properties and methods, as opposed to looking up every single command and object in the documentation.

For example, VSCode IntelliSense allows for autocomplete in the image below.

It also shows the annotated documentation for functions.

Examples and Use Cases

1. Retrieving a List of Site Users From SharePoint

Let’s say we need to retrieve a list of all users for a given SharePoint site. We can utilize the @pnp/sp/webs in conjunction with @pnp/sp/site-users to retrieve a list of siteUsers for a given site:

const users = await web.siteUsers();

const usersFiltered = await web.siteUsers.filter(`startswith(LoginName, '${encodeURIComponent("i:0#.f|m")}')`)();

2. Getting the Current User's Groups

We can use @pnp/sp/site-groups to easily find, delete, update, or even add a site group to a user. In this example, we’ll retrieve a list of groups the current user belongs to.

As we can see in the IntelliSense, it provides us some properties of each group, such as ID or description, which we can then use for our code.

3. Adding a File to a Folder in SharePoint

If we need to add files, we can do so by first using a combination of @pnp/sp/folders to navigate to the folder we want to use. Once we’ve found the correct folder, we can simply use @pnp/sp/files to add the files.

const result = await web
                    .getFolderByServerRelativeUrl("https://myExample.sharepoint.come/myFiles")
                    .files.add("MyNewFile.txt", file, false);
                return result;

These are three basic examples of some common use cases in development. However, there are plenty of other libraries in @pnp/sp that can achieve many things that we would otherwise have to create our own queries for. @pnp/sp is a great resource with a wide variety of functionalities offered to SharePoint Framework developers. I suggest visiting their documentation for more examples and uses of this library.

Learn more about DMC’s SharePoint expertise and contact us to get started on your next project.