PnPjs Library

PnPjs is a JavaScript library that provides a fluent API for interacting with SharePoint and Microsoft 365. It simplifies the development of client-side code for SharePoint and Microsoft 365 by abstracting away the complexities of the underlying REST APIs. With PnPjs, developers can perform common operations such as querying lists, creating sites, managing user profiles, etc., using simple and familiar JavaScript syntax.

Get item by ID

You can get any item in any list with the following code, which can then be used to populate fields on the form:

sp.web.lists.getByTitle('My List').items
    .getById(1)
    .get()
    .then(function(item){
        console.log(item);
    });

Get specific items with filter

You can get items without knowing their ID with a filter, for example, you can get all items where Category Choice field is equal Bug Report:

sp.web.lists.getByTitle('My List').items
    .filter("Category eq 'Bug Report'")
    .get()
    .then(function(items){
        console.log(items);
    });

You can also filter by current user, like this:

sp.web.currentUser.get()
    .then(function(user) {
    sp.web.lists.getByTitle('My List').items
        .filter('Manager eq ' + user.Id)
        .get()
        .then(function(items){
            console.log(items);
        });
    });

Get field values and expand fields

Some fields might not be retrieved without specifying them. Use select to specify what fields to retrieve, and expand to get values from complex fields like Lookup or Person:

pnp.sp.web.lists.getByTitle('Tickets').items
    .select('Title', 'Id', 'Supervisors/Name')
    .expand('Supervisors')
    .filter("Title eq 'Example A'")
    .get()
    .then(function(items) {
        // see if we got something
        if (items.length > 0) {
            //save names to a separate array
            var names = [];
            for (var i = 0; i < items[0].Approvers.length; i++) {
                names.push(items[0].Approvers[i].Name);
            }
            //set current Ticket Title, ID and Supervisors fields with values from Tickets list
            fd.field('TicketTitle').value = items[0].Title;
            fd.field('TicketID').value = items[0].Id;
            fd.field('TicketSupervisors').value = names;
        }
    });

Update existing item

If you need to change an existing item, you can update its values with the following code:

var parentItemId = fd.itemId;
var childItemId = fd.field('ChildID').value;
sp.web.lists.getByTitle('Child List').items
    .getById(childItemId)
    .update({
        LookupFieldNameId: parentItemId
    })
    .then(function() {
        console.log('Updated!');
    });

Create item

You can also create a new item and specify values for its fields with the following:

var title = fd.field('Title').value;
var category = fd.field('Category').value;
sp.web.lists.getByTitle('My List').items
    .add({
        Title: title,
        Category: category
    })
    .then(function() {
        console.log('Created!');
    });

Make a request before saving a form

If you want to run a request, before current form gets saved, you can replace Save button’s functionality to first run the request, and then save on success:

//replace toolbar button Save
fd.toolbar.buttons[0].click = function() {
    var employee = fd.field('Manager').value;
    var status = fd.field('Status').value;
    if (employee && employee.Key) {
        sp.web.lists.getByTitle('Employee List').items
            .filter('Employee eq ' + user.Id)
            .update({
                Status: status
            })
            .then(function() {
                //save on success
                fd.save();
            });
    }
}