Passing data to an IFrame

Ignition
, ,
1

I am working with the Inline Frame component for the first time and I am wondering if it is possible to pass data to it?

Right now, I have a dropdown on my view along with the Inline Frame. When a user selects an option from the dropdown, the value is written to a tag. The tag is then read into the WebDev I have created for the Inline Frame. The problem is, in order for the Inline Frame to update after a selection from the dropdown, I have to refresh the browser. So I was wondering if it was possible to bind the dropdown value to a custom parameter that the Inline Frame component uses. That way, the user does not have to refresh the browser in order for the Inline Frame to update after a new dropdown selection.

My initial thought was to write a script that would refresh the browser every time a new selection is made from the dropdown, but from what I am reading that may not be possible either?

2

That seems bad for starters. That means that anyone else using the application will be sharing that selection and users will interfere with each other. Writing to a session custom property would be better - or even to a custom property on that view. Let's call it view.custom.ddOption.

So I was wondering if it was possible to bind the dropdown value to a custom parameter that the Inline Frame component uses.

Sure. Construct the URL in an expression binding on the IFrame's `props.src'. Something like,

"https://forum.inductiveautomation.com/t/passing-data-to-an-iframe/88923"
+ {view.custom.ddOption}

Now the component should refresh anytime a value in the binding updates.

1 Like
4

So then in the WebDev script, how do I read in the value from the dropdown? Before, I was using the tag, that was written to from the dropdown, as a parameter in my WebDev script.

5

You have to extract it from the URL. Using a GET parameters makes that easier.

1 Like
6

I've never used WebDev so I may be missing something.
My intention is:

  • Create view.custom.ddOption.
  • On the dropdown create a property binding on props.value. Bind it to view.custom.ddOption and make it bidirectional.
  • Use the expression binding on the Inline Frame's props.src to construct the URL by combining the base path with the parameter from the dropdown. If you're using GET parameters then the finished src will be something like example.com/folder1/page.php?music=jazz or whatever.