Text input inside iframe code

Queries and Resources
1

how can i get a text input inside iframe code?

2

Hey @nroeder!

You might try using the Retool.subscribe function mentioned here. In a separate script you can pull the iframe element from your custom component's document and then dynamically set its src property:

<iframe
  width="100%"
  height="100%"
  style="border:0"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
>
</iframe>
<script>
   Retool.subscribe(model => {
     const iframe = document.querySelector("iframe");
     iframe.src = `https://www.google.com/maps/embed/v1/place?key=<API_KEY>&q=${model.name}&maptype=satellite`
   })
</script>

Let me know if that works?

3

Worked perfectly, there's a bug though if there are two custom components with iframes.

4

Ah you likely want to be more specific than just selecting iframe can you try passing an id to it?

<iframe
  width="100%"
  height="100%"
  style="border:0"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  id="map-frame"
>
</iframe>
<script>
  Retool.subscribe(model => {
    const iframe = document.getElementById("map-frame");
    iframe.src = `https://www.google.com/maps/embed/v1/place?key=<API_KEY>&q=${model.name}&maptype=satellite`
})
</script>
5

That works. If I want to put this in a module how can I pass in a variable? I tried labeling the model before hand with {{table1.selectedrow.data.address}} but it didn't work.

6

:thinking: would you mind posting screenshots of your configuration? I would imagine the following should work:

{
   name: {{table1.selectedRow.data.address}}
}

Maybe it has to do with capitalizing selectedRow properly?

You mentioned this being inside a module though, so it could help to see how that part is set up.

7

It was a typo in the post, the actual code is correct, still doesn't work. I have the module above the component code on a page and the component works but the module does not, it shows a random address

image
image1535×665 223 KB

8

Could you perhaps send over an app export of the module you're using?

If you've embedded the custom component within the module it won't be able to access any components directly in your parent app, you'll instead need to pass values from them as inputs to the module and then pass those inputs along to the model:

2094×740 313 KB

That's the only thing that's coming to mind but I imagine the issue could lie elsewhere as well.

9