Windows 8.1: WinJS: appbar won't open/show by default?

Question

I'm working on a Windows 8.1 app and on a data input page I would like the appBar to be open or visible by default as it contains the option to save the data.

http://msdn.microsoft.com/en-us/library/windows/apps/br229676.aspx

I've looked at the link above and tried the show method in the following way:

Markup:

<div id="appbarCommands" data-win-control="WinJS.UI.AppBar" data-win-options="{sticky: 'true'}">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdSaveCustomer', icon:'save', section:'global'}"
            data-win-res="{winControl: {label:'CRM_contactHistory_appBar_SaveLabel', tooltip:'CRM_contactHisory_appBar_SaveToolTip'}}"></button>
</div>

JS Code:

(function () {
        "use strict";

    WinJS.UI.Pages.define("/pages/CRM/customerDetails/contacts/contactHistory/contactHistory.html", {

        ready: function (element, options) {

            WinJS.UI.processAll().done(function () {

                setAppBarState(document.getElementById("appbarCommands"));

            });
            WinJS.Resources.processAll()            
        }
    });
})();

function setAppBarState(appBar) {

    appBar.winControl.show();

}

For whatever reason, the appBar doesn't launch. I've tested it in the appBar sample code and it works fine on there, but it doesn't work in the actual solution.

I wondered if someone could perhaps shed some light on the problem? Or perhaps knows of a reason that would prevent the appbar being shown when the page loads?

Many thanks

Chris

Answer 1

Through a lot of messing around and changing of values, I've got it working. It turns out that all appBars need to have Unique ID's regardless of the page they are on otherwise the properties of one are inherited from others on previous pages.

I've gone through the app and namespaced the ID's based on the page name and all the appBars now work as they should!

What a palava!

Answer 2

Add the sticky property in your data-win-options in the HTML:

data-win-options="{ sticky: true }"

Then using show() should work just fine. I tested this in the HTML Appbar control sample and it worked.

Also, you don't need to call WinJS.UI.processAll within the ready method--processAll is called automatically when a page control is loaded. (The same is not true for WinJS.Resources.processAll, just UI.processAll.)