Low-Code HTML Popup in ServiceNow Using UI Builder Instead of GlideModal

iftekharmir
Tera Contributor

Traditionally in ServiceNow, developers use GlideModal and UI Pages to display HTML content inside a popup. While this works well in the classic UI, it involves scripting and maintenance overhead.

With UI Builder (Next Experience), the same functionality can be achieved in a cleaner and low-code way by using a Custom Popup along with the Document Display component configured as HTML.

This approach eliminates the need for GlideModal and provides a more modern, scalable solution.

Traditional Approach (Using GlideModal)

Earlier, to show HTML in a popup, developers typically:

  • Requires scripting
  • Is tied to the classic UI

  • Is less aligned with Next Experience / UI Builder

Modern Approach (UI Builder + Document Display Component)

Instead of using GlideModal, we can achieve the same result using UI Builder by configuring the Document Display component to render HTML inside a Custom Popup.

This method is:

  • Low-code

  • UI Builder compatible

  • Easy to configure

  • Reusable and maintainable

Step 1: Create a Custom Popup in UI Builder

  1. Navigate to UI Builder

  2. Open your Experience and Page

  3. Go to the Modals & Popups section

  4. Click on Create Custom Popup

    iftekharmir_0-1771491841347.png

     

Step 2: Add the Document Display Component

  1. Open the created Custom Popup

  2. Click Add Component

  3. Search for Document Display

  4. Select the Document Display Component

iftekharmir_2-1771492060440.png

Step 3: Configure Document Display as HTML

  1. Select the Document Display component

  2. Go to the Configure panel on the right

  3. Set Document Type = "HTML"

  4. Enable the checkbox Enable Editing

This configuration allows the component to accept and render HTML content inside the popup.

iftekharmir_3-1771492193490.png

Step 5: Trigger the Popup

You can trigger the popup using:

  • Button click event

  • Action handlers

  • Client state variables

  • Event mapping in UI Builder

iftekharmir_4-1771492306454.png

Output: Popup Display After Button Click

Once the button is configured with the action to open the Custom Popup, clicking the button will display the popup containing the HTML content rendered through the Document Display component.

iftekharmir_5-1771492581928.png

Conclusion

Instead of relying on GlideModal and UI Pages to display HTML content in popups, ServiceNow developers can now leverage UI Builder’s Custom Popup with the Document Display component.
This modern approach is cleaner, low-code, and fully aligned with the Next Experience framework, making it a recommended solution for new implementations.

 

Regards,
Iftekhar Baig Mirza

If you found this article useful, please mark it as helpful.

 

0 REPLIES 0