NG Component Spec File

Forum to discuss the new web client version of Servoy.

NG Component Spec File

Postby Gordon McLean » Thu Nov 23, 2017 4:35 pm

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
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 219
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: NG Component Spec File

Postby Andrei Costescu » Thu Nov 23, 2017 4:53 pm

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.
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Re: NG Component Spec File

Postby Gordon McLean » Thu Nov 23, 2017 5:26 pm

Andrei Costescu wrote: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
Clickdigital.com
Gordon McLean
 
Posts: 219
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: NG Component Spec File

Postby Gordon McLean » Thu Nov 23, 2017 5:32 pm

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
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 219
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: NG Component Spec File

Postby Andrei Costescu » Fri Nov 24, 2017 10:43 am

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.
Last edited by Andrei Costescu on Fri Nov 24, 2017 10:58 am, edited 1 time in total.
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Re: NG Component Spec File

Postby Andrei Costescu » Fri Nov 24, 2017 10:48 am

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=".
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Re: NG Component Spec File

Postby Gordon McLean » Wed Dec 13, 2017 10:35 pm

Andrei Costescu wrote: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
You do not have the required permissions to view the files attached to this post.
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 219
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: NG Component Spec File

Postby Gordon McLean » Wed Dec 13, 2017 10:46 pm

Andrei Costescu wrote: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
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 219
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: NG Component Spec File

Postby Andrei Costescu » Thu Dec 14, 2017 1:25 pm

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)
You do not have the required permissions to view the files attached to this post.
Last edited by Andrei Costescu on Thu Dec 14, 2017 1:33 pm, edited 1 time in total.
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Re: NG Component Spec File

Postby Andrei Costescu » Thu Dec 14, 2017 1:32 pm

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
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Re: NG Component Spec File

Postby Gordon McLean » Thu Dec 14, 2017 1:40 pm

Andrei Costescu wrote: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
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 219
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: NG Component Spec File

Postby Andrei Costescu » Thu Dec 14, 2017 2:45 pm

You are welcome. :)
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Re: NG Component Spec File

Postby Andrei Costescu » Thu Dec 14, 2017 4:05 pm

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>
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Re: NG Component Spec File

Postby Gordon McLean » Thu Dec 14, 2017 5:43 pm

Andrei Costescu wrote: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
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 219
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: NG Component Spec File

Postby Andrei Costescu » Thu Dec 14, 2017 11:13 pm

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).
You do not have the required permissions to view the files attached to this post.
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 939
Joined: Tue Jun 26, 2007 3:14 pm

Next

Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests