Question

I am trying to have a login button in appsbar, once I click it, a login for (flyout) will appear. I have tried : html:

<!-- APPBAR -->
<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLog', label:'Login/Logout', icon:'placeholder',section:'global',flyout:select('#loginFlyout')}" type="button"></button>
</div>
<!-- APPBAR FLYOUT -->
<div id="loginFlyout" data-win-control="WinJS.UI.Menu">
    <form id='register' method='post'
        accept-charset='UTF-8'>
        <fieldset>
            <legend>Login</legend>
            <label for='username'>UserName:</label>
            <input type='text' name='username' id='username' maxlength="50" />
            <label for='password'>Password:</label>
            <input type='password' name='password' id='password' maxlength="21" />
            <input type='button' name='Submit' onclick="logincheck()" value='Submit' />
        </fieldset>
    </form>
</div>

Im gettting this:
JavaScript runtime error: WinJS.UI._Overlay.MustContainCommands: Invalid HTML: AppBars/Menus must contain only AppBarCommands/MenuCommands

I am guessing I can’t have <form .../> in it. Is there a workaround to this? or any advice , Thanks alot.

Answer 1

I forget what the WinJS.UI.Menu looks like, but have you considered using a SettingsFlyout, or creating your own ModalDialog?