Time
The time component lets you input and select time. This topic explains how to configure it.
Step 1: Add the component
-
Create a mobile application. For more information, see Create Mobile Application.
-
In the mobile application editor, click the Components icon
on the far left. -
(Optional) Add a column component to configure the page layout. For more information, see Horizontal and Vertical Columns.
-
On the left side of the canvas, above the component list, enter Time in the search box to find the component, then drag it to the canvas center.
For more information about adding components, see Add Component.
After you add the component, on the Style tab in the properties pane on the right, you can configure properties such as name, visibility, opacity, size (Medium by default), theme (Light by default), and time unit (To Second by default).
Step 2: Configure style
-
On the Style tab on the right side of the mobile application editor, configure the component's appearance.
Parameter
Description
Size
Sets the size of the time component. Valid values: Large, Medium, and Small.
Theme
Sets the color theme for the time component: Light or Dark.
Time unit
Sets the smallest selectable time unit. Supported granularities: Day, Hour, Minute, and Second.
Default time
Sets the initial time that the component displays on page load.
This option uses the page load time as a baseline to apply a configured offset. For example, to set the default time to the day the page is opened, select Day as the time unit and set the default time to Current Time
+0days. -
Adjust the component's height, width, and position on the page. For more information, see General Styles.
Step 3: Configure interactions
-
On the Interactions tab on the right side of the mobile application editor, click Add Interaction, and then set the Event and Action.
This component supports the Value Change event. For example, when the component's value changes, you can trigger the Refresh Component action to update another component's data.
For details, see Interaction Configuration.
-
Preview and debug the data and effects displayed by the component. For details, see Preview and Debug.