Need help on Sending Value to iframe UI builder

R Dhanush Kumar
Giga Guru

yesterday

RDhanushKumar_1-1769666112108.png

 

in workspace added a iframe "zen_recommendation_widget" , want to send/set the short description value as
input

in native ui : 

 iframe.contentWindow.postMessage(
                    { action: "live_suggestion", query: shortDesc },
                    "https://snowrecommendations.azurewebsites.net"
                );
this was used




0 Helpfuls
  • 79 Views
1 REPLY 1

Matthew_13
Mega Sage

yesterday

Hi Buddy,

Yes, you can do this in Workspace / UI Builder, and it works almost the same as classic UI. The difference is where the code lives and how you trigger it.

In Workspace, you don’t put this directly on the form. You listen for the Short Description changing, then run a client script that sends the value into the iframe using postMessage.

What you do

  1. In UI Builder, select the page with your record (Incident, etc.).

  2. Select the Record Form component.

  3. Add an Event Handler for when the short_description field changes.

  4. Set the action to Run client script.

Client script (this replaces your classic UI code)

function handler({ event }) {
  const shortDesc =
    event?.payload?.value ||
    event?.payload?.record?.short_description;

  if (!shortDesc) return;

  const iframe = document.querySelector(
    'iframe[src^="https://snowrecommendations.azurewebsites.net"]'
  );

  if (!iframe || !iframe.contentWindow) return;

  iframe.contentWindow.postMessage(
    { action: "live_suggestion", query: shortDesc },
    "https://snowrecommendations.azurewebsites.net"
  );
}

That’s it.
This is the Workspace equivalent of what you already had in native UI.

Important gotcha's

If the iframe loads but never reacts:

  • Make sure snowrecommendations.azurewebsites.net is allowed in the Concourse cross-origin allowlist.

  • Sometimes the iframe isn’t ready yet — adding a small delay (200–300ms) fixes that.

Basically:
Classic UI → you manually call postMessage
Workspace → you trigger postMessage from a UI Builder event handler

Same idea, different wiring.

 

@R Dhanush Kumar  - Please mark Accepted Solution and Thumbs Up if you found Helpful 🙂

0 Helpfuls