PnP-JS-Core samples

This is the part four of my posts about SharePoint client side development using Node.js.

You can see previous parts from here:

During this post we will extend existing PnP Workbench with different common scripts.

Code Template

I have created following template that can be used to test different codes easily. You just need to write your own code after // write code here comment. I have used this template for all example codes here unless I have told otherwise.

var testbench = testbench || {};
testbench.tests = function() {
    var targetElement = jQuery("#pnp-test-bench");
    targetElement.empty();

    runCode = function(){
        targetElement.append("<h2>Test: Test name</h2>");
        // write code here
    };   
    return {
        runCode: runCode
    }
};

jQuery('document').ready(function(){
    var t = new testbench.tests();
    t.runCode();
});

PnPJsSamples_EmptyCode

Web

Here are scripts related to Web.

Show title of the web

var testbench = testbench || {};

testbench.tests = function() {
    var targetElement = jQuery("#pnp-test-bench");
    targetElement.empty();

    runCode = function(){
        targetElement.append("<h2>Test: getWebTitle</h2>");
        $pnp.sp.web.select("Title").get()
            .then(function(web){
                targetElement.append(web.Title + "<br />");
            })  
            .catch(function(error){ 
                targetElement.append(error + "<br />");
        })
    };   

    return {
        runCode: runCode
    }
};

jQuery('document').ready(function(){
    var t = new testbench.tests();
    t.runCode();
});

PnPJsSamples_WebTitleCode

If everything went fine, you should see the title of the web in test bench area.

PnPJsSamples_WebTitleBrowser

Show all properties from web object

This can be useful when you try to see what is current state of the web object.

var testbench = testbench || {};

testbench.tests = function() {
    var targetElement = jQuery("#pnp-test-bench");
    targetElement.empty();

    runCode = function(){
        targetElement.append("<h2>Test: getWeb</h2>");
        $pnp.sp.web.get()
            .then(function(web){
                for (var key in web) {
                    targetElement.append(key + ": " + web[key] + "<br />");
                }
            })  
            .catch(function(error){ 
                targetElement.append(error + "<br />");
        });
    };   

    return {
        runCode: runCode
    }
};

jQuery('document').ready(function(){
    var t = new testbench.tests();
    t.runCode();
});

PnPJsSamples_GetWebCode

If everything went fine, you should see all properties of the current web in test bench area.

PnPJsSamples_GetWebBrowser

Lists

Enumerate all lists from current web

This enumerates all lists from current web and shows all their properties.

var testbench = testbench || {};

testbench.tests = function() {
    var targetElement = jQuery("#pnp-test-bench");
    targetElement.empty();

    runCode = function(){
        targetElement.append("<h2>Test: enumLists</h2>");
        $pnp.sp.web.lists.select('Id', 'Title').orderBy('Title').get()
            .then(function(listIds) {
                for (var index in listIds) {
                    var l = $pnp.sp.web.lists.getById(listIds[index].Id);
                    l.get()
                        .then(function(list){
                            for (var key in list) {
                                targetElement.append(key + ": " + list[key] + "<br />");
                            }
                            targetElement.append("<hr />");
                        })  
                        .catch(function(error){ 
                            targetElement.append(error + "<br />");
                    });
                }
            })
            .catch(function(error){ 
                targetElement.append(error + "<br />");
        });
    };   

    return {
        runCode: runCode
    }
};

jQuery('document').ready(function(){
    var t = new testbench.tests();
    t.runCode();
});

PnPJsSamples_EnumListsCode

If everything went fine, you should see all lists under current web and all properties of the list in test bench area. This is quite long list, so I have taken just a snapshot of the first list.

PnPJsSamples_EnumListsBrowser

Enumerate List Items

Enumerates all items from the selected list.

var testbench = testbench || {};

testbench.tests = function() {
    var targetElement = jQuery("#pnp-test-bench");
    targetElement.empty();

    runCode = function(){
        targetElement.append("<h2>Test: enumListItems</h2>");
        $pnp.sp.web.lists.getByTitle("Documents").items.get()
            .then(function(items){
                for (var i=0; i < items.length; i++) {
                   for (var key in items[i]) {
                        targetElement.append(key + ": " + items[i][key] + "<br />");
                    }
                    targetElement.append("<hr />");
                }
            })  
            .catch(function(error){ 
                targetElement.append(error + "<br />");
        });
    };   

    return {
        runCode: runCode
    }
};

jQuery('document').ready(function(){
    var t = new testbench.tests();
    t.runCode();
});

PnPJsSamples_EnumListItemsCode

If everything went fine, you should see all lists items from the selected list and all properties of each list item in test bench area. This is quite long list, so I have taken just a snapshot of the first list item.

PnPJsSamples_EnumListItemsBrowser

Search

Search sites

This example uses search to list all site collections from the tenant. It lists only those current user has rights.

var testbench = testbench || {};

testbench.tests = function() {
    var targetElement = jQuery("#pnp-test-bench");
    targetElement.empty();

    runCode = function(){
        targetElement.append("<h2>Test: searchSites</h2>");
        $pnp.sp.search('contentclass:sts_site')
            .then(function(searchResult) {
                targetElement.append("Search took " + searchResult.ElapsedTime + "ms to complete.<br />");
                targetElement.append("Total rows " + searchResult.TotalRows + ".<br />");
                targetElement.append("Total rows including duplicates " + searchResult.TotalRowsIncludingDuplicates + ".<br />");
                targetElement.append("<hr />");

                for (var index in searchResult.PrimarySearchResults) {
                    var resultItem = searchResult.PrimarySearchResults[index];
                    for (var key in resultItem) {
                        targetElement.append(key + ": " +resultItem[key] + "<br />");
                    }
                    targetElement.append("<hr />");
                }
            })
            .catch(function(error){ 
                targetElement.append(error + "<br />");
        });
    };   

    return {
        runCode: runCode
    }
};

jQuery('document').ready(function(){
    var t = new testbench.tests();
    t.runCode();
});

PnPJsSamples_SearchSitesCode

If everything went fine, you should see list of search results and all properties of each search result item in test bench area. This is quite long list, so I have taken just a snapshot of the first item.PnPJsSamples_SearchSitesBrowser

One thought on “PnP-JS-Core samples

  1. Gaurav

    How to open web by url i.e.
    var MyWeb = $pnp.sp.crossDomainWeb(‘https://mysharepoint.sharepoint.com’);

    I am not able to open it up.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.