Article 13 from 30 : How to use Chrome Control for SharePoint app

This post is article 13 from the 30 Articles App series for SharePoint

Today, I will discuss about what is chrome control and how can you use it with SharePoint Apps?

What is Chrome Control?

Chrome Control gives the navigation header of any specific site. and so it does allow your app to show navigation header for  host-web in your app pages. User will feel familiar while browsing app-pages and the quick links to settings and host web would be handy.

It’s a great way to provide consistent SharePoint navigation into your app.

Where should you use chrome control?

The aspx pages in SharePoint-hosted app will get the top navigation by default from the master page of app web.

The html pages in sharepoint-hosted app and all pages in cloud-hosted app could use Chrome Control.

How can you use it with your SharePoint App pages?

Step -1 : place the html div place holder where you want this to be displayed.

Step -2 : Load necessary SharePoint resources :

Load MicrosoftAjax from http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js or you can save into your project.

Load jquery-1.7.2.min.js from http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js or you can save into your project.

Add reference to jquery-1.6.2.min.js , MicrosoftAjax.js and AppChromeControl.js (this is your custom js file) into HTML head section
Below script will go into the page itself

$(document).ready(
    function () {
        //Get the ShowChrome
        var ShowChrome = decodeURIComponent(getQueryStringParameter('ShowChrome'));

        //Get the host web url.
        var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

        //Build absolute path to the layouts root with the spHostUrl
        var layoutsRoot = spHostUrl + '/_layouts/15/';

        if (ShowChrome == 'Yes') {
            //Load the SP.UI.Controls.js file to render the App Chrome
            $.getScript(layoutsRoot + 'SP.UI.Controls.js', renderSPChrome);
        }
    });

Step – 3 : Render the Chrome Control
AppChromeControl.js is the file in which I have added my js script to render chrome control.

below code will go into the AppChromeControl.js

//Query String helper function
function getQueryStringParameter(urlParameterKey) {
    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] == urlParameterKey)
            return singleParam[1];
    }
}

function renderSPChrome() {
// get host web logo  
 var hostlogourl = decodeURIComponent(getQueryStringParameter('SPHostLogoUrl'));
//Set the chrome options for Help, account, contact etc.
    var options = {
        'appIconUrl': hostlogourl,
        'appTitle': document.title,
        'appHelpPageUrl': 'Help.html?' + document.URL.split('?')[1],
        'settingsLinks': [
            {
                'linkUrl': 'Account.html?' + document.URL.split('?')[1],
                'displayName': 'Account settings'
            },
            {
                'linkUrl': 'Contact.html?' + document.URL.split('?')[1],
                'displayName': 'Contact us'
            }
        ]
    };

    //Load the Chrome Control into divHostWebSPChrome 
    var chromeNavigation = new SP.UI.Controls.Navigation('divHostWebSPChrome', options);
    chromeNavigation.setVisible(true);
}

If you get any trouble in rendering Chrome Control you should check the token and make sure all necessary js files are loaded .
Hope that helps.