Embeding Retools, Message to Parent

Queries and Resources
1

Hey there,

I try to embed Retool app into React app.
Following the official documentation, I can easly send data from React to the embed Retool app but I can't send data from the Retool app to the parent (the React app).

I create a js query like into the doc:

parent.postMessage(current_user.email, 'https://retool.yoursite.com/apps/embedded-app')

(using my embbeded app's public url)

And trigger the query by clicking on a button
Then into the React code, I add the Window listner like this

useEffect(() => {
    const handler = (event: any) => {
      	console.log("event data >>", event.data);
    };

    window.addEventListener("message", handler);

    return () => window.removeEventListener("message", handler);
}, []);

Infortunately I have the error bellow into the browser's console:

No request found with the corresponding request id of undefined, skipping... If you're trying to send a message to the parent application, ensure you have the parentWindowCommunication feature flag set.

I think there is someting to configure into Retool but I don't know where because it works well when I use this embeded Retool app: "https://support.retool.com/embedded/public/cb9e15f0-5d7c-43a7-a746-cdec870dde9a" (from react-retool)

Thanks in advance for any help

2

Hi @Tsara - thanks for reaching out about this, happy to help troubleshoot! Can you confirm whether this beta feature flag is turned on for your Retool account? It's under Settings > Beta and you'll want to turn on the "Enable parent window communication" flag:

2066×1398 225 KB

2 Likes
3

Hi @kbn ,

Thank you very much for this rescue :pray:
Your solution works very well.

So, I have three questions :

  1. Because this functionnality is into Beta section, can we use it for production?
  2. Is there a size limit about data to transfert between Parent and Retool app?
  3. Is there a way to send binary data between them?

Many Thanks

4

@Tsara thanks for letting me know that the solution worked for you! Regarding your questions:

  1. In general, beta flags are features that are still in development. In this particular case, the parent window communication feature doesn't have a timeline for releasing to general availability. We strive never to make a change that would break existing apps for our customers. That said, the beta designation is meant to set expectations that this is still in development and not widely used, so there may be fringe scenarios that haven't been accounted for yet. As far as "should you use this in production," that depends on how resilient your app is to possible issues, and how closely you are monitoring your setup. Even so, if issues come up, let us know and we will triage just like any other existing feature.
  2. There is not an enforced size limit, but optimizing/minimizing size where possible will likely keep things more performant than if you're including extraneous data that's not necessary to transfer. Keeping the data somewhere under 100KB would likely be most responsive.
  3. We have not specifically built/tested sending binary data between parent and Retool apps, although you're welcome to test it out! There should be no problem with sending binary data.
6

@kbn
Thanks for your support and clear answer.
Sorry for this late response but I didn't see the notification.

Regards

1 Like