Hi Guys,
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.
To overcome this problem, Microsoft provided a control
called Chrome Control, which enables you to use the header style of a specific
SharePoint site in our apps. This doesn't need any server library reference or
custom tool, only reference of the SharePoint JavaScript library.
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
<head>
<title>Chrome control host page</title>
<script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"> </script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"> </script>
<%--<script type="text/javascript" src="demochrome.js"> </script>--%>
<script type="text/javascript">
"use strict";
var hostweburl;
$(document).ready(function () {
hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl")
);
var scriptbase = hostweburl + "/_layouts/15/";
$.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)
});
function chromeLoaded() {
$("body").show();
}
function renderChrome() {
var options = {
"appTitle": "Chrome control demo",
"onCssLoaded": "chromeLoaded()",
};
var nav = new SP.UI.Controls.Navigation(
"chrome_ctrl_placeholder",
options);
nav.setVisible(true);
}
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
</script>
</head>
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
Thanks,
Purna
