Clock

Clock, displays the system time.

Symbol
Menu ribbon	Start > Controls > Input/output > Text output > Clock

The current date and time of the browser in which the web app is running is displayed via the "Clock" control element. The browser in turn obtains the date and time from the operating system settings. In contrast to DateTimeVarOut, no variable is required to display the current time in the control element.

Clock with date and time output

The control element supports the following functionality:

Display of the date
Display of the time
Different date and time formats
Automatic positioning of the date and time display within the control element
Connection to the user administration for blocking operability
Display of the background, the frame, the shadow, etc.
Color display of the background, frame, text, etc., also depending on the status of the control element

You can configure these functionalities via the properties in the Properties window when you select the control in the Designer or in the document outline.

There are no system styles available for the control. You can create your own styles for the control. These styles are available for selection in the "Style" property after creation.

The control element consists of a number of other elements. Both the control itself and its elements can be configured via the properties of the control. Properties for a sub-element of the control can usually be found in the category that bears the name of this element.

Example: The properties for configuring the "Date" element can be found in the Properties window in the "Date" category if you select the control element in the Designer or in the document outline.

The clock and its elements

The control automatically positions the date display ("Time" element) and the time display ("Date" element) within the control. The positioning depends on the setting of the "DateTimeMode" property on the one hand and on the settings of the "AlignItems" and "JustifyContent" properties on the other.

AlignItems

Defines the alignment of the Date and Time elements within the row/column. The property is perpendicular to the setting of the "DateTimeMode" property.

Start

Aligns the elements to the top edge of the row or to the left edge of the column.

AlignItems=Start, JustifyContent=Centre, DateTimeMode=...
End

Aligns the elements to the bottom edge of the row or to the right edge of the column.

AlignItems=End, JustifyContent=Centre, DateTimeMode=...
Centre

Places the elements in the centre of the row/column.

AlignItems=Centre, JustifyContent=Centre, DateTimeMode=...
Baseline

Aligns the elements to the base line (baseline, font line) of your texts.

AlignItems=Baseline, JustifyContent=Centre, DateTimeMode=...
Stretch

The elements are stretched so that they take up the entire row height/column width.

AlignItems=Stretch, JustifyContent=Centre, DateTimeMode=DateTime

JustifyContent

Defines the alignment of the Date and Time elements within the row/column. The property acts in the direction of the setting of the "DateTimeMode" property.

Start

Aligns the elements at the beginning of the respective row/column.
- A column starts at the bottom of the control element at "DateTimeMode" = "TimeCRDate" and at the top at "DateTimeMode" = "DateCRTime".
JustifyContent=Start, AlignItems=Centre, DateTimeMode=...
End

Aligns the elements at the end of the row/column.
- A column ends at the top of the control element at "DateTimeMode" = "TimeCRDate" and at the bottom at "DateTimeMode" = "DateCRTime".
JustifyContent=End, AlignItems=Centre, DateTimeMode=...
Centre

Aligns the elements in the centre of the row/column.

JustifyContent=Center, AlignItems=Center, DateTimeMode=...
Space-between

Inserts the space available in the row/column between the elements.

JustifyContent=Space-between, AlignItems=Centre, DateTimeMode=...
Space-around

Distributes the space available in the row/column evenly around each element.

JustifyContent=Space-around, AlignItems=Centre, DateTimeMode=...
Space-evenly

Distributes the space available in the row/column evenly between an element and the edge of the control/the next element.

JustifyContent=Space-evenly, AlignItems=Centre, DateTimeMode=...