Stopwatch
Stopwatch is usually a DateTime element that allows the user to measure and track a certain amount of time. You can think of this element as a stopwatch that you will use within the application.
The Stopwatch element usually has basic functions such as start, pause, and reset. Within an application, it helps the user to keep track of the time elapsed during a specific activity or period of time. For example, in a sports app, the user can track their running time, or in a kitchen app, they can check the cooking time by measuring a timer.Or you can use the Stopwatch element to determine the time an employee spends on a task.
The Stopwatch element has the following basic features:
Start/Pause:
The user clicks on the green triangle icon to start the measurement and the orange icon to pause it.
Reset:
The user clicks on the red square icon to reset the time.
Time Display:
Called a number or an indicator that shows the user the elapsed time, this element often comes with user interaction. App developers can be used to integrate such elements that allow users to track a certain amount of time directly within the app.
Adding the Stopwatch element
It is very easy to add the Stopwatch element to your application. You need to follow the steps below to add the Stopwatch element.
Drag and drop the Stopwatch element to the screen.
You can customize the Stopwatch element in the Properties panel.
The Stopwatch element supports mobile and web applications.
Stopwatch Element Properties Panel
When the Stopwatch element is selected, the Authorization, Visibility, and Actions sections are displayed in the Properties panel. These sections allow you to customize specific authorization settings and visibility preferences related to the Stopwatch element.
In the Stopwatch element, it is possible to display measurement values in the element without Preview.
You can use Authorization options for the Stopwatch element.
Click here for a detailed examination of adding Authorization processes in elements.
Click here for a detailed examination of Authorization processes based on user roles or screen roles.
Visibility in elements is a feature used to control its visibility or accessibility in certain situations. This feature is often used in application design or functionality.
You can use visibility options to make the Stopwatch element always visible, hidden, or visible/hidden depending on a condition.
Click here for detailed information about adding Visibility to elements.
The visibility of the Stopwatch will be adjusted according to your selections.
In the case where the Stopwatch element is usually used as a timer (stopwatch), there are four important events that trigger certain actions. These events are usually related to the running state of a stopwatch and can be executed as the application state changes. There are onPause, onStart, onStop, and onResume actions specific to the Stopwatch element.
onStart (Start):
The onStart action is triggered when the stopwatch is started (start). This event occurs when the user wants to start a stopwatch. The stopwatch starts measuring time.
onPause (Pause):
The onPause action is triggered when the stopwatch is paused. This event occurs when the user pauses a stopwatch. When the stopwatch is paused, the measured time stops.
onStop (Stop and Reset):
The onStop action is triggered when the stopwatch is stopped completely. This event occurs when the user stops a stopwatch and then wants to reset it. This action can be used to reset the measured time and bring the stopwatch to a ready state.
onResume (Resume):
The onResume action is triggered when you resume a paused stopwatch. This event occurs when the user wants to restart a stopwatch after pausing it.
StopWatch Styling Panel
In the Styling panel, you can edit the Layout, Text, Border, or Fill color of the Stopwatch element. You can customize the style of the Stopwatch element according to these Properties.
In the Stopwatch element, you can use Layout to make visual adjustments such as padding and sizing.
Click to learn more about adding Layout to elements.
Family, Style, and Size/Color properties are supported as textual editing in the Stopwatch element.
The Spacing field is not supported in the Text section for the Stopwatch element. The Size/Color and Options fields are partially supported.
Click to get detailed information about Text settings in elements.
You can add a color or image to the background of the Stopwatch element with Fill.
Click here for detailed information about adding Fill to elements.
You can add borders to the outer edges of Stopwatch and give Radius.
Click here to learn more about adding borders to elements.
Last updated
