How to create Settings Flyout using Code? RRS feed

  • Question

  • According to the documentation we need to call 'populateSettings' as shown in the example to get the Settings View.

    WinJS.Application.onsettings = function (e) { e.detail.applicationcommands = { "gameOptionsDiv": { title: "Game options", href: "/html/4-SettingsFlyout-Game.html" } }; WinJS.UI.SettingsFlyout.populateSettings(e); };

    But I do not have any HTML for settings, I want to generate all using code. How do I do that? What can I pass in place of 'href'?

    Monday, August 6, 2012 5:23 AM


  • WinJS.UI.SettingsFlyout.populateSettings is actually just a convenience helper for creating a settings page from a piece of HTML. If you look at the implementation of this in WinJS's ui.js file, you'll see that it just uses WinJS.UI.Pages.render to take the href you give and load those contents a child elements of the settings pane. What this means is that where it does WinJS.UI.Pages.render, you can create whatever element hierarchy you want using whatever means.

    You can walk thought the code in ui.js to see how it's done, which will give you an idea how to create a handler for your own.

    Probably the easiest way to do this is to have a container WinJS.UI.SettingsFlyout control in your markup like so:

    <div id="settingsContainer" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'setThisAtRuntime', width:'wide'}">
    This would give you a div in the DOM with the basic SettingsFlyout structure (assuming you call WinJS.UI.processAll). In your command handler, then, obtain this div from its ID (call it element) and populate it with whatever children you need, then call element.winControl.show() (the SettingsFlyout.show method). You'll want to set the settingsCommandId and width appropriately, of course, or you could declare a container like this for each command you need to handle in this way.


    Friday, August 10, 2012 7:15 PM