Win8 / WinJS Pop Up Control with List View - windows-8

Question

In a Win 8 / WinJS / StoreApp - What is the recommended way to make a modal dialog that has a listview where users can select items?
For example, say I have a page with a to do list (listview). There is an app bar with a button that should open some kind of dialog from which the user can select items from previous days displayed in a listview.
I looked at the MessageDialog, but that doesn't seem to let you have a listview (or any content) inside the MessageDialog.
The other option seems to be the Flyout Control, but I haven't found a way to make it modal. Any other options?
What I would like is something like the Bing Finance application when you add a security to the watchlist. That control seems to be a MessageDialog where you can have other controls nested inside.
Thanks for any help!

Answer 1

If your app cannot continue without the user input then a modal dialog is appropriate. It's often times better, however, to design your user input such that the input is not absolutely required. This allows you to give the user the ability to "light dismiss" the dialog (touch anywhere outside it to make it go away).
I highly suggest the latter. In classic user input scenarios, the user was asked for a bunch of stuff at once and they felt locked in until they got it all just right. In a more modern scenario, a user is allowed to create a new widget in one touch. The widget is created with a number of defaults and the user can then go fill in the important data. Obviously the widget is not ready for "submission" (whatever that might mean in your app) until all of the required data is on it, but a user feels better being able to drop out of input mode to do some more research or whatever it might take.
So, I suggest you use a flyout for the interaction you've mentioned. If the user clicks to fly it out and then touches outside, it just disappears. If you must make it modal for some reason, then I suggest creating your own custom MessageDialog. That would really just be a matter of creating a full screen grid with three rows. The top and bottom rows would be black with partial opacity and the middle row would be your dialog. The black rows would effectively dim the background and indicate to the user that this is modal and they must respond with user input and/or a command button to dismiss it.
Hope that helps.
You can find me online at codefoster.com
Have a look at free app codeSHOW for learning Windows 8 development

Answer 2

I personally haven't felt very comfortable with the inline data collection flyouts. I have decided to build my own modal controls with my own grid structure layout and design.
One thing to note is if you go the custom route you will want to use data-win-options to set the placement of your modal otherwise you will get some odd keyboard behaviors with the flyout keyboard.
As a UX designer, by trade I'm carefully evaluating each of the controls and determining what works best in each scenario. Like Jeremy said above (love the show). I started by identifying how much information I intend to collect and does collecting this information on another screen interrupt my flow. So a "locked" modal which can be dismissed from a button or taping outside the modal appears to be the best approach.
<style>
.customModal
width:500px
height:375px;
display: -ms-grid;
-ms-grid-columns: 100px 1fr 100px;
-ms-grid-rows: 100px 1fr 100px;
}
.CustomModalGridTitle {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}
.CustomModalGridContent {
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}
etc.....
</style>
<div class="customModal" id="customModal" data-win-control="WinJS.UI.Flyout" data-win-options="{ placement : bottom;}" >
<div class=customModalGrid>
<div class="CustomModalGridTitle"></div>
<div class="CustomModalGridContent"></div>
<div class="CustomModalGridButtons"></div>
</div>
</div>
Then I would use the grid layout tool on MS to help you construct your display grid and make it a bit more reusable: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm
That's the approach I have taken:). Y ou will of course need to setup your event listeners in your js to fire the customModal. Somewhere in your ready in yourpage.js
// Show the flyout
function showFormatTextFlyout() {
var myCustomModal = document.getElementById("formatTextButton");
document.getElementById("#customModal").winControl.show(myCustomModal);
}
// You may want the
If you have an outer div you can set it to 100% width and essentially mimic the Dialog control for user authentication.