The Timer control in Yeeflow is a versatile and powerful tool designed to enhance user interaction and workflow automation across various application scenarios. It supports both countdown and endless timers, making it a perfect fit for Approval Forms, List Forms, and Dashboard integrations.
When to use this field
The Timer control can be employed in a variety of scenarios, such as:
Event Countdowns: For events or deadlines, providing a visual cue on how much time is left.
Workflow Automation: Trigger actions or notifications based on the timer expiry.
User Interaction: Enhance engagement by incorporating timers in quizzes, tests, or timed forms.
Add Timer to the form
Firstly, find the Timer control in the controls add panel. Then, drag and drop it into a section or container on your form/ List form/ Dashboard.
Set contents of Timer
Select content tab from the control's settings panel, and select General section:
General Settings:
Days, Hours, Minutes, Seconds: Toggle these options on or off depending on the level of granularity needed for your timer.
Labels: Customize the labels for days, hours, minutes, and seconds as per your requirements.
After Expire: Choose the action to be performed after the timer expires. Options include 'None', 'Hide Timer', 'Show Message', and 'Redirect'.
Move to the Settings section:
Type: Select between 'Due Date' for countdown timers and 'Endless Timer' for continuous timing.
Due Date: Set the specific date and time, or set the dynamic due date with expression editor.
Item Size: Choose between fixed and auto-adjusted sizes for the timer display, along with width and height adjustments.
Appearance
Dynamic Display Rules: When you set a dynamic display rule, it behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Set Styles of Timer
Items Gap: Set the gap between timer units.
Alignment: Adjust the alignment of the timer units (left, center, right).
Items:
Background Type: Choose a background style for each timer unit.
Padding: Customize the padding to match the design of your form or dashboard.
Border Type: Select the type of border to use around the timer
Width: Control the thickness of the border around the timer
Color: Choose the border’s color
Radius: Set the border radius to control corner roundness
Shadow: Set options to apply a box shadow on the timer
Digits:
Color: Select the color for the digits.
Typography: Customize the font style and size for the timer's digits.
Padding: Adjust the padding around digits to ensure clear visibility.
Labels:
Color: Select the color for the labels.
Typography: Customize the font style and size for the timer's labels.
Padding: Adjust the padding around labels to ensure clear visibility.
Advanced Settings
Set the Advanced options that are applicable to this control.