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”
If we look inside of Categories List we can see data corresponding to each category
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
- Since we are developing SharePoint Hosted App Select “SharePoint-Hosted” as the hosting model
- Click Finish
Wait till Visual Studio configure the App Project for you
Once the Project is ready we can see the default.aspx 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 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 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
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
Once we got the UI ready we can deploy the App clicking the Start button in Visual Studio Toolbar
It is worth to look for Output Window to watch out the progress of the Deployment Process
Provide credentials when asked for
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!!!
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
Step 8 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 happened
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
- Click on Permissions Tab
- Choose Site “Collection” from Scope Dropdown and “Read” from Permission dropdown
Now deploy the App again
Click “Trust It” when asked for
Now click on “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. And now you know how simple it is to deal with it. J
Hope you find it helpful.