Sharepoint 2013 - How To Access Host Web From Sharepoint App/Add-In

In this article, I will discuss another important implementation,  which shows how we can access Host Web elements from with the App Executing (App Web) within Host Web.

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

Consider a list “Categories”, which is present in Hosting Web Development.

If we look inside Categories list, we can see the data corresponding to each category.

Thus, our Hosting Web is ready with the data. Now, it is the time to start with developing a new app, which 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.

• Since we are developing SharePoint Hosted app, select “SharePoint-Hosted” as the hosting model.
• Click Finish.

Wait till Visual Studio configures the app project for you.

Once the project is ready, we can see the default.aspx, which is launched by default.

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, it 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.

In Step 1, we can see SharePoint JS Libraries, which 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.

Thus, we are all set to focus on our business logic directly. All thanks to SharePoint app project templates. 

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.

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.

Once we got the UI ready, we can deploy the app by clicking Start button in Visual Studio Toolbar.

It is worth to look for an output Window to watch out the progress of the deployment process.

Provide the credentials, when you are asked.

Here, it is default.aspx page of our app.

Step 1

It represents the app URL in action under a separate app domain.

Step2

It represents the results panel, where we will show the output of an app logic execution.

Step 3

It represents HTML button element, which will trigger the business logic execution.

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” and 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 for the previous operations in steps 1-6, which have been completed successfully.

Step 8

It represents the helper method to retrieve the query string parameters out of the requested URL.

Once we are done with the code, we can deploy the app again and see what happens.

Oops, we got an exception.

Why does this exception come now and 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.

In order to fix this issue, we need to grant at least Read permission to the Host Web.

Grant app permissions

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

• Click Permissions tab.
  
  

• Choose Site Collection from Scope dropdown and Read from Permission dropdown.
  
  

Now, deploy the app again

Click Trust It, when it is asked.

Now, click Call to Host Web button to get all the category names read from Categories List from the Host Web.

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

Based on this simple walkthrough, 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. Now, you know how simple it is to deal with it.

I hope you found it helpful.