Windows 8 Metro Settings Flyouts don't seem to work in Javascript?

Question

Hello,

I've recently been trying to create a metro app for Windows 8 and tried to use settings flyout.

So I followed msdn quickstart: "Quickstart: Adding app settings using Windows Library for JavaScript"

However, I can't make it work.

Here's the part where I add the settings flyout:

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

function setupSettings is called only once when I press a button (so I can make sure it only gets executed once)

Here's my issue: after pressing the button, the "Change Server" link does appear. However, when I click on it, nothing happens and the side window just fades out.

Here are the things I tried so I know it's not one of these:

• It is not the file missing. I tried to put a different file that didn't exist and an exception was thrown and the program crashed. Here, it does not crash.
• The HTML is properly coded, as I tried to replace settings.html by one of Microsoft's example settings file.

I am having troubles figuring out why it does not work.

Could somebody help (I can provide more code if needed) ?

Thank you.

Answer 1

Does the SettingsFlyout div in your settings.html file have the id "serv_changer"? They need to match.

<div id="serv_changer" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Settings flyout"
        data-win-options="{width:'narrow'}">

Answer 2

You sir, are my hero. Thank you really for answering so fast and so precisely. I did not know that. Maybe it should be precised somewhere in bold on the quickstart page :)

Thank you very much, really.

Answer 3

Glad I could help. I struggled with this one myself. The documentation wasn't very clear...