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

Mention a Channel or Team – Power Automate

Mention a Channel or Team – Power Automate graph.microsoft.com/v1.0/teams/{teamId}/channels/{channelId}/messages Channel: ---------- {   ...

Popular posts