Timer
The Timer widget shows the counts for the remaining time or spent time. For example, showing a countdown for the limited-time offer, time remaining to resend the OTP, landing page, etc.
Timer widget
On adding the Timer widget, you can set the following types:
- 1.Count Down: This starts counting down from the specified duration (e.g., 10min) and stops when it reaches the 0th second.
- 2.Count Up: This starts counting up from the 0th second and stops only when you stop it.
Here's how both types of Timer look:
Count Down
Count Up
Count Down
Count Up
Let's build an example that shows the count down timer and allows you to start, stop and reset it.
Here's how it looks:
Countdown timer example
Here are the step-by-step instructions to build such as example:
- 1.
Here's an example of how you can add all the required widget to your project:
- First, click on the + Add Widget and drag the Timer widget from the Base Elements tab or add it directly from the widget tree.
- If you choose type as Count Down, enter the duration into the Countdown Time. Note: Enter this value in ms (i.e. 1000 ms = 1 second). If you want to set the duration to 15 seconds, enter the value as 15000.
- You can also set different time formats using the Format dropdown.
- Now, add three buttons and name them Start, Stop and Reset, which will be used to control this widget.
Building UI
Once the UI is ready, you can now add actions to start, stop and reset the Timer by visiting the following page:
Sometimes you might want to get a callback when the timer ends and add further actions. For example, showing a Snackbar message when the countdown timer finishes and resetting it to its initial state.
For the Count Down type timer, you will get a callback when it reaches the 0th second. And for the Count Up type timer, you will receive the callback when you manually stop the timer.
Here is how you can get a callback when the timer ends/stops:
- Select the Timer widget from the widget tree or the canvas area.
- Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
- See the On Timer End label at the top, and here you can add any action that will be triggered when the timer ends/stops.
Receive a callback when the timer ends and add actions
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
Last modified 8mo ago