Reader Level:
Articles

Chrome Control in Apps For SharePoint 2013

By Venkatesh Kumar on January 04, 2013
In this article we will see the basics of the "Chrome Control" in apps for SharePoint 2013.
  • 1
  • 0
  • 8465

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.
 

Venkatesh Kumar

Interested in learning Microsoft Technologies and following my Mentors/Virtual Experts.

COMMENT USING

Trending up