Onchange event

  

Hi Outsystems - We are implementing outsystems here and without proper training and I am strugglist to understand the things here:

I have a simple textbox (which was created by the outsystems demo app) and on the textbox's extended properties, I selected OnBlue and Onchange event and I have given a very simple javascript there.

SyntaxEditor Code Snippet

"
<script type=""text/javascript"">
alert(1);
</script>
"

After publishing the app, it is just not firing this event at all. What I am missing?? Please help.

Thanks in advance.


Hi Sandeep,

Have you done something like this?

Solution

Hi Sandeep,

Remove the <script> tag, it shouldn't be there.

What you want to achieve (in the rendered page) is something like this (I've simplified the HTML):

<input onchange="alert(1);">

Using extended properties to achieve this (by adding a onchange attribute to the tag):

  • Set the HTML attribute name - extended property name - onchange).
  • Set the HTML attribute value - extended property value - "alert(1);").

Knowing how to do this in HTML helps, as you can use the browser's inspector to check how the resulting page is being rendered.

Solution

Thank you for your reply guys. But  the issue is I can't do it directly. whenever I go to the proeprties of OnChange it asks me for the destination 

and in there then whatever I select it takes me to the below window to edit. I don't understand this screen as I am looking for plain editor to work, 


Not sure how you guys edit directly in the editor windows, please tell me.

Paulo Ramos wrote:

Hi Sandeep,

Remove the <script> tag, it shouldn't be there.

What you want to achieve (in the rendered page) is something like this (I've simplified the HTML):

<input onchange="alert(1);">

Using extended properties to achieve this (by adding a onchange attribute to the tag):

  • Set the HTML attribute name - extended property name - onchange).
  • Set the HTML attribute value - extended property value - "alert(1);").

Knowing how to do this in HTML helps, as you can use the browser's inspector to check how the resulting page is being rendered.

ahhh I think I understood this basic just now but still no charm, I have set the OnChange (In extended property) and the code should go in the VALUE property, right? I was putting in the OnChange itself but the moment I select the vaalue property to insert my code, it'as just doesn't like it.


 


Got it working. What I was doing wrong was that feeding the logic into the value property. I have onchanage event working successfully with your help, appreciate that.

I need to do the OnClick basically button click it should go to the url whichis inserted into the specific textbox but there is a mouseover and mouse out events but nothing mouse click so what would be my options?

P.S. Shall I open another thread for my new question?

If you just need to redirect the user to the entered URL, you really don't need javascript.

Double-click the button to create a server-side screen action, then use an External Site (right-click > Add Dynamic URL). The Dynamic URL parameter will take the variable associated to your input (where the URL is entered).

Also be sure to go through the Learn section in this site, as it covers the most basic dev concepts, helping you to get comfortable with OutSystems as you progress.

Hi Paulo - That's exactly I am trying to do and I have added "Add Dynamic URL"  but how shall I link to the button because when I double click the button it just takes me th the below screen only.


P.S.: I have done searching here as well about it, but can't find anything concrete about it. If you have a link can you please share it with me? sorry to be pain but getting there slowly..


ahhh I think I got it to the next level now. I have set button as "Navigate"  and set it's Destination as "Common\External" and in the URL I set it's input as "ContactName.TypedValue" but it's not going anywhere after that.


Hi,

What I meant was, keep the button as submit and associate its destination with a screen action. You can change the destination in its dropdown - select new screen action.

The value of the variable associated to the input will be available in the screen action this way, and you can use the mentioned external site to redirect - your flow will end with the external site instead of the default End node.

Cheers Paulo for your help. I have got it working now by inputting the correct parameter, last remaining issue is that it is opening in the same screen (which is not right) and I want it to open to another screen or another tab, any clue about that??


Paulo Ramos wrote:

Hi,

The value of the variable associated to the input will be available in the screen action this way, and you can use the mentioned external site to redirect - your flow will end with the external site instead of the default End node.

I am able to do the first part but second part is where i am having issues, I created a new screen action which is "Click Me" but am not able to fire anything from there... :-(

If ClickMe is the target of your button (with method = Submit), then you need to replace the End node by an External Site (add one External Site to the MainFlow, then right-click it > Add Dynamic URL). 

The Dynamic URL parameter will take the variable associated to your input (where the URL is entered).


woohoo!! finally got the gist of it. And thank you for being so patient with me. I am successfully able to set them and at the click of the button it is naviating as well with the input from the textbox but it is not going to the new screen or tab it is opening in itself only. i.e. it is initall at this page

https://dev.outsystemsenterprise.com/Application1/ContactDetail.aspx?ContactId=116

and at click of the button it is going here:
https://dev.outsystemsenterprise.com/Application1/www.google.com?In1=www.google.com.au


For opening a new tab, you can try adding this extended property to the button:

name: target

value: "_blank"

Also, I think you need to add the "https://" prefix to the URL.


Yes definitely  prefixing with https showing the website properly but in the same window even after adding target="_blank"

Hi, 

See the attached sample. This will work on links, but you need to build the link first, based on the URL (so that it has method Navigate). In this example I'm using Ajax Refresh (using the On Change property of the input). It would be possible to do it in javascript as well.

Hi Paulo - Thank you for your sample but I couldn't run it as it is built in the latest version. But what I have done to achieve is (sort of similar to your footsteps), I have given the button as "Ajax Submit" and gave it a fake destination and put it on it's extended property "OnClick" and gave this logic

SyntaxEditor Code Snippet

"if(document.getElementById('"+Contact_Name.Id+"').value)
window.open(document.getElementById('"+Contact_Name.Id+"').value);
else
alert('no input url to navigate to');
"

and it has achieved me both of the stuff i.e. going to the url and opening it in the new window.

phew...cheers mate for all your help, appreciate that.