locked
Adding Settings Flyout to all pages

    Question

  • Hi. Is there an  easy way of programatically adding the settings flyout to all pages?  I have moved a lot of my common code to a single JS file and the settings appear on all pages however when I click on the settings items it throws an error because of the navigation click handler. 

    JS

    WinJS.Application.onsettings = function (e) {
            e.detail.applicationcommands = {
                "about": { title: "About", href: "html/about.html" },
                "settings": { title: "Settings", href: "html/settings.html" }
            };
            ;
            WinJS.UI.SettingsFlyout.populateSettings(e);
        };
    As you can see i have the path hard coded and it may not always be the same depending where you are in the application.  Is there a way to set it to the root of the application so no matter where I am in the application it can navigate to the settings pages?  Is there a better way of doing this?


    www.techtronic.us - My App www.spaceweatherapp.com

    Wednesday, June 12, 2013 2:14 PM

Answers

  • Hi,

    You almost have it, just add a "/" to the href:

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

    This is assuming you are running this code on your default.js on the "activated" handler.

    Wednesday, June 12, 2013 3:16 PM

All replies

  • Hi,

    You almost have it, just add a "/" to the href:

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

    This is assuming you are running this code on your default.js on the "activated" handler.

    Wednesday, June 12, 2013 3:16 PM
  • With / you make an absolute reference within the app package, so this code should work from anywhere including page controls. For settings that apply throughout the app, though, default.js is clearly the best place.
    Wednesday, June 12, 2013 4:23 PM
  • Thanks all.   Thanks for pointing out the absolute reference vs. using relative.  I am working with cordova and forgot that cordova's root is www.  I didn't mention that in my original post.  Here is what I ended up using in case anyone runs into the same thing.

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

    www.techtronic.us - My App www.spaceweatherapp.com





    Monday, June 17, 2013 2:42 PM
  • app.onsettings = function (e) { e.detail.applicationcommands = { "authorDiv": { title: "Author", href: "../pages/settings/author.html" }, "introductionDiv": { title: "Introduction", href: "../pages/settings/introduction.html" } }; WinJS.UI.SettingsFlyout.populateSettings(e); }

    A big thank you for this thread. I had my code just one character wrong and couldn't understand why I was only getting one option showing.

    Does anyone have their *.css file they can post, as I have a weird white line at the start of my flyout?



    Tuesday, October 1, 2013 11:23 AM