Form and Collection UI Components

UI components display or author data elements in form fields or table columns.

UI Components

The following table lists the component types available, their supported datatypes and behavior in the browsing and authoring experience.

Component

Supported Datatypes

Browsing Behavior

Authoring Behavior

Chips

List of Values (Multiple) [1]

Displays the values as a list of chips

Allows selecting multiple values using an auto-complete picker.

Checkbox

Boolean [1]

Displays a disabled checkbox or switch

Checkbox or switch for authoring.

Date Picker

Date [1], Timestamp [1]

Displays the value formatted per the user preferences.

Supports specific date and time picker component.

Hyperlink

String, LongText, Binary [1]

Displays a hyperlink to the URL or binary content, opened in a given target.

Allows authoring the URL or uploading binary content.

ID

ID [1]

Displays the record ID in text format.

Accepts formatted or unformatted ID values.

Image

String, LongText, Binary

Embeds binary content or URL as an image.

Supports image content upload or URL authoring.

Markdown

String, LongText

Renders a text containing Markdown content.

Support authoring markdown text content using a WYSIWYG editor.

Tables can neither be created nor modified in the Markdown authoring component. Existing tables appear as read-only blocks and are unchanged by the Markdown authoring component. To edit tables in text attributes, users should either use inline HTML code or edit the raw Markdown content using a multi-line text field.

Menu

String, List of Values [1]

Displays the value (LOV Label) as unformatted text

Allows selecting a value from a drop down menu using an auto-complete picker.

Object

String, LongText, Binary

Embeds binary content or URL in an iFrame.

Supports binary content upload or URL authoring.

Reference

Reference (FDN) [1]

Displays the referenced record as a hyperlink text or chip

Allows selecting the reference using an auto-complete picker.

Text

UUID [1], String [1], LongText [1], Boolean, Decimal [1], ByteInteger [1], Integer [1], LongInt [1], Date, TimeStamp

Displays the value formatted per the user preferences.

Supports multi-line text and editing format for numbers and dates.

[1] The component type is used by default for this data type.

Common Properties

Form fields properties

The following properties are available for form fields regardless of the component type selected.

Section Property Value Default Value Description

General

Helper Text [1]

String

Helper text displayed under the editing component in an authoring form.

General

Read-Only [1]

Boolean

false

Defines when the current component should be set to read-only in an authoring form.

Component

Background Color

Color

Background color of the component.

Component

Text Alignment

left, center, right

left

Component’s text alignment

Component

Text Color

Color

Component’s text color.

Component

Typography

display-4, display-3, display-2, display-1, headline, title, subhead, body-2, body-1, caption, button

Body-1

Component’s text typography. Note that this property is not available for the Checkbox component.

Label

Visible [2]

Boolean

true

Defines whether the label is visible.

Label

Alignment [2]

left, center, right

right

Label text alignment in a browsing form.

Label

Floating Label [1]

Boolean

false

Whether to use the floating label in an authoring form, if the component supports it. Not supported by the Checkbox and Markdown components.

Label

Position [2]

left, right, top, bottom

left

Position of the label in a browsing form.

Label

Typography [2]

display-4, display-3, display-2, display-1, headline, title, subhead, body-2, body-1, caption, button

caption

Typography of the label.

Component

Background Color

Color

Background color of the component.

Label

Color

Color

Text color for the label.

Label

Icon

Image URL

Icon used instead of the label.

Label

Icon Color

Color

Icon color when an icon is used.

[1] This property only applies to fields in authoring.
[2] This property only applies to fields in browsing.

Table columns properties

The following properties are available for table columns regardless of the component type selected.

Section Property Value Default Value Description

General

Visible By Default

Boolean

true

Defines whether the column is displayed by default. Hidden columns can be displayed with the 'Select columns' action from the collections' action menu.

Column

Alignment

left, center, right

Depends

