Hi hind,

Please check this documentation here, I'm pretty sure this will help you :)

https://success.outsystems.com/Evaluation/Developing_with_OutSystems_Platform/00_Will_I_hit_a_wall_when_developing/00_Extending_the_UI_with_HTML_JavaScript_and_CSS

https://www.outsystems.com/help/servicestudio/9.1/index.htm#t=Web_User_Interface%2FAdding_Java_Script.htm

examples available here:
https://www.outsystems.com/forge/component-discussions/990/JavaScript+Demo+(How-To)

enjoy!
Vera

Hi,

You can easily add Javascript or jQuery to any Web Screen or to the whole application by going to a Web Screen and look in the properties for 'JavaScript', here you can add your JavaScript code. 

Hi,

Thanks Vera for these links. 

I just want to summarize.

There are three ways to write JavaScript code in OutSystems application.

1. Write JavaScript function inside JavaScript Editor provided on every screen under Properties.

2. Write JavaScript function inside Expression and set it's Escape Content property to "No".

3. Write JavaScript function inside external file, attach that file under Resources folder of Data tab and use    
   RunJavaScript function from HttpRequestHandler extension.

Hope this helps.

Thanks and Regards,
Suraj Borade

Thanks to alll for the help i appreciate that

Thank you very much Vera for those useful links its really helpfull, but how about aplying it on the elements after doing those steps?!
Thanks all for the help i appreciate that 

Suraj you saifd that "Write JavaScript function inside external file, attach that file under Resources folder of Data tab and use    
   RunJavaScript function from HttpRequestHandler extension."

from where i can get this "HttpRequestHandler extension" and how can i run javascript or jquery??

i also heard that i can put method in the screen action is it right ??

Regard
Hind Ahmed

Ok, I think there is some missunderstanding on this request.

What I understand from hind Ahmed original post, is how to extend the platform's widgets with some jquery/js.

What Suraj Borade described is the ways that can be used inside the platform to reuse js/jquery libraries.

After that is accomplished, all you have to do is make use of the extended properties (that exist in all of the widgets you can use in a screen) and use them


In here you can add whatever property you may need (onclick, onblur, etc.)

Is this what you were looking for?

Best regards,
PC

Thanks Pedro Coelho for simplifying and summarizing the concept of the JQuery and JavaScript but can you explain how can I apply the action when I done with extended properties?! And if I put it on the web block can I do the same steps and call it from the extended properties?!   

Hi,

Sorry for the late reply.

Thanks Pedro Coelho for completing answer.

Call Javascript from screen action:
Right click on References/Dependencies and select Add/Remove Dependencies.


Select HttpRequestHandler Extension


From actions section select 2 actions 1. AddJavaScriptTag and 2. RunJavaScript and click on Ok.

You should be ablt to see actions here.



Attach your Javascript file in Resources and set action as Deploy To Target Directory



On the preparation of screen, add this function and give Javascript filename as URL.



Onclick of button call Javascript function defined in file and give Input ID of textbox widget.


I have attached last screen print. Hope this helps.

Thanks and Regards,
Suraj Borade