Windows Store App Development Series : Part 9 – Message Dialog Box

Hello,

Message dialog boxes are common features of any application, irrespective of its operating system platform, application type [windows, web, mobile ], the language used to build the app etc. They are primarily used to draw user attention to some vital pieces of information and often request user to perform some action. For example, a message dialog box shown below informs user that ‘user account will get deleted permanently’ and whether he/she wants to proceed with the operation or not.

ConfirmDialogBox

Another example of dialog box is to just show meaningful information to the user based on some user action. Below dialog box informs user that the ‘account was deleted successfully’. On click on ‘Ok’ button on the dialog box, user can continue to work with the application.

InformationDialogBox

Note the dialog boxes shown above are modal dialog boxes. That means user has to perform some action using the dialog box buttons [Yes, No, Ok etc] to return to the main application. In this article, I will explain how to display modal and modal-less dialog boxes in Windows Store App. I will also explain new WinJS object – Flyout which is used to display modal-less dialog box in Windows Store App.

Modal Dialog Box

Modal dialog box [often referred as modal window] is a UI component which displays meaningful message to the user and at the same time forces user to perform some action to close it before returning the control to main application.

Windows Store App API provides a MessageDialog class, which is primarily used to implement modal dialog box functionality. The dialog box contains a command bar which can support up to three commands. The dialog fades the screen behind it and blocks any events until user responds to it using dialog bar commands.

Lets dive into the code to understand MessageDialog class in detail. In example mentioned below, I have created a very basic Windows Store App using Blank App template. Application displays static text ‘Content To Delete’ and an App Bar command button ‘Delete. On click of ‘Delete’ command button, application displays a confirmation message ‘Do you want to delete the content?’. If user clicks on ‘Yes’ button on dialog box, application deletes the static text. If user clicks on ‘No’ button, delete operation gets cancelled.

default.html

<body>
    <h2 class="header">Modal DialogBox Demo</h2>
    <br />
    <br />
    <div id="contentDiv">Content to delete</div>
    <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'DeleteButton', icon:'delete', label:'Delete'}"></button>
    </div>
</body>

default.js

app.onready = function () {
    var contentDiv = document.getElementById('contentDiv');
    var deleteButton = document.getElementById('DeleteButton').winControl;

    deleteButton.addEventListener('click', function () {
	var dialog = Windows.UI.Popups.MessageDialog("Do you want to delete the content?", "Content Deletion");
	dialog.commands.append(new Windows.UI.Popups.UICommand("Yes", dialogCommandHandler));
	dialog.commands.append(new Windows.UI.Popups.UICommand("No", dialogCommandHandler));
	dialog.defaultCommandIndex = 0;
	dialog.showAsync();
});

function dialogCommandHandler(command) {
	if (command.label === 'Yes') {
		contentDiv.parentElement.removeChild(contentDiv);
	}
}
};

In above JavaScript code, we have implemented ‘Delete’ app command bar button ‘click’ event handler, which displays ‘Do you want to delete the content?’ text using Windows.UI.Popups.MessageDialog class. Next, we have added two command buttons [Yes and No] to the dialog box and associated dialogCommandHandler function to it. The defaultCommandIndex properly is used to set the default focus to the first command button [Yes]. The showAsync method displays the dialog box in asynchronous mode.

Since we have associated dialogCommandHandler function to both ‘Yes’ and ‘No’ command buttons, we need to check which command button has triggered the function. In this case, we are checking the label property of command button and removing the content only if user clicks on ‘Yes’ command button.

Output

01MainApp

02ModalDialogBox

03Output

Modal-less Dialog Box Using Flyout Object

Modal-less dialog box is a UI component which displays meaningful information to the user, however it doesn’t force user to perform some action using it. That means, once its displayed on screen, user can either perform some action on it or can simply access main application features which closes the modal-less dialog box. WinJS control library provides a new Flyout object which provides modal-less dialog box functionality.

In the code sample below, I have shown similar functionality explained above, except this time I have used Flyout object to display modal-less dialog box.

default.html

<body>
    <h2 class="header">Modal-less DialogBox Using Flyout Control Demo</h2>
    <br />
    <br />
    <div id="contentDiv">Content to delete</div>
    <div id="AppBar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'DeleteCommand', label:'Delete', icon:'delete', section:'selection'}"></button>
    </div>

    <div id="Flyout" data-win-control="WinJS.UI.Flyout" aria-label="Content Deletion?">
        <h3>Do you want to delete the content?</h3>
        <button id="OkButton">Ok</button>
    </div>
</body>

HTML code contains three elements – a content div element which displays static text ‘Content to Delete’, a ‘Delete’ app bar command button and a Flyout object. Note HTML div element has been defined as a Flyout object by setting its  data-win-control property to WinJS.UI.Flyout text.

default.js

var flyout;
var deleteCommand;
var okCommand;

app.onready = function (args) {
	deleteCommand = document.getElementById('DeleteCommand').winControl;
	flyout = document.getElementById('Flyout');
	okCommand = document.getElementById('OkButton');

	deleteCommand.addEventListener('click', DisplayFlyout);
	okCommand.addEventListener('click',DeleteContent);
}

function DisplayFlyout() {
	flyout.winControl.show(deleteCommand, 'top');
}

function DeleteContent() {
	var contentDiv = document.getElementById('contentDiv');;
	contentDiv.parentElement.removeChild(contentDiv);
}

JavaScript code defined above is fairly easy to understand. On App ready, we are adding two event handlers DisplayFlyout and DeleteContent. As the name suggests, DisplayFlyout function displays the Flyout control on screen and user can perform some action using it. DeleteContent function gets executed when user confirms delete operation by clicking on ‘Ok’ button on Flyout object. As mentioned earlier, user can close the modal-less window by simply clicking anywhere in the application.

Output

01MainApp

02Modal-less DialogBox

03Output

Summary

In this article, I have explained common functionality available in most of the apps – message dialog boxes. I have also explained how to create modal-less dialog box using new Flyout object provided by WinJs library.

I hope it was useful to you.

Thanks.

1 Comment

  1. Francisco · September 30, 2014 Reply

    Is there a way to prevent the FlyOut to close when the user click away? Behaving more like a modal?
    I tried the beforeHide event but no success. (eventInfo.cancelBubble = true;)

Leave a Reply