UI Builder - Modals

#UI Builder , #Quebec Release , #Now Experience , #UI Builder Bytes

Brad Tilton

3 minute read

This week in our UI Builder Bytes series we’re going to take a look at modals. You can access past posts at the UI Builder Bytes tag.

So What is a Modal?

A modal (also called a modal window or lightbox) is a web page element that displays in front of and deactivates all other page content. To return to the main content, the user must engage with the modal by completing an action or by closing it. Modals are often used to direct users’ attention to an important action or piece of information on a website or application.

The purpose of a modal is to have your user focus on one thing on the page before doing anything else. On some sites this may be a popup prompting you to turn off your adblocker or sign up for a newsletter. Generally, you have to interact with the modal before you return to the main page, whether that’s filling out a field and submitting or just closing the modal.

There are already a number of ways to popup a modal in ServiceNow depending on what UI you’re working in by using the spModal, GlideModal, or GlideModalForm APIs. One drawback to these methods is that they all need to be called and configured through scripting.

Modals in UI Builder

Creating and displaying a modal in UI Builder is a little different than the rest of the platform. Creating a modal is as simple as adding a component to your canvas and configuring its slots and properties via the UI. There are, as of the Quebec release, six types of modals you can add in UI Builder. They’re detailed well in the Modals in UI Builder docs page so I’ll just list them.

  • Alert
  • Confirm
  • Confirm and destroy
  • Custom
  • iFrame
  • Modal viewport

We’ll take a closer look into a couple of these.

Confirm Modal

In this video I’ll create a button that pops up a confirm (ok/cancel) modal.

Our rough steps were:

  1. Add a button component
  2. Add and configure a modal component
  3. Add an event handler to the modal component that shows a message on confirm
  4. Add an event handler to the button component that pops the modal

Custom Modal

In last week’s Live Coding Happy Hour, we created a custom modal that does takes in an input and creates a record based on that.

The actual modal dev starts around the 14:20 mark.

More Resources

Make sure to check out the previous posts in this UI Builder series, and stay tuned for more posts every Wednesday through mid-March.

Have a UI Builder topic you’d like me to hit in a future post? Let me know on Twitter, LinkedIn, or sndevs.com slack (@btilton).

Comments