Why ready function on my SettingsFlout not getting hit? RRS feed

  • Question

  • I have implemented a SettingsFlyout. From the view of this flyout, my app collection some info from user (firsname) and want to store it in roaming settings. This information get stored when user clicks a button the settings view and retrieved when in the beforeShow event for the flyout. These two events are setup in the ready function of the SettingsFlyout itself but for some reason this ready function is not been called. As a result the events are not result and not been invoked. Let me show you the code now. Here is what I have in default.html

    app.onsettings = function (e) {
            e.detail.applicationcommands = {
                "test": {
                    href: "/pages/settings/test/test.html",
                    title: "Test"

    Here is the test.html itself.

    <!DOCTYPE html>
            <link href="/pages/settings/test/test.css" rel="stylesheet" />
                data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{settingsCommandId:'test',  width:'narrow'}">
                <div class="win-header">       
                    <div class="win-label">test</div>
                <div class="win-content">
                    First Name: <input id="firstname" />
                    <br />
                    <input type="submit" value="Save" />

    Here is the test.js file.

    (function () {
        "use strict";
        WinJS.UI.Pages.define("/pages/settings/test/test.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
                var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
                var divtest = document.getElementById("test").winControl;
                var firstname = document.getElementById("firstname");
                document.getElementById("submit").onclick = function (e) {
                    roamingSettings.values["firstname"] = firstname.value;
                divtest.addEventListener("beforeshow", function () {
                    firstname.value = roamingSettings.values["firstname"];
            unload: function () {
                // TODO: Respond to navigations away from this page.
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />
                // TODO: Respond to changes in viewState.

    What am  I doing wrong here and how can I ready function called?

    Friday, June 28, 2013 4:07 AM

All replies

  • I cannot see test.js defined in your test.html ... you need to add

    <script src="/pages/settings/test/test.js"></script>

    next to your stylesheet definition.

    Friday, June 28, 2013 10:05 AM