WinJS.UI.Flyout HTML on windows phone 8.1

Question

I am trying to create a WinJS.UI.Flyout with a single input field and a single button to allow the user to enter a new value in the input field and click on the button to save it. However, on windows phone 8.1, Flyouts are not supported.

How can I work around that? Is there a way to mimic the behavior of the WinJS.UI.Flyout component on phone 8.1?

Thanks in advance.

Answer 1

I don't think there's a control for that... and I don't think I would want it on a phone. Take a look at the Date & Time pickers from the calendar app, they take you to a new 'page' to input your data.

What you want to do can be achieved with standard HTML, but I'm just not sure I'd want it.

In those cases I'm taking my users to a new page where they enter the needed data.

Answer 2

Personal opinion on architectures here, but I believe that if you're going to have an API that prompts, and you want people to actually use it, you need to make sure it is supported in all environments.

Here's what I use for Flyouts (which I use as pop-up custom prompts that don't navigate the user away from the page):

default.css:

/* Used to help emulate the Flyout when on a Windows Phone device. */
.matting {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: black;
    opacity: 0.6;
    display: none;
}

/* Applied when forcing a Flyout on a Windows Phone device. */
/* Removed when hiding it. */
/* Creates it like a WP dialog. */
.wp-flyout {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    /* The height should be left alone. */
    z-index: 1000;
    display: block;
    opacity: 1.0;
    background-color: dimgray;
}

In the HTML, put this in alongside the WinJS.UI.Flyout divs:

<div id="matting" class="matting"></div>

In the Javascript, alongside the ready and unload functions in the home page define, I have the following two additional functions:

    // Shows a flyout, even on Windows Phone.
    // flyoutId is the WinJS.UI.Flyout structure.
    // launchButtonId is the button that is launching this flyout.
    Flyout: function (flyoutId, launchButtonId) {
        var flyoutElement = document.getElementById(flyoutId);
        if (flyoutElement.winControl) {
            // Windows.
            var launchButton = document.getElementById(launchButtonId);
            flyoutElement.winControl.show(launchButton);
        } else {
            // Windows Phone.
            // Fake it with a dialog.
            var flyout = WinJS.Utilities.query("#" + flyoutId);
            // Show the matting.
            var matting = WinJS.Utilities.query("#matting");
            matting.setStyle("display", "block");
            // Apply click-cancel to the matting.
            matting[0].cancel = function () { that.UnFlyout(flyoutId); return true; };
            matting.listen("click", matting[0].cancel, false);
            // Apply the wp-flyout class.
            flyout.addClass("wp-flyout");
            // Add back-button-cancel event.
            WinJS.Application.addEventListener("backclick",
                matting[0].cancel);
            // Show the flyout.
            flyout.setStyle("display", "block");
        }
    },

    // Hides a flyout, even on Windows Phone.
    UnFlyout: function (flyoutId) {
        var flyoutElement = document.getElementById(flyoutId);
        if (flyoutElement.winControl) {
            // Windows.
            flyoutElement.winControl.hide();
        } else {
            // Windows Phone.
            // We're faking it with a dialog.
            var flyout = WinJS.Utilities.query("#" + flyoutId);
            // Hide the flyout.
            flyout.setStyle("display", "none");
            // Remove the wp-flyout class.
            flyout.removeClass("wp-flyout");
            // Remove the click-cancel from the matting.
            var matting = WinJS.Utilities.query("#matting");
            matting.removeEventListener("click", matting[0].cancel, false);
            // Remove back-button-cancel event.
            WinJS.Application.removeEventListener("backclick",
                matting[0].cancel);
            // Hide the matting.
            matting.setStyle("display", "none");
        }
    }

Note that I use the popular "that = this;" in the ready() function, with a "var that;" up above the home page define in a standard navigation universal app.

Net result: Create your flyouts as normal in HTML. When you want a flyout, you just call:

that.Flyout("flyoutId", "launchButtonId");

This will show the flyout as usual in Windows, but on Windows Phone will now show the flyout as a WP dialog (or close enough to it). If you have Ok / Cancel / etc. buttons in the flyout, make sure you call:

that.UnFlyout("flyoutId");

in place of the normal ".hide()".

Feel free to play around with it, and let me know if you have any improvements.