Iframe Scripting Freezes During Constellation DX Modal Refreshes

General
1

Hi everyone,

I’m currently working on a proof-of-concept where we are embedding a Pega workflow within a external portal using Constellation UI and the DX API. For the most part, the integration is working smoothly, but I’ve hit a roadblock with how custom iframe-embedded components behave during modal dialog refreshes.

Whenever a user submits a local action inside our embedded view, the parent modal refreshes, but any custom script-heavy elements inside the embedded layout fail to reload their initial states. The page doesn’t crash, but the UI thread seems to block execution, leaving the iframe content blank until a full manual browser refresh is triggered.

I’ve been testing several external scripting sandboxes and runtime managers to see if we can force these frame scripts to reload asynchronously without locking the DOM. While exploring how other frameworks handle lightweight script execution on mobile and web front-ends, I came across the setup to see if their background thread management could point me in the right direction. They offer a free download of their scripting tool which handles complex execution routines quite smoothly, and I’ve been analyzing their method of keeping the UI responsive under heavy loads.

Has anyone dealt with this kind of frame-rendering freeze when using Constellation DX components? Are there specific event listeners or refresh actions I should hook into inside Pega to ensure the embedded scripts are cleanly re-initialized after a modal submit?

I’d love to hear how you guys manage background script lifecycles in custom DX views. Thanks in advance!

4

This does not sound like a Pega-supported background thread problem so much as a custom iframe/script lifecycle issue during Constellation refresh. In Constellation and DX API patterns, a local action submit can trigger a Refresh action or form refresh that re-renders part of the UI, and custom embedded script-heavy content inside that region may need to be explicitly re-initialized after the refresh because the DOM subtree is effectively recreated.

The most likely issue is that your custom iframe or embedded script container is inside the portion of the modal that gets refreshed after submit. When that happens, the old DOM node is removed and recreated, but your external scripts are not reattached or reinitialized cleanly, so the embedded content appears blank until a full page reload happens

My recommendation is to avoid putting script-heavy custom runtime content directly inside a region that Pega refreshes frequently. If you must do it, treat the embedded content as a component with a full mount/unmount lifecycle and re-run its initialization logic after every modal refresh. identify exactly which Constellation action or modal submit is triggering the refresh, keep the iframe/component outside the refreshed subtree if possible or rebuild the embedded content on every refresh instead of assuming the original script context survives.