3

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/hh780611.aspx

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);
    }
}

The 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.

Iron
  • 31
  • 1

3 Answers3

2

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'}">
Matt Daniels
  • 31
  • 7
0

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"

Chadit
  • 965
  • 2
  • 12
  • 27
0

Replace your js function

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

with this:

function setupSettings(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'}">
kalpetros
  • 983
  • 3
  • 15
  • 35