Timer

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

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:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesTimer_
XXXXX
BasicTypeClick 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.
NoCount Down
BasicFormatClick this list to select one of the following timing formats for the timer element:
a. mm:ss
b. hh:mm:ss
c. ss
Yesmm:ss
BasicCount 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 }}
BasicIntervalIn 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
BasicVisibleIf you click this check box, related page does not display the timer element.NoSelected check box
BasicBusiness RuleClick 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
BasicEnableIf 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.
NoSelected check box
BasicBusiness RuleClick 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
StyleStylesAllows 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
MarginAllows 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.No4
Style-
Alignment Spacing
Element’s AlignmentThis 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.
NoLeft
Style-Timer TextFontClick this list and then select the font (for example, Aboreto) of timer’s text.No Open Sans
Style-Timer TextSizeIn this box, enter the size of the font in pixel unit.Yes12
Style-Timer TextColorClick 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 TextWeightIn this box, enter a numeric value. This numeric value specifies the timer text’s font’s thickness.Yes4
Style-Timer TextLetter SpacingIn this box, enter a numeric value that specifies the space between two characters in the timer’s text.No0

Data Configuration

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

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicEntity PathClick 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
Was this article helpful?
YesNo