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.

Burrow

Answer 1

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.

Fina

Answer 2

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.

Pacificism

Unfortunately I couldn't find any proper controls for that so I had to go the HTML way. I had to create a couple of Div elements and style them the way a normal Flyout would look. The only problem in doing so is that, a Flyout blocks user interaction until the user clicks on any of the buttons on the Flyout (Ok/ Cancel). – Burrow

However, if you decide on going the HTML route to mimic the Flyout behavior, you'll have to force the user to stop interacting with the app till he dismisses the created Div element (Custom Flyout). The easiest way to do that would be by overlaying another Div element with a higher "z-index" on all the other elements on your page. This way the user won't be capable of interacting with anything since the overlay is covering everything. – Burrow

that's why I mentioned taking the user to a new panel, where everything he has is your 'flyout' data (like the XAML date and time pickers) – Pacificism