Add Or Remove Folder From SharePoint Libraries Using PnP JavaScript Library

Introduction

In this article, you will learn how to add and remove the folders from SharePoint libraries, using PnP JavaScript Core Library.

Note: The operations can be executed by adding the script references on the content editor Web part or any normal custom Web part from the site collections, or sites, or sub sites. The results will be retrieved only from the corresponding site or site collection which the site is part of.

The PnP JavaScript Core library is supported by SharePoint 2013, SharePoint 2016 On Premises, and Office 365 versions. The following operations are tested on SharePoint 2013 and Office 365 environments:

Prerequisite

The required JavaScript Core library references for executing any operation, using PnP, are: 

• es6-promise.js
• fetch.js
• pnp.js or pnp.min.js

The script references should be called from the Web parts, only in the order given above.

Note: You can download the references from my initial article about PnP JavaScript Core library. 

• Retrieve Sub Sites From SharePoint Site Collection Using PnP JavaScript Core Library

I explained about the necessity of using the promise and retrieving JS references in the article mentioned above. You can download these references from the Github site as well.

We can set up the header before executing any operation. This is required when you want the response type to be predetermined. Let us see how we can get the JSON data as a response. This has to be done once, before initiating all the requests on the page. This step is not mandatory for O365 environment.

The code snippet, given below, shows the setting up of header:

$pnp.setup({
    headers: {
        "Accept": "application/json; odata=verbose",
    },
});

Add folder to Document Library

In this section, you will learn how to add a folder to SharePoint site's document library or folder, using PnP JavaScript Core Library.

First, we need to retrieve the web object and then the folders collection. The respective folder is retrieved using folder name. Then the folder is added using add method.

The following code snippet helps add a folder to document library of SharePoint site or sub site.

// Adds a folder to document library using folder name
$pnp.sp.web.folders.getByName('SPDocuments').folders.add("Folder5").then(function (data) {
    console.log("Folder is created at " + data.data.ServerRelativeUrl)
}).catch(function(data){
console.log(data);
});

The folder can also be added just by using relative folder path URL. The folder collection is retrieved from the web object. Then the relative new folder path is passed using add method to create folders.

The following code snippets show adding a folder to SharePoint library using URL.

// Adds a folder to document library using URL
$pnp.sp.web.folders.add("SPDocuments/Folder5").then(function (data) {
    console.log("Folder is created at " + data.data.ServerRelativeUrl)
}).catch(function(data){
console.log(data);
});

The following code snippet shows adding sub folder to a folder present in SharePoint library.

// Adds a sub folder to folder of document library using URL
$pnp.sp.web.folders.add("SPDocuments/Folder5/Folder51").then(function (data) {
    console.log("Folder is created at " + data.data.ServerRelativeUrl)
}).catch(function(data){
console.log(data);
});

The above operations show how folders can be created on libraries present on site collection or site or sub sites. The operations should be executed on the respective sites.

Now, we will see how we can add a folder to SharePoint site collection libraries. Here, site object is used to access the respective site folders for addition.

The following code snippet shows adding folder to the site collection library.

// Add folder to library of site collection
$pnp.sp.site.rootWeb.folders.add("SPDocuments/TestFolder5").then(function (data) {
    console.log("Folder is created at " + data.data.ServerRelativeUrl)
}).catch(function(data){
console.log(data);
});

Delete Folder from Document Library

In this section, you will learn how to delete the required folder from the site, using PnP JavaScript Core Library.

The folder collection is retrieved using web object. The respective folder is retrieved using folder name. Delete method is used to delete the folder from document library/ root folder.

The following code snippet shows the process of deleting a folder from the SharePoint library.

// Removes a folder from document library using folder name
$pnp.sp.web.folders.getByName('SPDocuments').folders.getByName('Folder5').delete().then(function (data) {
    console.log("Folder deleted");
}).catch(function(data){
console.log(data);
});

Note: The results can be viewed on the Browser's debugger console for the operations given above.

Summary

Thus, you have learned how to add or delete the folders from SharePoint site or site collection libraries in different ways, using PnP JavaScript Core library. PnP JavaScript library is supported by SharePoint 2013, SharePoint 2016 On Premises, and Office 365 versions. The operations, mentioned above, are tested in SharePoint 2013 and Office 365 environments.