Showing Settings pane and subscribing to hide event

Question

I have been looking through a bunch of sample code online but haven't been able to find an example that addresses what I'm trying to do, so I figured I would ask here.

I want to show the Settings pane and subscribe for the "beforehide" event but I don't know how to do it.  I understand that WinJS.UI.SettingsFlyout.show() and that WinJS.UI.SettingsFLyout.addEventListener is not static.  So it seems like I have to instantiate a WinJS.UI.SettingsFlyout, subscribe to the "beforehide" event, then show it.  However, my attempts to do this have been successful.  Here is my latest draft that does not work:

var settingsFlyout = new WinJS.UI.SettingsFlyout(document.createElement(document.uniqueID), {});
settingsFlyout.show();
settingsFlyout.addEventListener("beforehide", function (e) {
   // Etc...
});

Answer 1

You can do this in the HTML. Here is how I do it.

<div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Blu settings flyout" data-win-options="{ settingsCommandId: 'defaults', width: 'wide', onbeforeshow: appSettingsOnBeforeShow }" id="appSettingsFlyout">

You can sub onbeforeshow with onbeforehide.

---

T.A., Apexa, www.apexa.co

Answer 2

Thanks for the help.  Does anyone know of a way to do this only in JavaScript?

Answer 3

What JavaScript would I use in order to be able to launch this thing?  I want to get to the top-level settings page, same as if the user hit Charms > Settings or if I invoked WinJS.UI.SettingsFlyout.show().  If I do:

var settingsFlyout = document.getElementById("appSettingsFlyout");
settingsFlyout.winControl.show();

I only see whitespace.