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

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);
         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