example on creating a setting FlyOut using javascript ?

Question

example on creating a setting FlyOut using javascript ?

Without any HTML. Thanks. And yes, I know there is an example from Microsoft, but it uses HTML to create the settingflyout.

I see I can create a settingFlyout dynamically using js.

var html = $('<div><h1>This is Setting Header</h1></div>');
                html.appendTo('#body1');

                var object = new WinJS.UI.SettingsFlyout(html.get(0), {});
                object.show();

And also,

 WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = { "help": { title: "Walah"} };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    };

is title, href the only thing I can use for e.detail.applicationcommands ?

I see  I actually create the "help" "link" on the setting charm, but how do I do this -> when I press the "help link", the FlyOut I earlier  created appear.

and lastly, how do I actually use

settingsFlyout.showSettings(id, path);
Thanks. 
So, what I wanted is this.
1. I know how to create the "link" on the setting charms using 
WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = { "help": { title: "Walah", href: 'html/settingPage.html' } };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    };
But this is not what  I wanted, what  I wanted is when I press the above link, it did not go to the href. But it would show the dynamic SettingFlyOut I created earlier using only javascript, this one : 
var html = $('<div><h1>This is Setting Header</h1></div>');
                html.appendTo('#body1');

                var object = new WinJS.UI.SettingsFlyout(html.get(0), {});
                object.show();

.
2. How to use settingsFlyout.showSettings(id, path);

3. is title, href the only thing I can use for e.detail.applicationcommands ?

Answer 1

Here's a gist which I think might be helpful

Make direct command on Metro style app settings (JavaScript)

https://gist.github.com/3104034

For more about how to use settingsFlyout objects, I suggest you read the code of WinJS.UI,

which is a reference javascript library in the metro style app project.

Answer 2

Raymond,

The application settings sample shows you how to do this: http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

If you want to do something dynamic, you can certainly add javascript to the page to do this.  There is no sample of creating a control on the fly (and I am not certain if you can do that)

-Jeff

---

Jeff Sanders (MSFT)