Column header and content alignment. Default alignment depends on the component’s type and datatype:

  • Hyperlink, Chips : left

  • Text with Decimal,Integer,LongInteger, or ShortInteger datatype: `right

  • Text with String or LongText datatype: left

  • All other component types: center

Column

Header Color

Color

Column header text color.

Column

Text Color

Color

Cell text color.

Column

Background Color

Color

Background color of table cells.

Component Specific Properties

The following properties are specific to component types.

Checkbox

Property Value Default Value Description

Use Switch [1]

Boolean

false

Displays a switch instead of a regular check-box.

Chips

Property Value Default Value Description

Avatar

Boolean

false

Displays the avatar in the chip.

Secondary Text

Boolean

false

Displays the secondary text in the chip, between brackets.

Chips Max Width

String

Maximum horizontal size in pixels of each chip in the list.

Date Picker

Property Value Default Value Description

Display Format

String

Date and time formatting pattern. See Display and Editing Formats for more information.

Editing Format [1]

String

Date and time data entry pattern. See Display and Editing Formats for more information.

Time Picker [1]

Boolean

false

Whether the date picker component should also display a time picker, for timestamps only. For dates, the component never displays the time picker.

Min. Date

Date

Minimum date for the date picker (inclusive). This date should be in the ECMAScript standard format:

  • YYYY-MM-DDTHH:mm:ss.sssZ if Time Picker is selected

  • YYYY-MM-DDTHH:mm:ss.sssZ or YYYY-MM-DD if Time Picker is not selected

Max. Date

Date

Maximum date for the date picker (inclusive). This date should be in the ECMAScript standard format:

  • YYYY-MM-DDTHH:mm:ss.sssZ if Time Picker is selected

  • YYYY-MM-DDTHH:mm:ss.sssZ or YYYY-MM-DD if Time Picker is not selected

Property Value Default Value Description

Display Text

String

<value>

Text displayed for the hyperlink value. The <display-string>|<url> syntax is also supported in the URL when Link Source is set to url. If no display test is specified the URL is displayed.

Link Source

content, url

Depends.

Defines the type of the value, whether it is a binary content or an URL in a string. Defaults to content for binary value, and to URL otherwise.

Open In

same-window, new-window, download, popup_object, popup_image

new-window

Navigation target for the hyperlink.

ID

Property Value Default Value Description

Display Format

String

Display format pattern that can be used to format the number if ID is a number. See Display and Editing Formats for more information.

Image

Property Value Default Value Description

Fallback Image [2]

Binary or String. See Image for more information.

Fallback image when the image value is empty. The image type is declared in the Fallback Image Source.

Fallback Source [2]

content, url

url

Defines the type of the fallback-image expression.

Source

content, url

Depends

Defines the type for this image value. Defaults to content the data type is binary, URL otherwise.

Full Size on Click

Boolean

true

Open the image in full size when it is clicked.

Height

String

200px

Height of the image container in pixels.

Image Alignment

top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, bottom-right

middle-center

Defines how the image is aligned in its container.

Resize Mode

fill, fit, stretch, no-scale, contain

fit

Defines how the image is resized in its container.

  • fill: If at least one of the image dimensions exceeds the area’s: the smallest dimension is scaled down to fill the area and the biggest dimension is cropped. Otherwise height and width are kept unmodified.

  • fit: If at least one of the image dimensions exceeds the area’s: this dimension is scaled down to fit into the area (maintaining the aspect ratio). Otherwise dimensions are kept.

  • stretch: The image is resized to fill the area.

  • no-scale: The image is not resized but cropped to fit into the area (maintaining the aspect ratio).

  • contain: If at least one of the image dimensions exceeds the area’s: this dimension is scaled down to fit into the area (maintaining aspect ratio). Otherwise the image is scaled up to fill the area.

Markdown

Property Value Default Value Description

Char Counter [1]

Boolean

false

Defines whether a character counter is displayed under the markdown component when authoring.

Height

String

200px

Height of the markdown component in pixels.

Max Width

String

Maximum width of the markdown component, in pixels. If no value is specified, all the horizontal space is used.

Menu

Property Value Default Value Description

List Items [1]

String

Semicolon-separated list of list items, used when the List Type is set to manual-list. This list contains only codes. The value displayed and selected is stored.

List Type

list-of-values, manual-list

Depends

Source of the values in the menu: Either the underlying list of value, or a list of values provided in the List Items property. It defaults to list-of-values if the datatype is a list of values.

Display Format

String

Display format pattern used to format the text displayed for a list of values. See Display and Editing Formats for more information.

List Sort

code, label

label

Defines how the list is sorted. Only when List Type is list-of-values

Avatar

Boolean

false

Displays the LOV values' images as avatars for the menu items.

Object

Property Value Default Value Description

Source Type

content, url

content

Defines whether the value contains the content to display or an URL to the content.

Height

String

200px

Height of the object component in pixels.

Max Width

String

Maximum width of the object component, in pixels. If no value is specified, all the horizontal space is used.

Reference

Property Value Default Value Description

Display Card

Display Card

Display card to use to display this reference as a chip in a form or in the auto-complete component when authoring.

Max Width

String

Maximum horizontal size in pixels when this reference is displayed as a chip. Ignored if the Display Type is hyperlink.

Avatar

Boolean

false

Display the avatar in the chip. Ignored if the Display Type is hyperlink.

Secondary Text

Boolean

false

Display the secondary text in the chip, between brackets. Ignored if the Display Type is hyperlink.

Display Type

chip, hyperlink

hyperlink

Defines how to display the reference, as a hyperlink showing the display card primary text, or a chip.

Text

Property Value Default Value Description

Char Counter [1]

Boolean

false

Defines whether a character counter is displayed under the text component when authoring.

Display Format

String

Display format pattern for numbers and dates. See Display and Editing Formats for more information.

Editing Format [1]

String

Data entry format pattern used as a helper when authoring. See Display and Editing Formats for more information.

Max Lines [1]

Number

3

Maximum number of lines for a multi-line component when authoring.

Min Lines [1]

Number

1

Initial number of lines for a multi-line component when authoring.

Multi-Line [1]

Boolean

false

Defines whether to use a multi-line component when authoring.

[1] This property only applies to fields in authoring.
[2] This property only applies to fields in browsing and columns.

Display and Editing Formats

Display Format

Dates

For dates, the display format uses the Simple Date Format patterns, with the following exceptions:

  • The following Simple Date Format pattern letters are not supported: E, F, K, W, z, Z.

Texts and IDs

For texts and IDs, the display format uses the following patterns elements for numeric values:

  • 0: A digit that must be displayed, after the decimal separator, the number of zeros indicates the number of decimals.

  • +: '+' or '-' sign

  • ,: The thousand separator

  • .: The decimal separator

The thousand and decimal separators used in the pattern (that is , and .) will appear in the application for each user according to the user settings. Although users may choose in their settings different separator characters to suit their locale and regional preferences, the patterns are always defined at design-time with the , and . characters.
Number display format examples

In these examples, the results displayed are for user who has a thousand separator set to , and a decimal separator set to . in his preferences.

Number Format Displayed Result

10000

0,0.0000

10,000.0000

10000.25

0,0

10,000

10000.25

+0,0

+10,000

-10000

0,0.0

-10,000.0

10000.1254

0.000

10000.125

10000.1254

0[.]00000

10000.12540

-10000

(0,0.0000)

(10,000.0000)

0.25

0.00000

0.25000

0.25

0.0[0000]

0.25

List of Values

For list of values (LOVs), the display format supports the code and label tokens, which are replaced by the code and label of the list of value item. For example, if you specify the code // label pattern for a gender list of value, the values will appear as F // Female, M // Male, etc.

Editing Format

Dates

For dates, the editing format property supports the same pattern as the display format, and this format is required strictly when inputing the date.

Texts and IDs

For texts and IDs, the editing format property supports the same pattern as the display format, but this pattern is only used to display the original number value. When the user enters values, only the decimal separator (as specified in the user preferences) and sign are taken into account and other characters are ignored.

List of Values

For list of values in menus, the display format supports the code and label tokens, which are replaced by the code and label of the list of value items in the selection menu.