In this post i am going to explain what is chrome control and how can we use it in our apps..
As you all know, basically there are two ways to host our apps..One is hosting in SharePoint(SharePoint-hosted) and other is in external systems/providers (also called as auto-hosted or provider-hosted.)
Basically when we host app in SharePoint, the app also gets the look and feel of SharePoint like menu and some other links which helps the user in going back to the SharePoint site. But when we host in external system, there would be no consistent look and feel like SharePoint. We will miss navigation and other short cut links to SharePoint site.
I have developed a provider hosted app with ACS model. And here is the landing page of the app, without chrome control
As you see here, there is no link to go back to sharepoint site from this app. Now here i am going to place chrome control in this page, which gives the links and navigation menus to host sharepoint site.
How to configure and use the chrome control?
To use chrome control in our app, we need these below libraries
- jquery-1.9.1.js – can be loaded from cdn/filesystem
- sp.ui.controls.js- load from layouts directory
Now add a div which has to hold the chrome control in your landing page of the app(usually default.aspx).This is the HTML body mockup with chrome control
<body style="display: none"> <div id="chrome_ctrl_placeholder"></div> <div id="MainContent" style="background-color:yellow"> <h1>Provider Hosted Sample using ACS</h1> </div> </body>
Now using script, we will load chrome control in above div.
The script looks like this, replace head tag of your html with below one
In the above script,
getQueryStringParameter : this function get the host web (sharepoint web) url from the appUrl
renderChrome : This function renders the chrome control in to the page .
In renderChrome function, we are creating a variable called 'options' which holds all the required options for the chrome control like the app title, link to other page etc.
And we are creating a new object for navigation with the div(chrome_ctrl_placeholder) and the specified chrome control options and making it visible.
Now the apps landing page would look like below
For more information and the code , please follow this msdn link