Getting Started With Add-In Web Data From PnP JS Library In The SharePoint Hosted Add-In

This article will share with you the steps of creating a simple SharePoint Hosted add-in using Napa tool, with the help of PnP JavaScript Library in SharePoint online.

SharePoint Add-In is an independent component used to include a new or expanded functionality to SharePoint. The SharePoint Add-In that can access the data and use the components between two webs, is 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 is created during the installation of Add-In. All the components mentioned in the Add-In are deployed to this child website. This web is called Add-In web.

The following example uses a PnP JavaScript Library to access the Lists available in the Add-In web and shows the Add-In web title from the SharePoint Online.

Prerequisites

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

Getting started with SharePoint Add-In

• Navigate to the 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.
  
  
  
  
• That’ll redirect us to the Add-In create page. There, we have a different option to select the Add-In type.
  
  
• Select “SharePoint Add-in” type and enter the project name as “pnpSharePointAddinTest” for the Add-In application, in the “Project name” textbox. Then, click on the “Create” button.
  
  
  
  
• In the Add-in application, select “Properties” icon to update properties of the Add-in.
  
  
• Modify the project title as a user friendly name. For example, enter the name as “PnP SharePoint Add-In Web Testing application”. Leave the other fields as default. Then, click on “Apply” button available at the bottom of the page, under left navigation.
  
  
  
  
• Remove the not-required JavaScript file references from the Default.aspx page. In our example, we will remove the jQuery, sp.js and sp.runtime JS files.
  
  
  
  
• Add the required files (pnp.min.js, fetch.js and es6-promise.js) to the Scripts folder.
  
  
  
  
• After uploading the files, open Default.aspx page and add the below JavaScript file reference lines within PlaceHolderAdditionalPageHead content place holder.
  

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

• Now, open “App.js” file and replace all the lines with the following lines:
  

  'use strict';function pnpReady() {
      //Retrieve Web Title and collection of Lists from the current web
      $pnp.sp.web.expand("Lists").select("Title,Lists").get().then(function(result) {
          var contetTypeInfo = "<strong>Lists from website: " + result.Title + "</strong><br/>";
          for (var i = 0; i < result.Lists.length; i++) {
              contetTypeInfo += "Name: " + result.Lists[i].Title + "<br/>ID:" + result.Lists[i].Id + "<br/><br/>";
          }
          document.getElementById("message").innerHTML = contetTypeInfo;
      }).catch(function(err) {
          alert(err);
      });
  }
  
  //Call the PnP method after the page load
  document.addEventListener('DOMContentLoaded', function() {
      pnpReady();
  });

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

The code in the example shows the current website title and populates the lists (ID and Title) available in the web. You can also check this article from my blog by clicking here.

Output



Conclusion

From this article, we learned how to create a SharePoint Add-in to access the information from Add-In web, using PnP JavaScript Library.