SharePoint hosted add-in: How to retrieve all host web lists in add-in web in SharePoint Online Office 365?

  • Article

Introduction:

Here we will discuss how we can retrieve all lists from host web and show it in add-in web in SharePoint hosted add-in in SharePoint Online Office 365. If you are new to SharePoint hosted add-in then you can check my below post on how we can create SharePoint hosted add-in using visual studio 2015.

SharePoint Online Develop SharePoint Hosted Add-in using Visual Studio 2015 Demo

In the above example, we have retrieve the logged in user name. But here we will retrieve the hostweb lists.

Here we will first retrieve the hostweb url and hostcontext and then we will retrieve the host web lists.

We can give use the below function to retrieve the host web url by using the querystring parameter.

function getURLParameters(param) {
 
    var params = document.URL.split('?')[1].split('&');
 
    var strParams = '';
 
    for (var i = 0; i < params.length; i = i + 1) {
 
        var singleParam = params[i].split('=');
 
        if (singleParam[0] == param) {
 
            return singleParam[1];
 
        }
 
    }
 
}

Then we can use the below 3 line to retrieve the host web context.

var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
 
    var currentcontext = new SP.ClientContext.get_current();
 
    var hostcontext = new SP.AppContextSite(currentcontext, hostUrl);

Here we have just put the below code in the App.js file.

App.js Code:

'use strict';
 
ExecuteOrDelayUntilScriptLoaded(getHostSiteName, "sp.js");
 
var web;
 
var collList;
 
function getHostSiteName() {
 
    var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
 
    var currentcontext = new SP.ClientContext.get_current();
 
    var hostcontext = new SP.AppContextSite(currentcontext, hostUrl);
 
    web = hostcontext.get_web();
 
    collList = web.get_lists();
 
    currentcontext.load(collList);
 
    currentcontext.executeQueryAsync(onSuccess, onFailure);
 
}
 
function onSuccess() {
 
    var listInfo = '';
 
    var listEnumerator = collList.getEnumerator();
 
    while (listEnumerator.moveNext()) {
 
        var oList = listEnumerator.get_current();
 
        listInfo += 'Title: ' + oList.get_title() + '<br />';
 
    }
 
    $("#message").html(listInfo);
 
}
 
function onFailure(sender, args) {
 
    alert('Failed to get web title. Error:' + args.get_message());
 
}
 
function getURLParameters(param) {
 
    var params = document.URL.split('?')[1].split('&');
 
    var strParams = '';
 
    for (var i = 0; i < params.length; i = i + 1) {
 
        var singleParam = params[i].split('=');
 
        if (singleParam[0] == param) {
 
            return singleParam[1];
 
        }
 
    }
 
}

Default.aspx Code:

The default.aspx page code is like below:

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
 
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
 
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 
<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
 
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
 
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
 
    <SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
 
    <meta name="WebPartPageExpansion" content="full" />
 
    <!-- Add your CSS styles to the following file -->
 
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
 
    <!-- Add your JavaScript to the following file -->
 
    <script type="text/javascript" src="../Scripts/App.js"></script>
 
</asp:Content>
 
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
 
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
 
    Page Title
 
</asp:Content>
 
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
 
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
 
    <div>
 
        <p id="message">
 
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
 
            initializing...
 
        </p>
 
    </div>
 
</asp:Content>

Apart from that here we need to have read permission for the site collection. So we can open the AppManifest.xml file and go to the Permssions tab and you can give read access to the Site Collection like below:

https://www.enjoysharepoint.com/wp-content/uploads/2018/09/sharepoint_hosted_add-in_get_host_web_data-2.png

Once you right click on the project and click on deploy. It will ask you to trust the addin like below:

https://www.enjoysharepoint.com/wp-content/uploads/2018/09/get-host-web-data-sharepoint-hosted-addin-sharepoint-online-2.png

Now when the add-in will open then you can see all the host web lists in the add-in.

https://www.enjoysharepoint.com/wp-content/uploads/2018/09/sharepoint_hosted_add-in_get_host_web_data_office_365.png

References:

You can read useful articles: