NG Component Spec File

[Gordon McLean]

Hi

I am trying to produce a iFrame component which to all intents and purposes is working with the exception of being able to set the URL. This is caused by the spec file attribute tag "string"

"model":
{
"height" : {"type": "string", "default":""},
"width" : {"type": "string", "default":""},
"frameborder" : {"type": "string", "default":""},
"url" : {"type": "tagstring", "default":""},

The URL in the above example works with text but if you add in a URL http://www.bbc.co.uk for instance url is not passed to the html file ie src="model.url" is completely missing. I am wondering how you would amend type to perhaps URL or parsing this for URL encoding ?

Any ideas from those more familiar with components would be much appreciated

best
Gordon

[Andrei Costescu]

Do you really need it to be a "tagstring" instead of "string" in spec? (so do you use i18n, tags %% or html code with callbacks in it?)
What value do you assign to that property? It should be a string value.

Also this passed through my mind https://wiki.servoy.com/pages/viewpage. ... d=23397000 but what you are sending is not markup - I didn't expect it to be 'sanitized' then.

[Gordon McLean]

Do you really need it to be a "tagstring" instead of "string" in spec? (so do you use i18n, tags %% or html code with callbacks in it?)
What value do you assign to that property? It should be a string value.

I am trying to send a URL to the iFrame ie http://www.bbc.co.uk as an example. When I tried string this was stripped out, tagstring appeared to do the same ??

Cheers
Gordon

[Gordon McLean]

Andrei

To clarify, I had an issue yesterday trying to insert videos to an NG Client solution. I tried using labels and html areas, both of which work in the web client, to insert and iFrame. When this did not work Paolo suggested a component which is where i am now. I can make this work if I hand code the URL of the iFrame in the html file but clearly this is no good if I have 60 videos !! SO I wanted to pass in a dynamic URL either via scripting or as a parameter of the component. So far all the parameters work except the URL my code is below:

HTML

Code: Select all

<div>
   <iframe src="{{model.url}}" width="{{model.width}}" height="{{model.height}}" frameborder="{{model.frameborder}}" allowfullscreen></iframe> 
</div>


Spec File

Code: Select all

{
   "name": "clickdigital-i-Frame",
   "displayName": "iFrame",
   "version": 1,
   "definition": "clickdigital/iFrame/iFrame.js",
   "libraries": [],
   "model":
   {   
      "height" : {"type": "string", "default":""},
      "width" : {"type": "string", "default":""},
      "frameborder" : {"type": "string", "default":""},
      "url" : {"type": "tagstring", "default":""},
      "styleClass" : { "type" :"styleclass", "tags": { "scope" :"design" }, "values" :["TBC"},
      "toolTipText" : { "type" : "tagstring"},
      "visible" : "visible"
   },
   "handlers" : {},
   "api" : {}
}

Cheers
Gordon

[Andrei Costescu]

What value do you assign to that property? It should be a string value.
So is it

Code: Select all

elements.yourCompName.url = "http://www.bbc.co.uk";
// or
elements.yourCompName.url = "%%myURLDP%%";
// or something like
elements.yourCompName.url = new URL('../cats', 'http://www.example.com/dogs');
// or something else
(...)

Or is it set in designer directly?

Did you try what https://wiki.servoy.com/pages/viewpage. ... d=23397000 suggests? So elements.yourCompName.putClientProperty(APP_UI_PROPERTY.TRUST_DATA_AS_HTML, true)? You should try this also in combination with html area/label.

[Andrei Costescu]

Ah https://docs.angularjs.org/api/ng/directive/ngSrc.

Using AngularJS markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

So if label/html-area still don't work for you then in the custom component use "ng-src=" instead of "src=".

[Gordon McLean]

What value do you assign to that property? It should be a string value.
So is it

Code: Select all

elements.yourCompName.url = "http://www.bbc.co.uk";
// or
elements.yourCompName.url = "%%myURLDP%%";
// or something like
elements.yourCompName.url = new URL('../cats', 'http://www.example.com/dogs');
// or something else
(...)

Or is it set in designer directly?

Did you try what https://wiki.servoy.com/pages/viewpage. ... d=23397000 suggests? So elements.yourCompName.putClientProperty(APP_UI_PROPERTY.TRUST_DATA_AS_HTML, true)? You should try this also in combination with html area/label.

Sorry for the long delay in responding

1) I have tried applying the URL in designer directly. http://www.bbc.co.uk works if you add http:// into the component.url this fails and is removed by servoy

2)

Code: Select all

elements.yourCompName.url = "http://www.bbc.co.uk";

Fails when the http:// is added

3)

Code: Select all

elements.yourCompName.url = "%%myURLDP%%";

html encoded also fails and is rendered as entered

4) Your final example fails as an Error in servoy before the page is rendered

5) I have tried the spec file with

Code: Select all

"url" : {"type": "tagstring", "default":""}

and

Code: Select all

"url" : {"type": "string", "default":""}

