Modal Windows: Which Code Will You Implement Today?
by Accelerated Development, on Jun 10, 2020 5:35:12 PM
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 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:
- Realize the effectiveness of Modal implementation
- Familiarize yourself with 3 common implementation methods for ServiceNow Modal windows
- 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. - Wikipedia
3 Ways to Implement Modal Windows
METHOD #1: THE BOOTSTRAP WAY
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.
Example of embedded widget
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.
- Modals should always be user initiated. Don’t surprise users with an unexpected Modal as it may just be dismissed as an unwanted popup.
- Try to avoid using Modals on mobile views due to the limited screen size potential need for an onscreen keyboard.
- Ensure action buttons and expectations are clearly defined.
- 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!