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.

 

 

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 to this JS in our HTML/ASPX page and specify a div with the id "chrome_ctrl_container".



Now if we run the page we will get the following 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 the following image and the output will be the same.



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.