Basic SharePoint list operations using PnP JavaScript Library

In this article, we will cover how to use the PnP JS Core library to do some basic (CRUD) list operations in SharePoint. To know more about this JavaScript library, check the below links

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

Basic List Operations:

PnP JS Core library is developed from the SharePoint REST API to simplify the development process and ease the developers burden in creating SharePoint client based applications. It supports all type of operations, which are supported by SharePoint REST API.

The basic operation like create, read, update and delete the list on SharePoint site using the new simplified JavaScript library available from PnP team.  This library reduces the number of lines in 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 available from the dist folder under PnP-JS-Core Github location.

https://github.com/OfficeDev/PnP-JS-Core/blob/master/dist/pnp.js

https://github.com/OfficeDev/PnP-JS-Core/blob/master/dist/pnp.min.js

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

Create New List:
The following example creates a new announcements list in SharePoint site.

[code language=”javascript”]

<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>

[/code]

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

Read List Information:
The following example returns the list information (Id and Description) based on list title from the SharePoint site.

[code language=”javascript”]

<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>

[/code]

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

[code language=”javascript”]

<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>

[/code]

Delete List:

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

[code language=”javascript”]

<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>

[/code]

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

To work the above code 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.