Low-Code HTML Popup in ServiceNow Using UI Builder Instead of GlideModal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
2 hours ago
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
Navigate to UI Builder
Open your Experience and Page
Go to the Modals & Popups section
Click on Create Custom Popup
Step 2: Add the Document Display Component
Open the created Custom Popup
Click Add Component
Search for Document Display
Select the Document Display Component
Step 3: Configure Document Display as HTML
Select the Document Display component
Go to the Configure panel on the right
Set Document Type = "HTML"
Enable the checkbox Enable Editing
This configuration allows the component to accept and render HTML content inside the popup.
Step 5: Trigger the Popup
You can trigger the popup using:
Button click event
Action handlers
Client state variables
Event mapping in UI Builder
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.
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.
