Communicate data between Iframe and Appsmith (parent) app

Appsmith Support
1

Dear, I’m stuck on the following :frowning:

Requirement:

  1. I need a custom widget (a customized PDF viewer based on pdf.js)
  2. that is able to communicate and transport objects to and from my appsmith space (e.g. to call an API, DBquery,…)

current solution:
a I’ve created a index.html file that displays a PDF on an html canvas using pdf.js and hosted this file on a personal domain
b. when I need to communicate from the custom PDFviewer in the Iframe to the parent appsmit app I call from within the ifram: parent.postMessage(“messageTxContent”, “*”);
c in my appsmith app I’ve created an IFRAME with as SRC that intex.html file
d in the IFRAME widget I’ve in the onMessageReceived property triggered an alert {{showAlert(‘YEEY’,‘success’)}}

All of the above works + the alert is shown but I cannot retreive the “messageTxContent” , questions:
Q1: I do not have any clue on how to replace the showAlert(‘YEEY’) content with the content passed by parent.postMessage(). (in my example it would be: “messageTxContent”). How to do this?
Q2: is there a smarter way to achieve all of this, create a custom ‘widget’/ be able to create a html canvas with my javascript code + the pdf.js library and let it’s data interact with the appsmith environment :)?

THANKS!

2

@appsmith_user We have an open issue to track this feature - Communication between embedded Appsmith dashboard iframe and parent applications · Issue #7241 · appsmithorg/appsmith · GitHub

Have you tried using query params in url - Share data across pages - Appsmith

3

Thanks @dancia , thanks for your message. What Worked so far:

  1. use
  2. I do need to send data objects from the parent appsmith app to the iframe with a size of >500chars and need to be able to do that multiple times (even after iframe page load), do I understand correctly that there currently is NO way of doing this? :frowning:
  3. is there a better way to Achieve the creation of a custom ‘widget’ then using the Iframe (or creating a new native widget with I think will be complex given the fact that I’ve no understanding of the appsmith framework code)

Thanks!

4

@appsmith_user Hey can you try using {{showAlert(IFrameName.message,‘success’)}}

Also about the custom widget, we have an open feature request that you can track here - [Feature] Custom widget · Issue #2033 · appsmithorg/appsmith · GitHub

5

Dear Dancia,

Thanks for your message. That indeed works but does as mentioned unfortunately still not solve the problem that i mentioned in my previous post (communication from appsmith to child div). Do you/ anyone, have other suggestions?

Thanks!!

7

@appsmith_user posting messages from Appsmith to Iframe is not possible today. We have a separate open issue to track this feature - [Enhancement] Support targetWindow.postMessage for iframe · Issue #5390 · appsmithorg/appsmith · GitHub

One of the ways to try this would be using query params as mentioned in the above issue. https://docs.appsmith.com/how-to-guides/sharing-data-across-pages#sharing-data-via-query-params

8

Thanks for your reply and clarification! Ill keep following that feature/ issue tracker