Timer

You can use the “Timer” element for the timing action. In the Timer element, the timing action takes place by counting down or counting up. You can configure the Timer element’s counting by defining the “Type” property.

For instance:- You can define the Timer’s timing action to enter the OTP in 120 seconds, or you can define the timer’s timing action to make the welcome screen disappear in 10 seconds.

Usage

When to use

You can use the timer element when: 1. You want the user to enter the OTP in a specific timeframe. 2. You want to make a screen appear or disappear after a configured timeframe 3. You want an event to trigger after a configured timeframe

Timer Configuration

The “Timer” element contains the following properties:

• UI Configuration
• Data Configuration
• Event Configuration

UI Configuration

For the “Timer” element, you can configure the following properties:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rules
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	Timer_ XXXXX
Basic	Type	Click this list and then select one of the following values: a. Count Down: If you select this option, the timer element counts down in a fixed unit (for example, a seconds) from an arbitrary starting number to another arbitrary number or zero. b. Count Up: If you select this option, the timer counts up in a fixed unit (for example, a second) from zero or an arbitrary starting number to another arbitrary ending number.	No	Count Down
Basic	Format	Click this list to select one of the following timing formats for the timer element: a. mm:ss b. hh:mm:ss c. ss	Yes	mm:ss
Basic	Count Time(Ss)	This property allows you to configure the count range (numeric difference between minimum count value and maximum count value) in the timer element. You can define the count time as follows: a. Use the Static function: 1. Click in the Count Time(Ss) box, a smart selector expands and then displays the list of functions and attributes. 2. In the list, select Static, the box displays the Static function as follows: Static(value,Number) 3. In the Static function, click the value parameter and then enter a numeric value (for example, 60). The value that you enter in place of the value parameter specifies the count range of 60 units. It means that the timer will count up or count down until 60 units. b. Use an attribute 1. Click in the Count Time(Ss) box, a smart selector expands and then displays the list of functions and attributes. 2. In the list, select an attribute to fetch the value of the count range from the selected attribute dynamically.	Yes	{{ fx }}
Basic	Interval	In this box, enter a value that specifies the numeric difference between two count units. In this box, if you enter ‘2’, the timer will count up or count down as follows: i.) 0, 2, 4, 6….. or 1, 3, 5, 7 ii) 7, 5, 3, 1 or 12, 10, 8, 6	Yes		When Count Time(Ss) = Static
Basic	Visible	If you click this check box, the related page does not display the timer element.	No	Selected check box
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	If you click this check box, the related page displays the timer element as an active element. The active timer element counts up and counts down. The inactive timer element does not perform the function.	No	Selected check box
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
Style	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.	No	Default
Style- Alignment Spacing	Margin	Allows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.	No	4
Style- Alignment Spacing	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
Style-Timer Text	Font	Click this list and then select the font (for example, Aboreto) of timer’s text.	No	Open Sans
Style-Timer Text	Size	In this box, enter the size of the font in pixel unit.	Yes	12
Style-Timer Text	Color	Click the left color box, and a color canvas opens. In the color canvas, move the circle to define the timer text’s font’s color.	No	#6F6F6F
Style-Timer Text	Weight	In this box, enter a numeric value. This numeric value specifies the timer text’s font’s thickness.	Yes	4
Style-Timer Text	Letter Spacing	In this box, enter a numeric value that specifies the space between two characters in the timer’s text.	No	0

Data Configuration

For the Timer element, you can configure the following data property:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rules
Basic	Entity Path	Click in this box, and a smart selector expands. The smart selector displays the list of the entities and functions. In the list, you can select an entity for the following purposes: 1. To store the data in the entity 2. To fetch the data from the entity dynamically.	No	{{ fx }}

Event Configuration

on the “Time Picker” element, you can configure the following events:

• onIntervalChange

• onFinished