locked
Adding About Button To Settings Charm

    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.UI.disableAnimations();
    
                WinJS.Application.onsettings = function (e) {
                    e.detail.applicationcommands = {
                        "about": {
                            title: "About", href:"/html/About.html"
                            }
                    }
                    WinJS.UI.SettingsFlyout.populateSettings(e);
                    };
    ...
    }


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

        <!DOCTYPE html>
     
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>About</title>
    
        <!-- 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>
    </head>
        <body>
        <div id="siluet" class="siluet">&nbsp;</div>
        <div id="contentDetay">
            <button id="backbutton" class="win-backbutton">
            </button>
            <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>
    
            <div id="staticContainer"></div>
            <div id="noSnapView">
                <p>İçeriği görüntüleyebilmek için ekranı büyütün</p>
            </div>
        </div>
    </body>
    
    </html>



    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) {
    
            networkInfo.getInfo();
            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

Answers

All replies

  • Hi B,

    You should do something like this to access your elements:

    element.querySelector("#pageTitle");

    -Jeff


    Jeff Sanders (MSFT)

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

    http://stackoverflow.com/a/12565791/423699


    Bahadir ARSLAN http://www.bahadirarslan.com

    Wednesday, September 26, 2012 1:33 PM