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 web site 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 lists out the existing created Add-Ins. From the same page click “Add New Project” tile.
Napa Add-In Page 
Fig 1: Napa Add-In Page
  • That’ll redirect us to Add-In create 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.
Add In Create Page 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 bottom of the page under left navigation.
Add-In General Properties
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 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”.
Add-In Permissions
Fig 4: Add-In Permissions[/caption]
  • Remove the un required JavaScript file references from the Default.aspx page. In our example, we will remove the jquery, sp.js and sp.runtime js files.
Remove JavaScript references Fig 5: Remove JavaScript references
  • Add the required files (pnp.min.js, fetch.js and es6-promise.js) to the Scripts folder.
Script Files 
Fig 6: Script Files
  • After uploading the files, open Default.aspx page and add the below JavaScript file reference lines within PlaceHolderAdditionalPageHead content place holder.
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,
Add-In code to retrieve data from Host web 
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 in the web.

Output

Host Web SharePoint Add-In Output
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.