SharePoint: Work with host web data using PnP JS library in the SharePoint Hosted Add-In

Article
1/17/2024

Introduction

This article will share you the steps to create a simple SharePoint Hosted add-in using Napa tool with the help of PnP JavaScript Library in SharePoint online to access the data from Host web.

SharePoint Add-In is an independent component which is used to include a new or expands the functionality to the SharePoint. The SharePoint Add-In can access data and use components between two webs called Host web and Add-In web.
Host Web: A SharePoint site used to install the SharePoint Add-In is called Host web.
Add-In Web: A special child website will be created during the installation of Add-In and all the components mentioned in Add-In are deployed to the web is called Add-In web.

The example from this article uses a PnP JavaScript Library to access the Lists available in Host web and shows the Host web title from the SharePoint Online. To access data from Add-In web, Work with add-in web data using PnP JS library in the SharePoint Hosted Add-In

Prerequisites

Developer Site Collection
Napa Add-In tool or Visual Studio
PnP, fetch and e6-promise js files

Getting start with SharePoint Add-In

Navigate to Developer Site Collection and then to the Site Contents page.
Click “Napa” Office 365 Development Tools link or Tile from Site Content Page. This will open a Napa tool in a new window.
The Napa tool will list out the existing created Add-Ins. From the same page click “Add New Project” tile.

http://www.ktskumar.com/wp-content/uploads/2016/07/1429_NapaPage.png

Fig 1: Napa Add-In Page

That’ll redirect us to Add-In create a page. There we have different options to select the Add-In type.
Select “SharePoint Add-in” type and enter project name as “pnpSharePointhostwebtest” for the add-in application in the “Project name” textbox. Then Click “Create” button.

http://www.ktskumar.com/wp-content/uploads/2016/07/1446_addincreatepage.png Fig 2: Add-In code to retrieve data from Host web

In the Add-in application, select “Properties” icon to update properties to the Add-in.
Modify the project title as user-friendly name, for example, enter “PnP SharePoint Host Web Testing application”. Leave the other fields as default. Then click “Apply” button available on the bottom of the page under left navigation.

http://www.ktskumar.com/wp-content/uploads/2016/07/1446_addinsettings.png
Fig 3: Add-In General Properties

We need to set the permissions to the add-in to access data from Host web. For that, In the properties page, select “Permissions” in the left navigation.
In our example, we are going to read only web information and lists available from the web. So the Read permission is enough for the web object. So, set the Web permission to “Read”.

http://www.ktskumar.com/wp-content/uploads/2016/07/1446_addinpermissions.png
Fig 4: Add-In Permissions[/caption]

Remove the unrequired JavaScript file references from the Default.aspx page. In our example, we will remove the jquery, sp.js and sp.runtime js files.

http://www.ktskumar.com/wp-content/uploads/2016/07/1429_removeJavaScriptOptions.png Fig 5: Remove JavaScript references

Add the required files (pnp.min.js, fetch.js and es6-promise.js) to the Scripts folder.

http://www.ktskumar.com/wp-content/uploads/2016/07/1429_newscriptfiles.png

Fig 6: Script Files

After uploading the files, open Default.aspx page and add the below JavaScript file reference lines within PlaceHolderAdditionalPageHead content placeholder.

1.<script type="text/javascript" src="../scripts/fetch.js"></script> 
2.<script type="text/javascript" src="../scripts/es6-promise.js"></script> 
3.<script type="text/javascript" src="../scripts/pnp.min.js"></script>

Now, open “App.js” file and remove all the lines and add the below lines.,

01.use 'strict';
02. 
03.function pnpReady() {
04.    var addinweb = getUrlParamByName("SPAppWebUrl");
05.    var hostweb = getUrlParamByName("SPHostUrl");   
06.     
07.    //Retrieve Host Web Title and collection of Lists from the current web
08.    $pnp.sp.crossDomainWeb(addinweb,hostweb).expand("Lists").select("Title,Lists").get().then(function(result) {
09.        var contetTypeInfo = "<b>Lists from website: " + result.Title + "</b><br>";
10.        for (var i = 0; i < result.Lists.length; i++) {
11.            contetTypeInfo += "Name: " + result.Lists[i].Title + "<br>ID:" + result.Lists[i].Id + "<br><br>";
12.        }
13.        document.getElementById("message").innerHTML = contetTypeInfo;
14.    }).catch(function(err) {
15.        alert(err);
16.    });
17.}
18. 
19.//Call the PnP method after the page load
20.document.addEventListener('DOMContentLoaded', function() {
21.    pnpReady();
22.});
23. 
24.//To retrieve the parameter value from query string in URL
25.function getUrlParamByName(name){
26.    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
27.    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
28.    var results = regex.exec(location.search);
29.    return results === null ? ""  : decodeURIComponent(results[1].replace(/\+/g, " "));
30.}

After adding the lines, the app.js file will look like as below,

http://www.ktskumar.com/wp-content/uploads/2016/07/1446_pnpaddincontent-1024x525.png

Fig 7: Add-In Code

To use the same code in On-Premise environment, add the below snippet to ensure the response should have retrieved in JSON format.

1.$pnp.setup({
2.headers: {
3."Accept": "application/json; odata=verbose"
4.}
5.});

The code in this example shows the Host Website’s Title and populates the lists (ID and Title) available on the web.

Output

http://www.ktskumar.com/wp-content/uploads/2016/07/1446_hostwebaddinoutput.png

Fig 8: Host Web SharePoint Add-In Output

Conclusion

From this article, we have learned on how to create a SharePoint add-in to access information from Host web using PnP JavaScript Library in SharePoint Online.

Share via