Adding a Timer Widget

Before you begin

Remember: The timer does not start by itself. You must add at least one widget (such as a button) specifically used for managing the timer.

About this task

Use the Timer widget if you need a countdown timer or a stop watch for your app's functionality. To add a timer widget:

Procedure

  1. In the Canvas, open the Widgets tab.
  2. Double-click or drag the Timer widget onto the app canvas.

    Timer widget in the Widgets tab

    The Timer Properties panel displays on the right with its sections.
  3. In the General section, set the following fields:
    1. Enter an ID and Name for the widget or keep the defaults.
  4. In the Timer Properties section, set the following fields:
    1. For Timer Mode, select the type of timer you want the timer to be. Choose from a Stopwatch timer or a Countdown timer.
    2. For Starting Time, enter the starting time of the timer. The format is (hh:mm:ss)
      • Stopwatch: The default is 00:00:00.
      • Countdown: The default is 00:00:01.
        Restriction: The starting time for Countdown must be 00:00:01 or greater.
    3. For Timer Mode, select the time format you want the device user to see. Choose from:
      • 35 (Seconds Only)
      • 12:35 (minutes, seconds)
      • 4:12:35 (hours, minutes, seconds)
      • Custom: Enter any string you want. The string should contain at least one of the following Macros to represent the time:
        • %s% or %m% or %h%: The second/minute/hour without leading zeroes.
        • %ss% or %mm% or %hh%: The second/minute/hour in exactly two digit only.
        • %sss% or %mmm% or %hhh%: The total amount of second/minute/hours.
    4. Optional: Toggle Is Visible to show/hide timer to the device user.
    5. Optional: Toggle Show Timer Icon to show/hide the timer icon.
  5. In the Text Formatting section, change the default formatting settings for text.
  6. In the Widget Alignment section, choose how you want to align your widget in the app.
    • Align Left
    • Center
    • Align Right
  7. Optional: In the Rules section, add a visibility rule to the widget.
    Use visibility rules to control when a widget is visible to the app user. For example, you can create a condition that a widget should only appear after the app user fills in a field or submits a form.
    1. Select Visibility Rule to open the Set Visibility Rule dialog box.
    2. Select whether the visibility rule requires meeting all or any conditions.
    3. Select an app field or variable and an operator from the Field list. Enter the value required for the widget to be visible.
    4. Select Add Condition to add another condition.
    5. Select Save.
  8. Optional: In the Miscellaneous section, decide which name you want to appear in the widget report.
    The Same as widget name setting is the default selection and automatically uses the widget name as the chart title. To choose your own chart title, clear the option and enter a new name.

    You may use special characters except for % & < > { } * | ^ and double spaces.

  9. Move to the Format tab to customize the widget's appearance.
  10. Optional: Add events and actions to the widget.
    Events are activities that you can set to trigger an Action. For example, you can configure a widget to navigate to a new section in the app when the user selects it.
    Important: Events and actions offer a wide range of combinations. The following steps are guidelines only. Replace the listed events and actions with ones that suit your app's needs and structure. Learn more about available events and actions at Events and Actions.

    1. Move to the Events tab.
      Events tab in Widget configuration panel
    2. Choose one of the following events from the Events list:
      • On Timer Ended: Selected by default. Triggers when the timer reaches 00:00:00.
        Restriction: This event triggers for the countdown mode only even though it is available for stopwatch mode.
      • On Timer Ticked: Triggers once every entered Interval of time. For example, if you set 00:00:10, it triggers once every 10 seconds.
      • On Timer Reached: Triggers once for each of the timestamps(s) you have added. By default, under the Time list, there is initially only one time stamp. You can select to add and edit another time stamp. Switch between customizing different timestamps by selecting the radio-button to the left of a time stamp.
        Tip: You may have different actions for each time stamp. Likewise, you may have more than one event for the same time stamp.
    3. Select Add beside Actions.
    4. Select an action such as Run Blockly and configure the action. Select Add to apply it to the widget.
    5. Select Save to save the action.
    6. Repeat for more event and action combinations and return to the Widget Properties tab.
  11. For the other Widget(s) used for managing the timer, configure its Events and Actions with Timer Actions.
  12. Select Save in the SOTI Snap banner to apply your changes.
    Save app button

Results

Tip: Select Preview to see how the widget appears in your app.