Configuration Guide
Configuration Guide
Breadcrumbs

Date Widget

Definition

There are two Widgets allowing to configure the display /edit dates (date, date & time) attribute. 

Date Edit

Date Display
image-20220928-075108.png


image-20220928-075115.png


Configuration

Properties

Properties name

Type

Mandatory

Description

Values (default value in bold)

Edit

Display

required

Boolean

NO

Defines if the attribute is mandatory or not.

true, false

check mark

cross mark

dateFormat

Enum

NO

The date format to be used when displaying.

HOURS_MINUTES, HOURS_MINUTES_SECONDS, DAY_MONTH_YEAR_SHORT, DAY_MONTH_YEAR_LONG, DAY_MONTH_YEAR_HOURS_MINUTES_LONG,DAY_MONTH_YEAR_HOURS_MINUTES_FULL

check mark

check mark

offset

Period

NO

A valid  ISO 8601 period duration (ex "P1D") to shift the date selection on the frontend.

For the edit widget, it applies only for DATETIME attribute when the property "dateOnly" is true, and shifts the date forward.

For the display widget, it applies if configured, and shifts the date backward when displayed in the frontend.

The rationale of this offset is better explained with an example: For the attribute "enabledUntil", if dateOnly is true, a datetime at AM midnight is selected. One might want to indicate that the selected day must also be included as the end of the enabled period and want to shift the datetime by one day. This is done by setting the offset at "P1D". For coherence, the associated display widget should also have the same offset.

Note that if the edit widget is meant to pick a datetime as "dateOnly" with an offset, one should configure the "dateFormat" of the display widget to display as a date (such as DAY_MONTH_YEAR_LONG) as well, thus without hours; otherwise the display will be confusing if shown in another timezone than UTC.

A valid PeriodDuration, null

check mark

check mark

timeZoneStrategy

Enum

NO

SETTING: the timezone used on the frontend for picking/displaying a datetime is defined by the setting ui.usr.timeZone.

BROWSER: the timezone used by the frontend for picking/displaying a datetime is defined by the user's browser local timezone.

SETTING, BROWSER

check mark

check mark

showTooltip

Boolean

NO

Allows to display or not (when hovering over a date attribute) a date time

true, false

cross mark

check mark

backgroundColor

String

NO

Defines the background color.

#ffffff, standard CSS color value

cross mark

check mark

bold

Boolean

NO

Defines if the value is displayed in bold or not.

true, false

cross mark

check mark

fontSize

String

NO

Defines the displayed size.

INHERIT, XX_SMALL, X_SMALL, SMALL, MEDIUM, LARGE, X_LARGE, XX_LARGE

cross mark

check mark

italic

Boolean

NO

Defines if the value is displayed in italic or not.

true, false

cross mark

check mark

textAlign

String

NO

Defines the text alignment.

LEFT, CENTER, RIGHT

cross mark

check mark

textColor

String

NO

Defines the displayed text color.

#000000, standard CSS color value

cross mark

check mark

underline

Boolean

NO

Defines if the value is underlined or not.

true, false

cross mark

check mark

Example

Date Edit

Date Display
XML
<widget id="createdat" xsi:type="ctdbum:AttributeEditorWidgetType">
	<hidden>false</hidden>
    <config>
    	<editor>
        	<editWidget xsi:type="ctdbum:DateEditWidgetType">
            	<hidden>false</hidden>
                <config>
                    <required>false</required>
                    <dateFormat>DAY_MONTH_YEAR_LONG</dateFormat>
					<dateOnly>false</dateOnly>
					<timeZoneStrategy>BROWSER</timeZoneStrategy>
				</config>
			</editWidget>
		</editor>
        <label></label>
        <lockedInUi>false</lockedInUi>
        <mode>READ_WRITE</mode>
        <multiValued>false</multiValued>
        <override>true</override>
	</config>
    <attributeId>createdat</attributeId>
</widget>


XML
<widget id="createdat" xsi:type="ctdbum:AttributeEditorWidgetType">
	<hidden>false</hidden>
    <config>
    	<editor>
        	<displayWidget xsi:type="ctdbum:DateDisplayWidgetType">
            	<hidden>false</hidden>
                <config>
                	<backgroundColor>#ffffff</backgroundColor>
                    <bold>false</bold>
                    <fontSize>INHERIT</fontSize>
                    <italic>false</italic>
                    <textAlign>LEFT</textAlign>
                    <textColor>#000000</textColor>
                    <underline>false</underline>
                    <dateFormat>DAY_MONTH_YEAR_LONG</dateFormat>
					<timeZoneStrategy>BROWSER</timeZoneStrategy>
				</config>
			</displayWidget>
		</editor>
        <label></label>
        <lockedInUi>false</lockedInUi>
        <mode>READ_WRITE</mode>
        <multiValued>false</multiValued>
        <override>true</override>
	</config>
    <attributeId>createdat</attributeId>
</widget>
  • Features

    Design screens and business features to manage objects.