how to add new options in settings (charm) in Metro using javascript ?

Question

The documentation in Windows.UI.ApplicationSettings only tells how to show the settings.

Like maybe :

 WinJS.Utilities.ready(function () {

                    $('#p2').click(function () {
                        Windows.UI.ApplicationSettings.SettingsPane.show();
                    });

                });

Works nice and all that, the problem is i want to add settings : "difficulty", with choice of easy, normal, hard. 

How ?

Answer 1

am i the only one that thinks http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.applicationsettings.aspx is lacking depth, examples, and sometimes even gives a wrong code ?

For example :

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.applicationsettings.settingspane.show.aspx

^ gives an example of a settingsPane object calling method show(). That is nice and all that, the problem is, it does not work. The real working one is:

Windows.UI.ApplicationSettings.SettingsPane.show();    // Static method, not instance method.

and http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.applicationsettings.settingspane.getforcurrentview.aspx

 ^ the problem is that there is no settingsPane object, it does not have any method or property, and settingsPane.show() does not work.

Answer 2

I totally agree that the documentation is lacking depth.  Some of it seems auto-generated.

I find the samples are a little better.  Check out http://code.msdn.microsoft.com/windowsapps/.  You can filter down to javascript samples and just search for what you are looking for. 

In terms of adding an item to the settings pane.  You need to subscribe to the onsettings event and add the application commands object.  I grabbed this from the App Settings sample:  http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

  WinJS.Application.onsettings = function (e) { 
            e.detail.applicationcommands = { "help": { title: "Help", href: "/html/2-SettingsFlyout-Help.html" } }; 
            WinJS.UI.SettingsFlyout.populateSettings(e); 
        }; 

---

Dave Paquette @Dave_Paquette www.davepaquette.com

Answer 3

Thanks Dave ! I really appreciates it.