Question

I am new to develop Windows 8 app using HTML/Javascript.

I want to create/remove buttons in appbar dynamically.

For example, I have the following appbar div in html.

<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement: 'top'}">
    <button id="button" data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'button', label:'Button', icon:'add'}" type="button">
    </button>
</div>

I want to replace the button triggered by some action, so what I did was replacing the innerHTML of appbar div as follows in js, but what I got was a strange blank square in appbar.

var appbar = document.getElementById("appbar");
var html = "<button data-win-control=\"WinJS.UI.AppBarCommand\" data-win-options=\"{id:'button', label:'Another Button', icon:'add'}\" type=\"button\"></button>";
appbar.innerHTML = html;

Any help is appreciated.

Thanks,

Answer 1

The recommendation for the app bar is to define all of your commands ahead of time and use hideCommands / showCommands to show & hide the commands in the appbar itself.

However, if you DO want to create the commands yourself, dynamically, you only need to add one more step to your code:

WinJS.UI.process(elementThatYouJustCreated);

This will create the win control, and do all the work of getting that control setup.