cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Configurable countdown timer with progress bar

Hi Guys,

 

My brick wall is gone so I've turned to the forums for help !! 

 

My aim is to create a configurable countdown timer with a progress bar that fills as the timer gets nearer to zero. so far I've managed to reverse the standard timer control to countdown and add inputs to specify the desired amount of time.

 

the one thing i cant seem to get my head round is how to set up the progress bar. i think i should use a slider control with the handle shrunk, but how do i connect it to the timer, should i collect the timer text value live, if sso, how?

 

help:-)

 

many thanks powerapps friends 

1 ACCEPTED SOLUTION

Accepted Solutions
Community Support
Community Support

Hi @Anonymous,

 

I have made a test on my side, please take a try with the following workaround:1.JPG

 

 

Add a Timer control and a Slider control within my screen. 

 

Set the Duration property of the Timer control (Timer1) to following formula:

30000

Set the Text property of the Timer control to following formula:

Text(Time(0, 0,(Timer1.Duration-Timer1.Value)/1000), "hh:mm:ss")

Set the OnTimerEnd property of the Timer control to following formula:

UpdateContext({IsReset:false});UpdateContext({IsReset:true})

Set the Reset property of the Timer control to following formula:

IsReset

 

Set the Default property of the Slider control (Slider1) to following formula:

(Timer1.Duration-Timer1.Value)/1000

Set Max property of the Slider control to following formula:

30

The GIF image as below:Test1.gif

 

 

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

3 REPLIES 3
Community Support
Community Support

Hi @Anonymous,

 

I have made a test on my side, please take a try with the following workaround:1.JPG

 

 

Add a Timer control and a Slider control within my screen. 

 

Set the Duration property of the Timer control (Timer1) to following formula:

30000

Set the Text property of the Timer control to following formula:

Text(Time(0, 0,(Timer1.Duration-Timer1.Value)/1000), "hh:mm:ss")

Set the OnTimerEnd property of the Timer control to following formula:

UpdateContext({IsReset:false});UpdateContext({IsReset:true})

Set the Reset property of the Timer control to following formula:

IsReset

 

Set the Default property of the Slider control (Slider1) to following formula:

(Timer1.Duration-Timer1.Value)/1000

Set Max property of the Slider control to following formula:

30

The GIF image as below:Test1.gif

 

 

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

In this video, I show you how to do Flyout menus for PowerApps which is the same concept as Kris wrote up. You use the timer control and some math to slowly move a control. 

Shane - Microsoft MVP, YouTube, and PowerApps Consulting for when you are in a bind to get this fixed quickly. And finally we now have PowerApps Training
Anonymous
Not applicable

guys this works great - many thanks for help 

Helpful resources

Announcements
News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

PP Bootcamp Carousel

Global Power Platform Bootcamp

Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.

secondImage

Power Platform Community Conference On Demand

Watch Nick Doelman's session from the 2020 Power Platform Community Conference on demand!

Top Solution Authors
Top Kudoed Authors
Users online (7,613)