How-to get double-click events in PowerApps - #ARCHIVED#

Posted on by
This content has been archived. It may no longer be relevant.  

A button in PowerApps has a “OnSelect” property but no “OnDoubleSelect” property. So is it not possible to have a double-click event in PowerApps then? But it is possible, with a little bit of extra effort. This blog post shows you how to add double-click functionality to a button in PowerApps. At the end, a video is shown for a more visual explanation.

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.

Print 🖨