MaestroThe UI design product. |
Form Builder | 19.05
This feature was updated in 19.05.
Maestro comes with the Countdown Timer component, which you can use in several scenarios, such as showing a time left before the form expires or managing a user session timeout.
- Open the Palette pane in the Maestro Editor.
- Locate the Countdown Timer component within the Tools folder.
- Drag the component into the View pane or the Wireframe.
- Configure the component's properties via the Properties pane.
The following properties are available to the Countdown Timer component:
Number of seconds after which to fire OnExpiry event.
Format pattern for countdown timer, as defined by AngularJS date filter. This only applies when the Show Countdown Value is selected.
Show the value of the countdown timer.
Act either as an idle timer, or require full manual control.
The following options are available from the Operating Mode dropdown:
The Idle Timer is reset on any user keystrokes or clicks on the page, regardless of whether it is on any component you can interact with or not.
Act as an interval timer, by restarting each time it fires the
If this option is selected, when a timer is started the timestamp is recorded and the timer update triggers once per second for an active tab. For the inactive tab, that can be reduced to once per minute under certain circumstances. This means that the timer will expire once the timer is run after the start time plus the timer duration passes.
If this option is not selected, the timer will update once per second and decrement the number of seconds remaining, which will work as intended when the window is active for the duration of the timer. Due to this limitation, it is recommended to have this option enabled for all timers.
onExpiry is triggered when the timer finishes.
Rule helpers are context menu options that help you create a snippet of code for a specific task on relating to this component.
The Countdown Timer component can be reset in two ways depending on its Operating Mode:
- Idle Timer / Auto - the timer is reset on user interaction with the form. Usually, it is used for session timeouts.
- Manual Operation - you control and reset the timer using the
The Countdown Timer component can be cancelled using the
The Countdown Timer component can be started using the
Form.getItemFromPath('data.countdownTimer').formatTimeRemaining() that uses the Countdown Time Format property to format it.
- From the object that needs to interact with the timer, click Create Rule and select a rule you want to add to the timer, for example, Click event on a Button.
- Select the Countdown Timer component and right-click on it
- Click Save.
In the example above, we have added a click rule to the timer, which resets the timer by calling the
Next, learn about the Autotab Controller component.