Basic List Operations Using PnP JavaScript Library

To know more about this JavaScript library, check the following links:

• Introduction to simplified JavaScript library for SharePoint
• PnP-JS-Core

Basic List Operations

PnP JS Core Library is developed using the SharePoint REST API for simplifying the development process and easing the developer's burden in creating SharePoint client based applications. It supports all types of operations which are supported by SharePoint REST API.

The basic operations, like create, read, update and delete the list on SharePoint sites, using the new simplified JavaScript library, are available from the PnP team. This library reduces the number of lines while achieving the result.

To use this library in the code, we have to refer the PnP js file, in the project or script. The latest PnP javascript file is available in the dist folder under PnP-JS-Core Github location.

• pnp.js
• pnp.min.js

We can download and upload this file to a SharePoint location and include it in our application. Else, we can also directly use this location in your project, as a CDN.

Create New List

The following example creates a new announcements list in SharePoint site.

<script type=”text/javascript” src=”/siteasstes/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //param 1 - List Title
    //param 2 - List description
    //param 3 - List Template ID
    //param 4 - boolean value for enable or disable content types to list
    //param 5 - optional, we can pass additional settings for the list
    $pnp.sp.web.lists.add('My Announcements', 'Description for my announcements list', 104, false).then(function(result) {
        if (result.data.Created) alert('List Created Successfully!');
    });
</script>

Note: Click here to view the lists of list templates with their respective IDs.

This library also provides  another method for creating a new list.

Read List Information

The following example returns the list information (Id and Description), based on list title from the SharePoint site.

<script type=”text/javascript” src=”/siteasstes/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //param 1 - List Title
    $pnp.sp.web.lists.getByTitle('My Announcements').get().then(function(list) {
        alert("Title: " + list.Id + "\r\n" + "Description: " + list.Description);
    });
</script>

Note: We can retrieve the List from the list collection, based on any of the below properties:

1. getByTitle - Title
2. getById - Id

Update List Settings

The following example updates the description of the SharePoint List.

<script type=”text/javascript” src=”/siteasstes/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //param 1 - List Title
    $pnp.sp.web.lists.getByTitle('My Announcements').update({
        Description: 'A sample descripiton'
    }).then(function(result) {
        alert('List updated successfully!');
    });
</script>

Delete List

The following example deletes the SharePoint, based on provide list title.

<script type=”text/javascript” src=”/siteasstes/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //param 1 - List Title
    $pnp.sp.web.lists.getByTitle('My Announcements').delete().then(function(result) {
        alert('List deleted successfully!')
    });
</script>

Place the script in CEWP or Script editor and also, you can try it in the browser console.

To make the above code work in Internet Explorer, we have to include the fetch.js and es6-promise.js JavaScript files as a reference, in addition to pnp.js file.

There are some additional methods available, for creating and reading SharePoint Lists and Libraries.

Pnp.sp.web.lists.ensure
Ensures the specified list or library available in the site.

Pnp.sp.web.lists.ensureSiteAssetsLibrary
Gets the Sites Assets library from default specified location (~web/SiteAssets)

Pnp.sp.web.lists.ensureSitePagesLibrary
Gets the Sites Pages library from default specified location (~web/SitePages)

Conclusion

In this article, we have learned the basic CRUD operations to access / modify the SharePoint List or Library, using PnP JavaScript Library.