SettingsFlyout - how to populate controls

Question

Hi I am using the new SettingsFlyout control for the settings charm. I am using this code to call the settings page:

        WinJS.Application.onsettings = function (e) {
            e.detail.applicationcommands = { "settingsDiv": { title: "Configuration", href: "/html/settings.html" } };
            WinJS.UI.SettingsFlyout.populateSettings(e);
        };

On the settings.html file I have a dropdown control (HTML SELECT) that needs to be populated dynamically from an array of values and the selected option must correspond to a localSettings variable, when the dropdown changes that localSettings variable must be updated.

I tried several ways to populate dropdown control but it seems that any changes made after "WinJS.UI.SettingsFlyout.populateSettings" line does not affect the flyout.

How is the correct way to populate controls in the SettingsFlyout dynamically?

Thanks.

Answer 1

You would do that in the js behind your page.

See the sample:

http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

Scenario 4 is a good starting point.  Populate your controls in the js file referenced by the html page.

---

Jeff Sanders (MSFT)

Answer 2

Hi Jeff, thanks for the reply. I followed the example, and added code to populate dropdown in "beforeshow" event of the settings flyout control but the dropdown remains empty as its inicial state.

What I did to solve this, and I am not sure if it is a correct solution, is to add a Page Control to the solution and use that page as the settings page. Then on the "ready" function of the PAge control I added the code to initialize dropdown.

Is this a good approach for a settings page?

Thanks,

José.

Answer 3

Yes, you can also use the WinJS.Pages.define("/html/settings.html")
to register a Page object with a "ready" function that will be called whenever the settings fragment is loaded.

Works better and is cleaner than this awkward mixing of script code into markup like in the sample code.