both of these options fail to make any difference

6) I have also set the onshow form with

Code: Select all

application.putClientProperty(APP_UI_PROPERTY.TRUST_DATA_AS_HTML, true);

This also fails to make any difference

It appears that when the URL contains http:// the src or ng-src is removed, if you insert any other string into the space ie http://www.bbc.co.uk this if fine its simply the :// that is causing the problem

I have attached a copy of the two components that are causing the problem if anyone is interested in looking directly

[Gordon McLean]

Ah https://docs.angularjs.org/api/ng/directive/ngSrc.

Using AngularJS markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

So if label/html-area still don't work for you then in the custom component use "ng-src=" instead of "src=".

IF you take their example this is what is actually rendered ie the {{model.url}} in servoy fails to render into "www.bbc.co.uk"

Code: Select all

<iframe ng-src="http://{{model.url}}" width="500" height="500"></iframe>

However in Servoy if you add a fully qualified URL ie in the spec HTML file you enter ng-src="http://www.bbc.co.uk" this works perfectly

It appears that Servoy is removing anything with http:// regardless of whether application.putClientProperty(APP_UI_PROPERTY.TRUST_DATA_AS_HTML, true); is set or not

Best
Gordon

[Andrei Costescu]

I made the component work. The key is using $sce.trustAsResourceUrl($scope.model.url) in component js.
The APP_UI_PROPERTY.TRUST_DATA_AS_HTML doesn't work because the component didn't use it... I didn't think of that when writing the previous comment...

(if the component were to respond to that APP_UI_PROPERTY.TRUST_DATA_AS_HTML it would have to use either "trustAsHtml" filter provided by Servoy or code like I did when changing the component in combination with "svyServoyapi.trustAsHtml()" flag - but all this is not needed at all in your case because in your case you always need to trust that URL in order for it to show something - it's not like a component showing a DP with data that you don't know if it contains malicious HTML but with the same component you might want to show HTML if you know if it is safe; so in your case the $sce.trustAsResourceUrl is enough)

[Andrei Costescu]

Btw: most if not all of the popular sites will not allow you to show them in an iframe. Like http://www.bbc.co.uk or https://www.google.com
More info on how sites can disallow being shown in iframes here: https://developer.mozilla.org/en-US/doc ... me-Options

[Gordon McLean]

I made the component work. The key is using $sce.trustAsResourceUrl($scope.model.url) in component js.
The APP_UI_PROPERTY.TRUST_DATA_AS_HTML doesn't work because the component didn't use it... I didn't think of that when writing the previous comment...

(if the component were to respond to that APP_UI_PROPERTY.TRUST_DATA_AS_HTML it would have to use either "trustAsHtml" filter provided by Servoy or code like I did when changing the component in combination with "svyServoyapi.trustAsHtml()" flag - but all this is not needed at all in your case because in your case you always need to trust that URL in order for it to show something - it's not like a component showing a DP with data that you don't know if it contains malicious HTML but with the same component you might want to show HTML if you know if it is safe; so in your case the $sce.trustAsResourceUrl is enough)

Andrei, thank you very much for looking at this it is very much appreciated I will test it now

Gordon

[Andrei Costescu]

You are welcome.

[Andrei Costescu]

You also mentioned that you ended up writing this component as what used to work in WC (label, html-area) no longer worked.
Could you detail a bit or give a sample with how you tried that? I would expect it to work in NG like that as well.

Were you trying something like this (if you were using youtube)?

Code: Select all

<object width="640" height="360">
    <param name="movie" value="http://www.youtube.com/embed/[...]"/>
    <param name="allowFullScreen" value="true"/>
    <param name="allowscriptaccess" value="always"/>
    <embed width="640" height="360" src="http://www.youtube.com/embed/[...]" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

[Gordon McLean]

You also mentioned that you ended up writing this component as what used to work in WC (label, html-area) no longer worked.
Could you detail a bit or give a sample with how you tried that? I would expect it to work in NG like that as well.

Were you trying something like this (if you were using youtube)?

Code: Select all

<object width="640" height="360">
    <param name="movie" value="http://www.youtube.com/embed/[...]"/>
    <param name="allowFullScreen" value="true"/>
    <param name="allowscriptaccess" value="always"/>
    <embed width="640" height="360" src="http://www.youtube.com/embed/[...]" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

Hi
I tried both but came at it from the iFrame perspective ie

Code: Select all

<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>


Neither the Label or the HTMLArea would allow me to change the video in demand and as I remember the HTMLArea did not display at all, that could well be related to your earlier observation that I was using a blocked site (bbc.co.uk)

HTH
Gordon

[Andrei Costescu]

It did work from a simple label with HTML in it's dataprovider too - just that 'trust as html' has to be used.
I also created and pushed an 'embed YouTube video' component in servoy extra components package. So it will be there in next release.
I guess more ppl. will look for it.

You have attached the sample solution and latest servoy extra components package (from sources).