I was trying to create my first HTML app page and use the chrome control by following this tutorial:
http://msdn.microsoft.com/en-us/library/fp179916.aspx
Everything is working, except I have an empty location where the question mark should be for help. Below is my code, taken from the page. The only changes I remember making are:
- addition of <META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=edge" />(to avoid compat view)
- and changing "appIconUrl" to "../Images/Appicon.png" (app icons aren't stored where they used to be, I assume)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=edge" /><title>Chrome control host page</title><script
src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"
type="text/javascript"></script><script
type="text/javascript"
src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script
type="text/javascript"
src="ChromeLoader.js"></script><script type="text/javascript">"use strict";
var hostweburl;
//load the SharePoint resources
$(document).ready(function () {
//Get the URI decoded URL.
hostweburl =
decodeURIComponent(
getQueryStringParameter("SPHostUrl")
);
// The SharePoint js files URL are in the form:
// web_url/_layouts/15/resource
var scriptbase = hostweburl + "/_layouts/15/";
// Load the js file and continue to the
// success handler
$.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)
});
// Callback for the onCssLoaded event defined
// in the options object of the chrome control
function chromeLoaded() {
// When the page has loaded the required
// resources for the chrome control,
// display the page body.
$("body").show();
}
//Function to prepare the options and render the control
function renderChrome() {
// The Help, Account and Contact pages receive the
// same query string parameters as the main page
var options = {
"appIconUrl": "../Images/Appicon.png","appTitle": "Chrome control app","appHelpPageUrl": "Help.html?"+ document.URL.split("?")[1],
// The onCssLoaded event allows you to
// specify a callback to execute when the
// chrome resources have been loaded."onCssLoaded": "chromeLoaded()","settingsLinks": [
{"linkUrl": "Account.html?"+ document.URL.split("?")[1],"displayName": "Account settings"
},
{"linkUrl": "Contact.html?"+ document.URL.split("?")[1],"displayName": "Contact us"
}
]
};
var nav = new SP.UI.Controls.Navigation(
"chrome_ctrl_placeholder",
options
);
nav.setVisible(true);
}
// Function to retrieve a query string value.
// For production purposes you may want to use
// a library to handle the query string.
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];
}
}</script></head><!-- The body is initally hidden.
The onCssLoaded callback allows you to
display the content after the required
resources for the chrome control have
been loaded. --><body style="display: none"><!-- Chrome control placeholder --><div id="chrome_ctrl_placeholder"></div><!-- The chrome control also makes the SharePoint
Website stylesheet available to your page --><h1 class="ms-accentText">Main content</h1><h2 class="ms-accentText">The chrome control</h2><div id="MainContent">
This is the page's main content.
You can use the links in the header to go to the help,
account or contact pages.</div></body></html>Here's a screenshot: