Howto: Programmatically add AppBarCommand to Windows Phone 8.1 app

Question

I have a Windows Store app that uses the following code to add AppBarCommands and that code does not work on Windows Phone 8.1

function showBars() {
    var appBar = document.createElement('div');
    var command = document.createElement('button');

    new WinJS.UI.AppBar(appBar);
    new WinJS.UI.AppBarCommand(command, { label: 'Hello', icon: 'add' });

    appBar.appendChild(command);

    document.body.appendChild(appBar);
}

I also created the simplest Universal app which show how that code works fine on the Windows Store app while it does not show any command on the Windows Phone app.

Is it even possible to add commands programmatically?

Answer 1

Instead of appending the command element to the appBar element, you'll have to add the command control to the appbar control. This can be done by setting the commands property of the appbar.

Like this:

function showBars() {
    var appBar = document.createElement('div');
    var command = document.createElement('button');

    var commandObject = new WinJS.UI.AppBarCommand(command, { label: 'Hello', icon: 'add' });

    new WinJS.UI.AppBar(appBar, { commands: [commandObject] });

    document.body.appendChild(appBar);
}