Creating Chrome Control In SharePoint 2013 App

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).



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">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            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.








 
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!!

Read more articles on SharePoint:

• How To Configure Secure Store Service Application In SharePoint
• Setup My Sites Under User Profiles At The SharePoint Admin Center on Office 365