CODEWITHSUNDEEP
javascripthtmlwinjsuwp
Kešu
Kešu

Reputation: 92

Show commands' labels in AppBar with More button

So I've got myself an AppBar in my WinJS UWP app

<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{ closedDisplayMode : 'compact', placement:'bottom'}">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'flyoutButton',
        type:'flyout',
        label:'Třída',
        icon:'otheruser',
        flyout:select('#classFlyout')}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'flyoutButton',
        type:'flyout',
        label:'Schovávání hodin',
        icon:'calendarday',
        flyout:select('#hidingFlyout')}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'moreButton',label:'More',icon:'more',section:'primary',tooltip:'Show more'}"></button>
</div>

It has two flyouts and a button. When I click the button, I want the the other commands' labels to be visible - as in the Win10 Weather app.

I've tried to create a function, that would change the appbar's closedDisplayMode to 'full'.

WinJS.UI.processAll().done(function () {
    appBar = document.getElementById("appBar");
});

function addListeners() {
    document.getElementById("moreButton").addEventListener("click", openCloseAppbar, false);
}

function openCloseAppbar() {
    appBar.closedDisplayMode = 'full';
}

That, however, doesn't work. Is there an other way this is usually done that I'm missing? (Because for some reason I can't find any documentation on it.) Or am I just doing it wrong..?

Upvotes: 0

Views: 198

Answers (1)

Kešu
Kešu

Reputation: 92

The correct way to do it was apparently this:

appBar.winControl.closedDisplayMode = "full";

(Emphasis on .winControl.)

Upvotes: 2

Related Questions