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

    Wednesday, March 07, 2012 4:01 AM

Answers

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

    • Edited by phil_ke Tuesday, March 27, 2012 1:28 PM
    • Marked as answer by Bob_Bao Tuesday, April 10, 2012 3:43 AM
    Tuesday, March 27, 2012 1:27 PM
  • 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)

    Wednesday, March 07, 2012 8:31 PM
    Moderator

All replies

  • 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)

    Wednesday, March 07, 2012 8:31 PM
    Moderator
  • 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é.

    Monday, March 26, 2012 5:54 PM
  • 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.

    • Edited by phil_ke Tuesday, March 27, 2012 1:28 PM
    • Marked as answer by Bob_Bao Tuesday, April 10, 2012 3:43 AM
    Tuesday, March 27, 2012 1:27 PM