Creating an appbar in JavaScript Code


  • //create appbar:
            createAppBar: function () {
                var appbarObject = new WinJS.UI.AppBar(myAppBar);  //myAppBar is an HTML element to hold appbar
                //var result = document.querySelectorAll('div[data-win-control="WinJS.UI.AppBar"]');  //Difference between this and getElementById?????
                var result = document.getElementById("myAppBar").winControl;
                return result;
            setAppBarOptions: function () {
                var appBar = this.createAppBar();
                var buttons = { "label": "add", "id": "b1" };
                var b = document.createElement("button");
                var appBarCommand;
                appBarCommand = new WinJS.UI.AppBarCommand(b, buttons);
                appBar.appendChild(b);   //object doesn't support property or method.


       I'm trying to add an appbar in JavaScript code, so I can show only required buttons on a specific page. Following code gives error "object doesn't support property/method".  How to do this?

    Above two functions are written in default.js of navigation template. default.html contains


    div id="myAppBar"></div>

    And setAppBarOptions function is called after  args.setPromise(WinJS.UI.processAll().then(function () {   //this lines.

    Tuesday, April 16, 2013 8:25 PM


All replies


       I got it right..

    use appBar.commands = appBarCommand instead of appBar.appendChild(b);  statement.

    Tuesday, April 16, 2013 8:51 PM
  • Hi SonalMac,

    If the appbar command buttons in all pages (of your Windows Store app) can be predefined, you can also consider the following approach:

    • Declare all the appbar command buttons in the default.html page's markup and set all the command buttons to disabled status
    • In each page's "ready" event, you can enable the certain appbar command buttons according to the current page
    • And in each page's "unload" event, you can disable the certain appbar command buttons again.

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, April 19, 2013 1:49 AM