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

If we search across the any search engine, we will get lot of references on how to create a SharePoint hosted add-in using JSOM or REST API. But in this post, I’ll cover a steps  to create a SharePoint hosted Add-In to access the data from the Add-In web using PnP JavaScript Library from Napa add-in tool in SharePoint Online.

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.

Quick References:

Introduction to PnP JavaScript Library

PnP-JS-Core Library

The following example, uses a PnP JavaScript Library to access the Lists available in 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 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 for creating the SharePoint or Office  Add-Ins.
  • Select “SharePoint Add-in” type and enter project name as “pnpSharePointAddinTest” for the add-in name in the “Project name” textbox. Then Click “Create” button.
Add In Create Page
Fig 2: Add In Create Page
  • In the Add-in application, select “Properties” icon to update properties to the Add-in.
Click Add-In Properties
Fig 3: Click Add-In Properties
  • Modify the project title as user friendly name, for example enter “PnP SharePoint Add-In 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 4: Add-In General Properties
  • 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.
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.
<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 remove all the lines and replace with below 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 as below,
Add-In Code
Fig 7: Add-In Code

The code in the example shows the current website Title and populates the lists (ID and Title) available in the web.

Output:

Output shows Add-In Web title & Lists
Fig 8: Output shows Add-In Web title & Lists

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

Leave a Reply

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