Chrome Control (Navigation Control) on the Provider Hosted Application to go back to SharePoint Site

Sathish Nadarajan
Solution Architect
July 29, 2013
Rate this article
[Total: 0    Average: 0/5]

In one of my project, I came across an interesting requirement on the Provider Hosted Application. I.e., to show a link or navigation on the Provider Hosted Applications, Page, so that whenever the end user wants to go back to the SharePoint site, they can click that link and go back to the SharePoint site.


The above screen shot shows the landing page of the provider hosted application. There we want a navigation to “Back to Host Web”. This can be done by using the Jquery plugins. The required jquery plugins are

1. jquery-1.9.1.js

2. sp.ui.controls.debug.js

3. sp.ui.controls.js

Let us download them and add to our Solution file. On the Default.aspx, refer them like below.

 <script src="https://c4968397007.dc07.loc:9470/sites/ADFSTest/SiteAssets/jquery-1.9.1.js" type="text/javascript"></script>
 <script src="https://c4968397007.dc07.loc:9470/sites/ADFSTest/SiteAssets/sp.ui.controls.debug.js" type="text/javascript"></script>
 <script src="https://c4968397007.dc07.loc:9470/sites/ADFSTest/SiteAssets/sp.ui.controls.js" type="text/javascript"></script>

Then on the document.ready, the below codes needs to be pasted.

 <script type="text/javascript">
     var hostWebUrl;
     var hostLayoutsUrl;
     $(document).ready(function () {
         hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
         hostLayoutsUrl = hostWebUrl + "/_layouts/15/";
         $.getScript(hostLayoutsUrl + "SP.UI.Controls.js", renderChromeControl)
     function renderChromeControl() {
         var options = {
             siteUrl: hostWebUrl,
             siteTitle: "Back to Host Web",
         var nav = new SP.UI.Controls.Navigation("chrome_ctrl_container", options);
     function getQueryStringParameter(paramToRetrieve) {
         var params = document.URL.split("?")[1].split("&");
         var strParams = "";
         for (var i = 0; i < params.length; i = i + 1) {
             var singleParam = params[i].split("=");
             if (singleParam[0] == paramToRetrieve)
                 return singleParam[1];

On the body tag, add a div with the name as follows.

 <div id="chrome_ctrl_container"></div>

The codes are self explanatory and for any doubts and updates, follow me on @contactsathish

Author Info

Sathish Nadarajan
Solution Architect
Rate this article
[Total: 0    Average: 0/5]
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 13+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business more

Leave a comment