Good Practices for Using Dialogs in IBM BPM

The Dialog control from the Dashboards toolkit gives you a great tool for creating pop-ups and dialogs in IBM BPM 8.x. This post describes a few practices that help get the most out of the control to increase user experience and make development easier.

Dialog Container

When using Dialogs they take up a lot of empty space in the Coach. Once they are opened, the empty space collapses and will remain collapsed subsequently. However, the initial space before the first use is quite annoying. Especially when using many Dialog controls the empty space adds up to a large area. This can be prevented easily by using the following pattern:

  1. Add a Vertical Section at the end of the Coach.
  2. Under HTML Attributes add a style attribute with the value display:none.
  3. Put all Dialog controls inside this section.

Note that if you use the new client-side human services this will make the section disappear in the web-based designer! This is obviously not ideal for development. In this case assign a class or Control Id and use that for some CSS via a Custom HTML element which is not executed during authoring time.

If you happen to use a custom template Coach View it makes sense to incorporate the dialog container into the template. This makes it very easy for those working with the template to put the Dialogs into their appropriate place without the hassle of creating a specific container on each Coach.

Close Button

Users expect to have a Close or Cancel button to close the dialog window. By default dialogs have a small X icon at the upper right-hand side corner to do this. A better user experience is a proper button similar to what users are known from their operating system. Unfortunately, you cannot simply use a stock button and bind it to the same Boolean variable as the dialog, because when clicked, buttons always set their bound variable to true – they don’t switch the value. However, it is quite simple to build a custom coach view that creates a button which will switch its bound variable, which then closes the dialog.

Dialog Content Wrapper

If your dialog contains numerous controls it may make sense to create a Coach View that wraps all the content. This can be either a composite Coach View that directly contains the specific controls for reuse. But it can also be a generic Coach View with a Content Box, similar to how you would build a Coach View template. The template can then already include the Close button. In both cases the Content Wrapper Coach View provides a way to control what is going on in the dialog, e.g. by implementing “open” and “close” handlers.

“Open” and “Close” Handler

Sometimes you need to perform certain actions when the dialog is opened and when it is closed again. If you use a Dialog Content Wrapper as described above, this is easily possible. Give the wrapper a configuration option (or binding) for a Boolean variable called showDialog and assign to it the same variable as the dialog’s binding. So whenever the dialog opens and closes, that variable is changed, and you can handle it in the wrapper Coach View’s change event handler:

if(event.type == "config"){
	if(event.property == "showDialog" && event.newVal != event.oldVal){
		if(event.newVal == true){
			console.log('The dialog is opening...');
		}
		if(event.newVal == false){
			console.log('The dialog is closing...');
		}
	}
}