Wednesday, November 6, 2013

Use the client chrome control in apps for SharePoint 2013

http://msdn.microsoft.com/en-us/library/fp179916.aspx
vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "ChromeControl"

ChromeControl -> Script -> Right click -> Add -> new item -> "ChromeLoader.js"
 add below javascript to 'ChromeLoader.js'
var options = {
    "appIconUrl": "../Images/AppIcon.png",
    "appTitle": "Basic chrome control in apps for SharePoint 2013",
    "appHelpPageUrl": "Page3.html?" + document.URL.split("?")[1],
    "settingsLinks": [
        {
            "linkUrl": "Page1.html?" + document.URL.split("?")[1],
            "displayName": "Page 1"
        },
        {
            "linkUrl": "Page2.html?" + document.URL.split("?")[1],
            "displayName": "Page 2"
        }
    ]
};
var nav = new SP.UI.Controls.Navigation("chrome_ctrl_placeholder", options);
nav.setVisible(true);
var nav = new SP.UI.Controls.Navigation("chrome_ctrl_placeholder", options);
nav.setVisible(true);

ChromeControl -> Pages -> Right click -> Add -> New Item -> Page 
add three pages and rename default.aspx page as Page0.html
  1. Page1.html 
  2. Page2.html
  3. Page3.html
add below script to all five pages change page title accordingly
<!DOCTYPE html>
<html>
<head>
    <title>Page 0</title>
</head>
<body>
    <div id="chrome_ctrl_placeholder"></div>
    <script type="text/javascript" src="../_layouts/15/sp.ui.controls.js"></script>
    <script type="text/javascript" src="../Scripts/ChromeLoader.js"></script>
</body>
</html>

ChromeControl -> AppManifest.xml
here change the 'Start Page' url as 'ChromeControl/Pages/Page0.html'

ChromeControl -> right click -> deploy

Thank You.

1 comment:

Featured Post

Building Secure APIs with FastAPI and Azure AD Authentication

Building Secure APIs with FastAPI and Azure AD Authentication Published on September 2, 2025 In today's world of microservices and API-f...

Popular posts