Adding About Button To Settings Charm RRS feed

  • Question

  • I want to add About button (may be link) to the Settings Charm. 
    But i dont't want to display content in settings charm, i need to navigate About.html page in application.
    App Settings Sample didn't help me. Is there anyway to achieve this?
    I need to do this with JavaScript and HTML ;)

    Currently i added code below to default.js

    app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.Application.onsettings = function (e) {
                    e.detail.applicationcommands = {
                        "about": {
                            title: "About", href:"/html/About.html"

    I created an HTML file under html folder. Here is the code for About.html

        <!DOCTYPE html>
    <!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- WinJS references -->
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
        <link rel="stylesheet" type="text/css" href="css/staticPages.css" />
        <script type="text/javascript" src="/js/navigator.js"></script>
        <script src="/js/jq-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="/js/networkInfo.js"></script>
        <script src="/js/About.js" type="text/javascript"></script>
        <div id="siluet" class="siluet">&nbsp;</div>
        <div id="contentDetay">
            <button id="backbutton" class="win-backbutton">
            <img id="headLogo" src="/images/head_logo.png" alt="XYZ" />
            <progress id="progressRing"></progress>
            <div id="title"><h1 id="groupNameHeader">Group Name</h1><h1 id="pageTitle">Page Title</h1><div id="sectionSelectArrow">&nbsp;</div></div>
            <div id="menuPopUp">
                <select id="menuList" multiple="multiple"></select>
            <div id="staticContainer"></div>
            <div id="noSnapView">
                <p>İçeriği görüntüleyebilmek için ekranı büyütün</p>

    The problem when i click About link under Settings Charm Bar, i got error at About.js file which is under /js folder.

    (function () {
        'use strict';
        var dataItems;
        var groupIndex;
        var sectionIndex;
        var itemIndex;
        function ready(element, options) {
            pageTitle.style.display = "none"; // pageTitle.style is undefined
            var that = this;
            groupNameHeader.innerText = "About"; // groupNameHeader is undefined
            var aboutContent; // This content is retrieving from web service
            // staticContainer is undefined
            staticContainer.innerHTML = window.toStaticHTML(aboutContent);
         WinJS.Namespace.define("appGlobal", {
            fadeProgressRingOut: fadeProgressRingOut
        WinJS.UI.Pages.define("/html/About.html", {
            ready: ready

    As you can see every HTML element is undefined in .js file; but i couldn't find the reason.
    Friday, September 21, 2012 11:26 AM


All replies

  • Hi B,

    You should do something like this to access your elements:



    Jeff Sanders (MSFT)

    Wednesday, September 26, 2012 1:31 PM
  • Thanks but i got exact answer at StackOverflow.


    Bahadir ARSLAN http://www.bahadirarslan.com

    Wednesday, September 26, 2012 1:33 PM