The Timer Control is a Custom control used for providing the stopwatch like mechanism in an app using different timer formats. You can use the ticker interval settings to build an interesting mechanism for scenarios like building quizzing apps, online examination apps, Pomodoro technique timer, and many more.
Properties
UI properties
-
Label: Label is the text that is displayed above the container box and helps the user to understand what they are supposed to write.
-
Properties: These properties help you customize the Label by changing the text size, weight ( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.
-
Type: The Type field is automatically generated depending upon the type of control used. In this case, it is a “dhq_stopwatch” type.
-
Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.
-
Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.
-
Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.
-
Submit Data: This field lets you determine whether to send the value of the control or not in Workflow based on various control states. There are three conditions that could be set for this field.
- Always: When this condition is selected, the data in the field will be submitted irrespective of the state of the field.
- Never: When this condition is selected, the data in the field will never be submitted irrespective of the state of the field.
- No When Hidden: When this condition is selected, the data in the field will be submitted if the field is visible and not submitted when the field is hidden.
-
Required: When you select the required option, the field becomes a mandatory field and the user can not submit without filling it.
-
Read Only: When you select this option, the user will no longer be able to edit this field.
-
Hidden: The hidden option helps you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.
-
Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the field even when the user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.
-
Hide Label: This option hides the label of the field from the view.
-
Trigger dependents: Dependent controls are the controls that use other controls in their formula. When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For example, if you have a form where you are adding a text control in one screen and you have another screen where you would be referencing this control in another text control. In that case, the text control is the dependent control. The text control in the second control will evaluate every time when the first text control changes by default. By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.
-
Hide on desktop: This option hides the selected control in the desktop view.
-
Hide on Mobile : This option hides the selected control in the mobile view.
-
Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.
-
Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceeding control depending on the space the previous control has occupied.
Note: Dynamic height, Hide on Mobile, Hide on Desktop, Maintain space when hidden properties are used in Freeflow Editor only.
Properties
-
Auto Start: Toggle switch ON to auto start the timer on loading the screen.
-
Start / Stop button: Toggle switch ON to display the Start / Stop button. If you Enable these then Button Style properties would be enabled below.
-
Ticker interval in ms: This is the ticker interval in milliseconds.
-
Alarm interval in ms: This is the alarm interval in milliseconds.
-
Display format: You can customize the time display format as per your use case.
-
Timer Properties: These properties help you customize the Label by changing the text size, weight ( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.
Button Style Properties
With these Button Style Properties, you can customize the buttons for all the actions that you want to enable.
-
Start Label: Set or Change the label for the Start button.
-
Stop Label: Set or Change the label for the Stop button.
-
Resume Label: Set or Change the label for the Resume button.
-
Reset Label: Set or Change the label for the Reset button.
-
Text: These properties help you customize the Label by changing the text size, weight ( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified), and color of the label.
-
Border: You can set the Border Color and the button Layout or the style as Outlined, Filled or Dashed Outline.
Actions
- on_start: event triggered when you click the Start button.
- on_stop: event triggered when you click the Stop button
- on_reset: event triggered when you click the Reset button
-
alarm_interval: is an alarm event that is periodically triggered to define the action to be repeated after the stipulated alarm interval.
after the specified time in milliseconds.
How to Use a Timer Control?
Start with selecting the Timer Control from the Custom section of the Controls Menu.
The Timer Control will then appear on the screen in the builder, you can then set all the above properties as per your requirements. Now to use the control, you need to use its actions to start, pause and stop/ reset the watch.
Now let us see how we can use this control. Assume that you are creating a tracker or a simple Pomodoro Timer apps which have a stopwatch or timer for 25 minutes which starts when you start the app as well as shows the task that you need to complete. It might also have Confetti blown after you click the Stop button on completion of the task.
or we may take an example where we start the clock when the exam starts
-
Add the Timer control and set the Ticker Interval in milliseconds.
-
You need to set the action to be performed on click of the Start button to show the controls with the questions.
-
Then with the click of the Stop button you can submit the questions to the sheet and also add the Confetti action to burst the confetti on completion of the exam.
