SharePoint 2013: How to access Host Web from SharePoint App/Add-in

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”

1

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

2

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

3

 

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

4

Wait till Visual Studio configure the App Project for you

5

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

6

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.

7

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

8

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

9

 

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

10

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

11

Provide credentials when asked for

12

 

 

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!!!

13

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

14

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

15

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

16

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

17

  • Click on Permissions Tab

18

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

19

Now deploy the App again

Click “Trust It” when asked for

20

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

21

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

22

 

 

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. And now you know how simple it is to deal with it. J

Hope you find it helpful.

 

 

Advertisements

4 thoughts on “SharePoint 2013: How to access Host Web from SharePoint App/Add-in

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s