Creating Chrome Control In SharePoint 2013 App

Ramakrishna Basagalla

SharePointSharePoint 2013 AppCreating Chrome Control

12 Comments

Join the conversation! Your thoughts help the community grow.

Ramakrishna Basagalla10y ago
Thanks for all your feedback
Vignesh Mani10y ago
Good
Humayun Kabir Mamun10y ago
Nice...
Bhuvanesh Mohankumar10y ago
Good
Kuppurasu Nagaraj10y ago
Nice Sharing..
Debasis Saha10y ago
Nice One..
Saurabh Rai10y ago
Nice
Gowtham Rajamanickam10y ago
good one...4
Nitin10y ago
Good one
Sr Karthiga10y ago
good one
Vignesh Mani10y ago
Nice
- Ramakrishna Basagalla10y ago
  Thanks Mani

Introduction

In this article, I am going to explain how we can create our Chrome Control in SharePoint 2013 App. This custom Chrome Control will help in navigating between the pages (just like a menu), we can also include our project images like project/App logo.

Steps to Create Custom Chrome Control in App

Inthe below solution I am going to create a SharePoint App which contains multiple pages, and I am going place my custom Chrome control in the body content to navigate between the pages, and also add my App logo in the Chrome control.

Steps: 1

Create SharePoint 2013 APP ‘AppCromeControl’,

Step: 2

Add html pages in the pages folder (here I have added About, Accounts and Help html pages).

pages

Step: 3

Add below div code to place our Chrome control,

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div id="chrome_ctrl_placeholder"></div>
<div>
<p id="message">
initializing...
</p>
</div>
</asp:Content>

Step: 4

Add below JavaScript code in App.js file in scripts folder to create custom Chrome control,

var hostWebUrl;
$(document).ready(function () {
hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var scriptbase = hostWebUrl + "/_layouts/15/";
$.getScript(scriptbase + "SP.UI.Controls.js", renderChrome);
});
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];
}
}
function renderChrome() {
var options = {
"appIconUrl": "../Images/RKAppImg.png",
"appTitle": "Chromecontrol Demo",
"appHelpPageUrl": "Help.html?"
+ document.URL.split("?")[1],
"settingsLinks": [
{
"linkUrl": "Accounts.html?"
+ document.URL.split("?")[1],
"displayName": "Account settings"
},
{
"linkUrl": "About.html?"
+ document.URL.split("?")[1],
"displayName": "About us"
}
]
};
var nav = new SP.UI.Controls.Navigation(
"chrome_ctrl_placeholder",
options
);
nav.setVisible(true);
}

Step: 5

Browse the App and you can see newly created Chrome control, if you click on the right site setting image (which is highlighted) you can find the pages links to navigate the pages.

pages

I hope this article will help you in creating Chrome control, this is the common code to create across the projects, please leave your valuable comments t help me improve. Happy coding!!