On Double Click and On Click on the same Container

On Double Click and On Click on the same Container

  

Hi.

I have a list records table with several columns.

 As it stands, if you click on the first eight containers (all in one container), you call Method Navigate with several input parameters to a different screen. 

If you click the last container it calls an Ajax Submit Action which calls a SOAP service and refreshes part of the page. This works but our business want it so if you click the whole list (onclick), it calls the Ajax Submit Outsystems action, and if it is double clicked, it calls the method navigate. Is there a way to do this in Outsystems?

Is there a way you can call these actions using extended properties? I am not sure where to start!!


Edward


Hello Edward,

You will have to use JavaScript.

But I would like to point that this will create a very poor interface.

1. It is not intuitive

2. It will be very easy for the user to do something he does not want to do, like double click when he wants to click or the other way. This will probably lead to frustration in the long run.

IMHO a button to refresh the table would be much more intuitive and much less error prone (from the user's perspective).

Cheers

Eduardo Jauch

Hi Eduardo,

Thanks for your reply! Luckily at this stage it is merely a POC, so the business can compare both options. 

Would I put the JavaScript to call these actions/hidden buttons in extended properties?


Edward


Solution

It is possible to assign JavaScript code to 'onclick' and 'ondblclick' Extended Properties but every source I checked (starting with jQuery documentation) warns against using both events on the same element, as different browsers have different behaviours and in most cases you won't be able to distinguish if a click was a regular click or part of a double-click.

That being said, I believe the solution described here may work, with some adjustments...

Depending on how you implement it, you can put the generic javascript in the JavaScript property of your screen (or WebBlock) and call it from the Extended Properties, or you can add it directly to your screen with an Expression (if it's not generic and binds to specific elements directly).

Finally... unless that pattern (click do one thing, double-click do a different thing) is already well established amongst your userbase for web applications, I'm with Eduardo, any more *visible* alternative would be better from a UX standpoint.

Solution

Hi Jorge,


Thanks very much for your help. I have plenty to go off here. I completely understand your comments. There is no double clicking in our application so far but when I present this solution, I will also mention the potential pitfalls this solution may bring that yourself and Eduardo have mentioned too me. And sometimes, the simplest solution is often the best. It'll be a good challenge for me anyway!! Thanks again :)


Edward

Ok,

Just as an exercise, I have here an adaptation to use in OutSystems: https://eduardojauch.outsystemscloud.com/DblClickAndClick/Home.aspx?_ts=636432237800711630

But as was already said by Jorge, its inadvisable to use this approach. Instead, in the solution above, only the "click" event is used, and a delay tells if it is a single click or a double click.

Tested only in the last version of chrome.

Cheers,
Eduardo Jauch

Cheers Eduardo! It works in IE11 as well :)