How to pass events between a custom Next Experience Page and a child iframe in UI Builder?

[John Lafer]

Hello, I'm building a custom page with UI Builder. It contains an external web application loading in an iframe that is rendered by my custom component. I need my page and the external app to exchange event messages. The only way I know how to do this is with Window.postMessage and Window.addEventListener. My plan was to make those calls from client scripts configured as event handlers. However, in UIB I can't find a way to get a reference to the 'window' global variable to access the window in the iframe. Any ideas would be most welcome. Is this possible in the Now Experience UI Framework?

Note: I control the code for the external web app so I can pursue alternative solutions if they exist. And I can access the 'window' global var in that application without any issues.

[Brad Tilton]

You won't have access to window from within a UIB page script. You'll need to do the communication from within your custom component and then use properties and events to communicate with the UIB page.

[John Lafer]

Thanks @Brad Tilton for the reply. While I understand how to communicate between my custom component and other components/scripts on the workspace page, I don't know how I can communicate between the external web page (which is iframed into the workspace page via my custom component) and the code of my custom component. Could you please elaborate? I'm a newbie but I thought that 1) the only way to embed a 3rd-party web page was using iframe and 2) the only way to communicate (client-side) between the iframed page and another frame in the document was with Window.postMessage.

[Brad Tilton]

Just to confirm, you built a custom iframe component locally and deployed it to the instance, correct? Or are you using the default iframe component in UIB to show the external content without any local development?

If you've built the custom component yourself you should theoretically have pretty full control over what it does, including communicating with an iframe. Unfortunately, I've not done that before in a custom component and don't have any examples for you.

[John Lafer]

Yes, I built a custom iframe component locally and deployed it to the instance. The "src" URL of the iframe element points to a web app in which I can run my own event-handling code. I just don't see how that code (from domain 1) could pass messages to my UIB custom component (running in domain 2) without using the postMessage API.