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


Sathish Nadarajan
SharePoint MVP
Published On :   29 Jul 2013
Visit Count
Today :  4    Total :   15419
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

Sharegate: Kick-Ass Tool
Think Your SharePoint & Office 365 Are Secure ? Find Out Now!


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

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

KWizCom Scan