Opening a Modal UI Page Inside UI BuilderIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: block; max-width: ; width: auto; height: auto; } } How to replicate a classic UI macro-style modal pop-up within ServiceNow's Next Experience (Workspace) via UI Builder, which allows users to edit or save information in a temporary window? Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: block; max-width: ; width: auto; height: auto; } } Any release Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: block; max-width: ; width: auto; height: auto; } } To replicate the classic UI macro-style modal pop-up, allowing users to edit or save information in a temporary window, within ServiceNow's Next Experience (Workspace) via UI Builder, here are some options you can test: Option 1: Use UI Builder's Built-In Modals and Modeless DialogsServiceNow's UI Builder supports modals directly—both Modal Dialogs and Modeless Dialogs: Modal Dialog: A blocking overlay that forces user interaction before returning to the main page (perfect for focused tasks like editing or confirming).Modeless Dialog: A non-blocking overlay that allows interaction with both the dialog and underlying page, suitable for lightweight edits or reference lookups. How to Implement:Based on the "UI Builder Essentials: Modals and Modeless Dialogs" guide: Open UI Builder → Your Workspace → Record Page (Page Variant).In the Overlays section, add a Modal or Modeless Dialog to your page.Configure its contents—e.g., input forms, buttons, dynamic fields.Setup event mappings:• Use a Button component to trigger opening the modal (via Open Modal Dialog event handler).• Within the modal, configure buttons (Primary/Secondary) to set field values, save the record, and close the modal after use. This approach is fully supported and offers a modern, declarative way to deliver modal interactions without custom scripting. Option 2: Trigger Modals via Agent Workspace's g_modal API or Custom ComponentsIf you're working within Agent Workspace or need to utilize pre-existing UI Pages or custom components: a) Built-in g_modal.confirm for Simple ConfirmationsFor simple yes/no dialogs: g_modal.confirm('Confirmation', 'Are you sure?', function(confirmed) { if (confirmed) { g_form.setValue('state', 'closed_complete'); g_form.save(); }}); This lets you collect confirmation and act accordingly, no full dialog needed. b) Registering a Custom Modal ComponentFor richer UI and more complex interactions: Create a Now Experience Framework component.Deploy it using now-cli.Register it in the sys_aw_registered_scripting_modal table—this associates your component with a unique public API callable via g_modal.global.<yourFunction>().In your Workspace UI Action, invoke this API to open the modal. Note: You'll need to adjust ACLs for the registration table if necessary. c) Embedding a Classic UI Page via Iframe in a ModalIf you have existing UI pages you'd prefer not to rebuild:• Use g_modal.showFrame() to display a UI Page within a modal.• Leverage window.postMessage communication (via helper scripts like iframeMsgHelper) to send data between the iframe and parent window—allowing interaction and closure from within the UI Page. Option 3: Supporting Insights from CommunityA developer shared their approach when transitioning from classic UI: "Instead of launching the UI action directly, I created a declarative action in UI Builder that opens a modal I built—it behaves like my UI Page." This helped display custom content without relying on unsupported techniques. Preferred: Use UI Builder's modal features for modern, declarative UX.For Agent Workspace: Consider g_modal.confirm or register custom components in scripting modal table.Need to reuse old UI Pages? Use iframe modals with postMessage communication. Note: Declarative actions in UI Builder offer a solid hybrid path forward. https://www.servicenow.com/community/next-experience-blog/ui-builder-essentials-modals-and-modeless-dialogs/ba-p/3184395https://www.servicenow.com/community/developer-forum/custom-popup-box-in-agent-workspace/m-p/1865443https://www.dylanlindgren.com/2020/07/22/creating-and-using-modal-components-in-agent-workspace/https://snpro.dev/2023/11/20/workspace-modals-working-with-ui-pages/