Modal Windows: Which Code Will You Implement Today?

Looking for a way to streamline tasks that engage your end user? Modals are the answer.

If implemented correctly, they are a seamless way to create an effective interface element of brilliant platform design that ultimately helps the user complete items quickly and easily.  However, if poorly executed, you face the risk of frustrating the user and damaging the customer experience.

Let’s draw a clear line in the sand and outline three step-by-step implementation methods for Modal windows. 

By the end of this post, you will: 

1. Understand the effectiveness of Modal implementation 
2. Familiarize yourself with 3 common implementation methods for ServiceNow Modal windows 
3. See examples of code for all 3 Modal methods 

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application’s main window. It creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.

3 Ways to Implement Modal Windows 

METHOD #1: THE BOOTSTRAP WAY 

The Bootstrap framework available in the ServiceNow Portal provides a custom jQuery plugin. This can be utilized to create Modal windows without any JavaScript code.  All you have to do is add the Bootstrap data attributes and classes to the elements in a Widget’s HTML body.  

This method is excellent for simple use cases, such as confirming an action. For advanced functionality, JavaScript can be added to use the methods and events provided by the plugin, listed here. 

The Bootstrap Method 

METHOD #2: THE ANGULAR WAY 

Angular UI Bootstrap is a set of directives for integrating Bootstrap with AngularJS – also available in the ServiceNow Portal. Angular UI Bootstrap provides the $uibModal service that can be injected into a Widget’s client script to create and interact with Modals.  

This method is best for the most complex use cases because it provides the most capabilities. Don’t let it fool you though – it can be more challenging to implement. Find all of the information you need here! 

The Angular Way 

 METHOD #3: THE SERVICENOW WAY 

ServiceNow provides a lightweight wrapper called the spModal class. It simplifies the way we employ Angular UI bootstrap’s $uibModal. You can use spModal.open() to display an embedded widget in a Modal dialog, to show alerts or prompts, and to confirm dialogs in Service Portal widgets. This takes away some of the challenges with $uibModal, but you do lose some flexibility. 

This method is the most common, as it is great for medium to complex use cases. 

The 4 Best Practices for Modal Implementation 

Modal windows should be used sparingly as they interrupt the journey of the user and demand action to be taken. Modals are primarily used when confirming an important action, showing additional information in context, or gathering mandatory input data. 

With that in mind, follow these 4 best practices to ensure a quality user experience. 

1. Modals should always be user initiated. Don’t surprise users with an unexpected Modal as it may just be dismissed as an unwanted popup. 
2. Try to avoid using Modals on mobile views due to the limited screen size potential need for an onscreen keyboard. 
3. Ensure action buttons and expectations are clearly defined. 
4. Don’t forget accessibility! The following ARIA (Accessible Rich Internet Applications) tags can be helpful in creating an accessible modal: Role = “dialog” , aria-hidden, aria-label. For more information on ARIA, check out Smashing’s Magazine article on the topic. 

Written by Ryan Castaldi 

Ryan Castaldi is a senior consultant at Accelare within the ServiceNow practice and a lead contributor to Accelerated Development. An IT innovator with a proven track record of success managing projects and leading teams to meet business objectives. Learn more about Ryan’s expertise and meet the rest of our ServiceNow Partner team!