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
 
Views
18728

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.

clip_image002

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);
         nav.setVisible(true);
     }
 
     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];
         }
     }
 </script>

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
 
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 15+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business ...read more
 

Leave a comment