CODEWITHSUNDEEP
javascriptwindows-8windows-runtime
Junya Ishihara
Junya Ishihara

Reputation: 35

How to replace a button in appbar on windows 8 app using HTML/Javascript?

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,

Upvotes: 2

Views: 2192

Answers (2)

Dominic Hopton
Dominic Hopton

Reputation: 7292

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.

Upvotes: 2

Nathan Kuchta
Nathan Kuchta

Reputation: 14172

Instead of setting the value using raw HTML, you should consider using the properties on the AppBarCommand object.

var cmd = document.getElementById('button'); 
cmd.winControl.icon = 'add'; 
cmd.winControl.label = 'Another Button';

The AppBar control sample on MSDN shows this in depth: http://code.msdn.microsoft.com/windowsapps/App-bar-sample-a57eeae9/

Upvotes: 1

Related Questions