Share via

SHAREPOINT 2013: HOW TO ACCESS HOST WEB FROM SHAREPOINT APP/ADD-IN

  • Article

In this article we will discuss another important implementation showing how we can access the Host Web Elements from with the App Executing (App Web) with in Host Web.

To perform this demo we would follow a Use Case where user of my App needs to access data from Lists present in the Hosting Web or may be saving there settings information into the Hosting Web to support Backup/Restore features.

Consider a List “Categories” which is present in Hosting Web “Development”

https://howtodowithsharepoint.files.wordpress.com/2015/12/115.png?w=800

If we look inside of Categories List we can see data corresponding to each category

https://howtodowithsharepoint.files.wordpress.com/2015/12/28.png?w=800

So our Hosting Web is ready with the data and now it is time to start with developing a new App that will be hosted by our Hosting Web.

  • Launch Visual Studio
  • Select “App for SharePoint” Template to create a new App Project
  • Give the Project a suitable name
  • Click OK

https://howtodowithsharepoint.files.wordpress.com/2015/12/33.png?w=800

 

  • Since we are developing SharePoint Hosted App Select “SharePoint-Hosted” as the hosting model
  • Click Finish

https://howtodowithsharepoint.files.wordpress.com/2015/12/43.png?w=800

Wait till Visual Studio configure the App Project for you

https://howtodowithsharepoint.files.wordpress.com/2015/12/53.png?w=800

Once the Project is ready we can see the default.aspx launched by default

https://howtodowithsharepoint.files.wordpress.com/2015/12/63.png?w=800

On inspecting Solution Explorer we can see all the artifacts which are part of this project.

Out of all “App.js” and “App.css” under Script and Content directories respectively deserves special attention.

  • “App.js” is the JS file where we are going to put all our business logic.
  • “App.css” is the CSS file where we are going to put all our business specific branding.

https://howtodowithsharepoint.files.wordpress.com/2015/12/73.png?w=800

In Step 1 Below we can see SharePoint JS Libraries are added by default to the project by SharePoint App Project Template

In Step 2 we can see the reference of “App.css” file added to the default.aspx by default

In Step 3 we can see the reference of “App.js” file added to the default.aspx by default

So we are all set focus on our business logic directly. All thanks to SharePoint App Project Templates. J

https://howtodowithsharepoint.files.wordpress.com/2015/12/83.png?w=800

Let’s start with default.aspx to add some UI elements to showcase an intuitive UI to our end users

In Step 1 & 2 we are adding HTML & CSS to default.aspx so nothing fancy about it

In Step 3 we are adding a HTML button and applying CSS to it. We will be hooking up the click event to this button later on in our JS file

https://howtodowithsharepoint.files.wordpress.com/2015/12/93.png?w=800

 

Once we got the UI ready we can deploy the App clicking the Start button in Visual Studio Toolbar

https://howtodowithsharepoint.files.wordpress.com/2015/12/103.png?w=800

It is worth to look for Output Window to watch out the progress of the Deployment Process

https://howtodowithsharepoint.files.wordpress.com/2015/12/116.png?w=800

Provide credentials when asked for

https://howtodowithsharepoint.files.wordpress.com/2015/12/123.png?w=800

 

 

And here are we with default.aspx Page of our App.

Step 1 represents the App URL in action under a separate App Domain.

Step2 represents the results panel where we will show the output of App logic execution

Step 3 represents the HTML button element that will trigger the business logic execution

So far so good!!!

https://howtodowithsharepoint.files.wordpress.com/2015/12/133.png?w=800

Now let’s add the code to “App.js” File

In Step 1 we are hooking up the Click Event Handler to our HTML Button. The handler function “callToHostWeb” will get execute on button click.

In Step 2 we are reading a Query String Token “SPHostUrl”, this token will provide us with the Host Web Url.

In Step 3 we are calling “AppContextSite” method by passing the “App Context” and “Host Web Url “ to initialize the “Host Web Context”

In Step 4,5,6 we are performing usual JSOM operations of reading List Data from Host Web

In Step 7 we are building a message to display in the Result Panel of our UI only of the previous operations in steps 1-6 completed successfully

https://howtodowithsharepoint.files.wordpress.com/2015/12/143.png?w=800

Step 8 represents the helper method to retrieve the Query String parameters out of the Requested URL

https://howtodowithsharepoint.files.wordpress.com/2015/12/153.png?w=800

Once we are done with the code we can deploy the App again and see what happened

https://howtodowithsharepoint.files.wordpress.com/2015/12/164.png?w=800

Ooops!!! Got an exception??

But why now and why not earlier?

This is because this time we are trying to access the Host Web for which the App does not have the required permissions.

So in order to fix this issue we need to grant atleast Read permission to the Host Web.

Grant App Permissions
  • Go back to Visual Studio
  • Locate the “AppManifest.xml” in Solution Explorer

https://howtodowithsharepoint.files.wordpress.com/2015/12/173.png?w=800

  • Click on Permissions Tab

https://howtodowithsharepoint.files.wordpress.com/2015/12/183.png?w=800

  • Choose Site “Collection” from Scope Dropdown and “Read” from Permission dropdown

https://howtodowithsharepoint.files.wordpress.com/2015/12/193.png?w=800

Now deploy the App again

Click “Trust It” when asked for

https://howtodowithsharepoint.files.wordpress.com/2015/12/203.png?w=800

Now click on “Call to Host Web” Button to get all the Category Names read from Categories List from the Host Web

https://howtodowithsharepoint.files.wordpress.com/2015/12/213.png?w=800

  • We can also verify the deployment by Navigating to the Host Web in “Apps in Testing” Library

https://howtodowithsharepoint.files.wordpress.com/2015/12/223.png?w=800

 Based on this simple walk through we can conclude how simple it is to interact with the Host Webs from within the SharePoint Apps (Add-ins).

You will find this a very common requirement to communicate for an App with its Hosting Web for one or the other reasons. And now you know how simple it is to deal with it.