Power Apps – onStart delays and showing progress with a clock ⏰

I have a power app that does some work in the onStart section that takes a few seconds to complete. When users click a button on the main screen, they are taken to the second screen. Thing is, if users click the button before the task completes, they get an error. So I modified the code to disable the button.

Here’s what I do:

I set a variable that is initially set to false, and once things completet the variable is set to true. And I set the DisplayMode property of the button to be


So the button is disabled to begin with, but once the task completes users can click.

Then I got some feedback that while users can see there’s something happening because of the dots on top, it would be nice if the button itself had some message.

Of course, I could have just changed the text like this:


So now we have:

But that’s too easy, right? I wanted to complicate things an itsy bit. 😃

So here’s what I did.

Let’s add a timer. Coz, you know, there’s always a timer involved in Power Apps. 😛

I’ll keep the timer visible for now, but hide it later. Keeping it visible to start with as it’s easier to see what’s going on.

  • The timer duration is 1000 (which is in milliseconds, so 1 second).
  • The timer is set to repeat (so it starts again when it stops).
  • Auto start and Auto pass are off (coz I don’t want it auto starting when I am on the screen, or pause).
  • I set the start property to be gblStartScreenDone=false (so when gblStartScreenDone is false, start the timer).
  • I am going to introduce a new variable in onStart. That’s going to be Set(gblTimeElapsed, 0). Basically I add a variable and set it to 0.
  • And in the onTimerEnd of the timer itself, I will add:
    Set(gblTimeElapsed, gblTimeElapsed+1). Basically, increment the variable above by 1 when the timer ends. (And since the timer is going to keep repeating as long as gblStartScreenDone=false this variable will end up having how many seconds have passed!)

Here’s what onStart is now:

Oh, forgot. Let’s modify the button text.

Result:

Let’s hide the timer now. Set it to be not visible.

Then I wanted to make it a bit more “cute”. What if I add an emoji or something? Initially I thought of adding a hand, or people dancing, but finally hit upon the idea of adding clock faces. So I modified the button text to be this:

What am I doing above?

First, I did by the current number of seconds passed gblTimeElapsed by 12 to get the remainder. That’s the first With.

Then I check the remainder. If it’s 0, I put a particular clock emoji (hands at 12). If it’s 1, then I put the clock emoji with hands at 1. If it’s 2, then clock emoji with hands at 2; and so on…

This means each time the number of seconds elapse, a different clock emoji is put on the button, giving the impression of a ticking clock. I find this cute! 🥰

To see what this does, here you go:

That’s all! 🤘