Display iframe in mashup

[oskarberntorp]

Hi,

I am trying to figure out how to display an external webpage in thingworx. I am trying to use an expression which then outputs html as a string of an iframe, The output of that expression is bound to the data property of the value display.

I have also tried to enter the html into a textinput, But the value display will only display the raw text and not the page which should render.

The value display is set to render the data as html.

Am I doing anything the wrong way, if so please advice me how to do.

Kindly

Oskar Berntorp

[PaiChung]

Isn't there still a webframe widget?

[oskarberntorp]

Hi,

Thank you for answering,

The WebFrame widget exists, but as I need to be able to allow the web page shown to use the webcam. The web frame widget is not flexible enougth as I can't control that I want to be able to use the microphone or web cam. That is why I need to use the iframe element in a value display widget.

But my problem is that the value display shows nothing...

So basically I need to customize the webframe to add an allow attribute (which is the way to allow microphone or camera in an iframe), but as I understand, the web frame widget does not give me that flexibility.

// Oskar Berntorp

[Rocko]

Have you set the Format dropdown in ValueFormat to "With Formatting" or "With Formatting/Unsanitized"?

I suggest you make that working first, e.g. with a different target site. You will then also have to manage CSRF/CORS as well I guess.

[oskarberntorp]

Hi,

No I have not, is there any information on what that means, I guess that it could cause problems?

[Rocko]

If you put it in as raw, it will just render the text escaped. If you put in Raw, then it will render like this:

<iframe src="https://abc.com/" sandbox="allow-scripts allow-same-origin allow-presentation"></iframe>

if you put in Raw/Unsafe, it will not have the sandbox attribute.

CSRF/CORS I can't tell this depends on how the different servers are set up and the domains the services are hosted at. you will find some CSRF/CORS references in Thingworx help and on PTC Support website. But if you have issues with CORS, it would be displayed in the browser I guess.

[TonyZhang]

Hi @oskarberntorp ,

It appears that the previous comment by @Rocko answers your question. Could you please confirm and update whether the provided solution works here? For the benefit of other Community Members who may have the same question, it would be great if you could designate it as the Accepted Solution.

In the event that this response did not answer your question, please post your current status so that we can continue to support.

Thanks for using the PTC Community!

Regards,

Tony

[TonyZhang]

Hi @oskarberntorp ,

Please see https://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx/Help/Mashup_Builder/Widgets/ColumnRenderersAndFormats.html

It's for Advanced Grid Column Renderer but same applies to Value Display renderer if you select HTML.

If you can ensure the HTML code passed to Value Display widget doesn't contain any unsafe JS coding, then you can select unsanitized, you can also try if selecting "with formating" works for your case.

[oskarberntorp]

Hi,

Thank you for this answer, It helped and it now works, but I would like to have the iframe span the whole page.

I have tried this css, but it does have no effect, so how do I get the equivalent, but of the value-widget and the iframe therein? I have tried to add a customClass iframe aswell to the widget and target that in the custom css tab, but with no success.

[oskarberntorp]

Hi @TonyZhang,

Did you see my answer above?

// Oskar Berntorp

[TonyZhang · Accepted solution]

Hi @oskarberntorp ,

Could you please try adding below in CustomCSS tab of the mashup?

ptcs-value-display::part(overflow-control){
	height:100%;
}

ptcs-value-display::part(value-container){
	height:100%;
}

ptcs-value-display::part(item-value-container){
	height:100%;
    width:100%;
}

ptcs-value-display::part(item-value){
	height:100%;
    width:100%;
}

 Also, make sure the width='100%' and height='100%' style are applied to your iframe element.

result = 
    "<iframe src='https://www.bing.com' width='100%' height='100%' title='Iframe Example'></iframe>";