cancel
Showing results for 
Search instead for 
Did you mean: 
Rick72

How-to get double-click events in PowerApps

One click should be one-click and double-click should be two clicks. Makes sense right 🙂 But what when someone keeps clicking? I have 2 patterns. In both cases, a button and a timer control are used. Labels are used in the demo (video) for visual feedback. The patterns are:

  1. A fixed time to click.
  2. The timer is reset after each click.

Pattern #1

The screen has 2 buttons. One for the clicks and one to acknowledge a message. This button is only shown after the time set has passed. The click button is disabled after the time has passed.

The click button has the following code in the property "OnSelect":

UpdateContext({var_Text: "-"});
Switch(
     var_Click,
     0,
     UpdateContext({var_Click: 1});
     UpdateContext({var_TimerStart: false});
     UpdateContext({var_TimerStart: true}),
     1,
     UpdateContext({var_Click: 2}),
     2,
     UpdateContext({var_Click: 3}),
     3,
     UpdateContext({var_Click: 3})
 )
  • The property "Start" of the timer control contains the variable "var_TimerStart".
  • The property "Duration" of the timer control contains the variable "var_Duration". This value is set at the property "OnVisble" of the screen and set to "400". I found this value to be the most intuitive but please do test what you like.

The property "OnTimerEnd" of the timer control has the following code:

UpdateContext({var_DisableButton: true});
Switch(
     var_Click,
     1,
     UpdateContext({var_Text: "Single Click"}),
     2,
     UpdateContext({var_Text: "Double Click"}),
     3,
     UpdateContext({var_Text: "Multi Click"})
 );
 UpdateContext({var_Click: 0});
 UpdateContext({var_BtnVisble: true})

Pattern #2

The only real difference between pattern #1 and pattern #2 is the property "OnSelect" of the click button. The button has the following code in the property "OnSelect":

UpdateContext({var_Text: "-"});
Switch(
     var_Click,
     0,
     UpdateContext({var_Click: 1});
     UpdateContext({var_TimerStart: false});
     UpdateContext({var_TimerStart: true}),
     1,
     UpdateContext({var_Click: 2});
     Reset(Timer2_1);
     UpdateContext({var_TimerStart: false});
     UpdateContext({var_TimerStart: true}),
     2,
     UpdateContext({var_Click: 3});
     Reset(Timer2_1);
     UpdateContext({var_TimerStart: false});
     UpdateContext({var_TimerStart: true}),
     3,
     UpdateContext({var_Click: 3});
     Reset(Timer2_1);
     UpdateContext({var_TimerStart: false});
     UpdateContext({var_TimerStart: true})
)

As you can see, after each click, the timer control is reset. This makes it possible to keep clicking.

The video below gives more visual explanation.

 

 

Comments

Thats a real goo idea man. Great work

Advocate I

@Rick72 I use your solution in bespoke calendar, where I click a start and end date. On doubleclick I set the start and enddate to the same date. Which I would not have managed without seeing your solution, Thanks.

On double click the Start and End date are the same:

 

SameStartEndDate.PNG

 

 

 

Anonymous

This is amazing, thank you so much for sharing this.

My use case will be slightly different wherein I will be using it in a gallery to show a preview of a record vs opening the full record in a separate pop-up, but this will add immense functionality to my app.

 

Again, thank you so much.

I will be sure to add comments if I run into errors or have additional insight afterwards.

Anonymous

UPDATE:
I decided to implement this feature after watching a QA tester use my app and unsuccessfully try to double click all over the gallery to open a record.

I've successfully implemented a variation of your idea in my gallery now, with only a few minor variations.

 

The timer is still required (obviously).

The OnSelect behaviour has moved from a button into the gallery OnSelect property, and so has the "magic" step you mentioned in your blog/video.

In your version the condition is triggered on timer end, whereas I've moved that into the gallery OnSelect property.

 

Basically the counter happens as the first step, then as the second step the dependent action/s are triggered depending on whether the counter is 1 or 2 (or more).

The counter is reset to 0 OnTimerEnd on the timer, otherwise the behaviour will no longer work in subsequent gallery operations.

 

As long as the clickCounter get to the required number of clicks before the timer ends, the action completes correctly and as expected. 

I contemplated moving the reset clickCounter to 0 at the end of my OnSelect in the gallery but this was not required.

It seems that this doesnt work when it comes to Galleries with a container inside. I have a gallery which has a container that acts as a row for each item. 

 

I created a normal gallery without a container and it works.