Chrome control in apps for SharePoint 2013

Introduction:

        In this post we will see the basics about “Chrome Control” in apps for SharePoint 2013.

About Chrome Control:

                The Chrome Control downloads a copy of the style sheet used in the parent site and applies it to the HTML pages in your client-side App. We can find the default style for any site in the below URL format.

http://{SharePointSite}/_layouts/15/defaultcss.ashx

Chrome control basically apply style sheet to App page.

Steps:

                We need to dynamically load the "SP.UI.Controls.js" file, which is available in “/15 hive” path. We load this script using Jquery library as mentioned below.

Then create a collection to hold the chrome control option values. 

Finally, instantiate a new Navigation object using the container <div> added to the page markup in the previous step and make the object visible.

We can combine all these scripts into a single file called “ChromeLoader.JS” and refer this JS in our HTML/ASPX page and mention a div with “chrome_ctrl_container” id.

Now if we run the page we will get the below output.

The Navigation Bar with setup icon and menu will be loaded as per our configuration mentioned above.

The same settings will be configured directly in HTML as in below image and the output will be the same.

 

Summary:

            Chrome control in SharePoint 2013 App allows addition of custom navigation nodes that links to other pages and help pages. The demo App in Office 365 hosted App.