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.

No comments:

Post a Comment

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts