Windows 8 Metro Settings Flyouts Don't Seem To Work In Javascript?

I've recently been trying to create a metro app for Windows 8 and tried to use settings flyout. So I followed msdn quickstart: http://msdn.microsoft.com/en-us/library/windows/apps/

Solution 1:

In your settings.html page, make sure the data-win-control declaration includes setting the name of the commandId - this seems to be missing from the online example.

Eg.

If your js file declares the command as:

e.detail.applicationcommands = { 'serv_changer': { title: 'Change Server', href: 'settings.html' } };

...then make sure your settings.html file references 'serv_changer':

<div data-win-control="WinJS.UI.SettingsFlyout"data-win-options="{settingsCommandId:'serv_changer', width:'wide'}">

Solution 2:

on my app, I have slash slash in my href. so something like this href: '/settings.html'

Also on your settings.html page make sure you have this data-win-control="WinJS.UI.SettingsFlyout"

Solution 3:

Replace your js function

functionsetupSettings() {
    app.onsettings = function (e) {
        e.detail.applicationcommands = { 'serv_changer': { title: 'Change Server', href: 'settings.html' } };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
}

with this:

functionsetupSettings(e) {
        e.detail.applicationcommands =
        {
            "serv_changer":
            {
                title: "Change Server",
                href: "/settings.html"
            }
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }

and also make sure serv_changer is referenced in your settings.html file:

<div data-win-control="WinJS.UI.SettingsFlyout"data-win-options="{settingsCommandId:'serv_changer'}">