Skip to content

Timer#

Screenshot showing a countdown timer icon.

Overview#

The Timer widget places a timer in a UI Page that can be configured to run as a countdown timer or as a stopwatch. The user can configure the widget with an end date or with a specific time to countdown until the timer expires. Separate warning levels can also be configured so that the timer can change color to indicate that those thresholds have been reached. When the timer reaches zero, the time values on the widget will flash to indicate the final value has been reached.

Screenshot showing a countdown timer configuration interface.

General Steps#

To use the Timer widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Timer from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Screenshot showing a countdown timer interface with start, pause, and reset buttons.

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color.

    timerStyle

  2. In the Setup tab, you can configured the widget using the following fields:

    • Display Mode - Choose between Standard or Minimal display modes.
    • Timer Type - Select the type of timer to use. Options include Countdown Timer or Stopwatch.

    If the Timer Type is Countdown:

    • Countdown by - Specify whether to countdown by Date or Time.
      • If Date is selected, choose the End Date and the Time Format from the available options.
      • If Time is selected, choose values for Days, Hours, Minutes and Seconds.
    • Show Time Units - Determine whether to display the time units. This option is set to true by default.
    • Show End Date - Decide whether to display the end date. This option is set to false by default.
    • Use Warning Colors - Specify whether to use warning colors. This option is set to false by default. If enabled, you should define the Warning Date and Danger Date.

    If the Timer Type is Stopwatch:

    • Auto Start - Determine whether the timer should start automatically upon component initialization. This option is set to true by default.
    • Start Date - Set the start date for the stopwatch.
    • Time Format - Select the desired time display format.

    Screenshot showing a countdown timer setup with options for selecting a time display format.

    Screenshot showing a countdown timer setup with stopwatch options.

  3. Optionally, define the Links between this widget and other elements of the UI Page.

    timerLinks

  4. By saving and closing the settings, the widget will be changed accordingly.