In the previous post here I showed how to write a new provider hosted App using a step by step process. In this post I will build up on that knowledge and show you the following:
How to customize your provider hosted app so that you get information from the SharePoint site. (Such as user email).
How to customize the look and feel of your provider hosted App so that it reflects the SharePoint theme so that the user does not feel a completely disconnected experience. Also how that can be selective so that if the same web site was viewed outside of SharePoint it is displayed as a normal web site.
How to link back to SharePoint and publish information back to the site including posting to the personal feeds.
How to host the provider hosted App on Azure web site and how to register this on your private tenant.
So let’s get started, shall we.
Getting Information from SharePoint
To allow the application developers to connect to the source SharePoint site, the request coming from the SharePoint site has a query parameter called “SPHostURl” this contains the source URL of the SharePoint site. So to retrieve information you need to use the client object model to connect to the SharePoint site. Now another problem is how to establish authorization and get the current user identity to be able to perform actions using the currently logged on user identity. To establish this you will already find in any new SharePoint provider hosted App a class called “TokenHelper” this will specifically help you to create the client context using the token. Now once you got the token you do not want to re-connect with the SharePoint site to retrieve the token with every request and hence the need of a token cache. I have included with this article a “TokenDictionary” class that would allow you specifically to cache your tokens.
Now let’s see the code to get the user email address:
Of course for this to work you will need to add a reference to the SharePoint client object model DLL “Microsoft.SharePoint.Client” and “Microsoft.SharePoint.Client.Runtime”, one good thing is that this is already done for you as part of a new SharePoint App project. J
Customizing the look and feel
Once you click on a provider hosted App you are routed to that app and hence you lose the look and feel of the original SharePoint site and the user really feels disconnected. So how to resolve this issue. You simply need to customize your app to look the same like the SharePoint site instead of looking something like this.
The code required to do this is placed in your site theme. If you are using HTML5 then it would be the “_SiteLayout.cshtml” file. You need to add the following line to the header section:
This line will allow the site to get the SP script file from your original farm.
Now on the page DIV you need to add the SP chrome as below:
This will allow the page to look as below:
Also we do not need to show this on site if you open the site from an external user. So simply we add the following code to our default.chtml file:
Also on the public default file we add the following to change the layout file to use the public file that does not contain the SharePoint chrome.
Publishing to the SharePoint User Feeds
Now we need to write information back to the SharEPoint site and usually this is simply done using the Client Object Model in the same way we have read. As an example here I will show you how to write to the user feed.
The first thing you need to do is to add a reference to the DLL “Microsoft.SharePoint.Client.UserProfiles”. Now you need to do the following:
Also please note that you need to add proper access for your app to be able to do this as follows.
Hosting the App on Azure Websites
Now for the last piece of the puzzle how to host your site on Azure Websites. So here are the steps.
1- First you need to create a new Azure WebSite. So logon to https://manage.windowsazure.com and go to the websites and click create.
4- Click save to save the created profiles but do not publish yet as it will fail. Now open the file “backeryapp - Web Deploy.pubxml” using VS and edit it to insert the following lines
6- Now you should be able to open your site and see the normal public page (not linked to SharePoint).
8- Now do not deploy it to SharePoint yet as it will fail, you need to register your app to SharePoint (same as what VS is doing automatically for you) so go to your tenant and open the page https://<tenant>.sharepoint.com/_layouts/15/appregnew.aspx and click on the two generate buttons and fill the information as required:
9- Now copy both the Client Id and the Client Secret and put them in your site web.config file replacing the values there. Republish your site to azure.
You should now be routed to the Azure web site and your app would be able to work as expected and link back to your SharePoint tenant.
You can find the solution helper files here.