Communicate with Host Web from App Web through PnP JavaScript Core Library

Introduction

Yesterday I had blogged on “How to use PnP JavaScript Core Library with SharePoint Hosted Add-in”, as a continue for the above post; today we will discuss on “How to communicate with Host Web from App Web through PnP JavaScript Core Library”.

Solution

As a example for this blogpost we will list down all the lists which are available in Host web.

Download the sample from my previous post and replace the below code in App.js file.

  

'use strict';

//Get the QueryString data from the url
function getUrlParamByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    var results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

function myPnP() {
    var addinWeb = getUrlParamByName("SPAppWebUrl");
    var hostWeb = getUrlParamByName("SPHostUrl");

    //This will read Lists from the host web
    $pnp.sp.crossDomainWeb(addinWeb, hostWeb).expand("Lists").get().then(function (result) {
        var resulttring = "";
        for (var i = 0; i < result.Lists.length; i++) {
            resulttring += "List Name: " + result.Lists[i].Title + "
List ID:" + result.Lists[i].Id + "
List Description:" + result.Lists[i].Description + "

";
        }
        document.getElementById("message").innerHTML = resulttring;
    }).catch(function (err) {
        alert(err);
    });
}

//Call the above function after the page load
document.addEventListener('DOMContentLoaded', function () {
    myPnP();
});

Conclusion

When you run the project by hitting F5, the list name, list id and the list description will be displayed as below.

You can expect more blogposts since myself and my team is working on a large SharePoint hosted Add-in using PnP JavaScript Core Library.

You may download this sample from the below url.

https://drive.google.com/file/d/0ByEnOE8DAdvhZ3pveFRtSWFzUEk/view?usp=sharing