Chrome Control in Apps For SharePoint 2013

Introduction
 
In this article we will see the basics of the "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 following URL format.
 
http://{SharePointSite}/_layouts/15/defaultcss.ashx
 
The Chrome Control basically applies a style sheet to an app page.
 
Steps
 
We need to dynamically load the "SP.UI.Controls.js" file, which is available in the "/15 hive" path. We load this script using the jQuery library as mentioned below.

 
 
Shr1.jpg
Then create a collection to hold the Chrome Control option values.

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

Shr3.jpg

We can combine all these scripts into a single file called "ChromeLoader.JS" and refer to this JS in our HTML/ASPX page and specify a div with the id "chrome_ctrl_container".

Shr4.jpg

Now if we run the page we will get the following output:

Shr5.jpg

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 the following image and the output will be the same.

Shr6.jpg

Summary

The Chrome Control in a SharePoint 2013 app allows addition of custom navigation nodes that link to other pages. The demo app is a Office 365 hosted app.