Form and collection UI components

This page lists the UI components used to display or author data elements in form fields or table columns.

UI components

The following table lists the component types available, along with their supported datatypes and behavior during browsing and authoring.

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 components.

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 inline frame.

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 dates.

1 The component type is used by default for this datatype.

Common properties

Form field 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

Authoring Mode

String

auto

Determines how the current component appears in a given form.

  • auto: automatically determines the mode to use during runtime.

    • If the field contains a writable expression linked to a writable attribute and if the privileges granted to the current user allow editing: displays the field as an enabled authoring field (Edit mode).

    • If the field contains a writable expression but the privileges granted to the current user do not allow editing: displays the field as a disabled authoring field (Read-Only mode).

    • If the field contains a non-writable expression like an ID or a SemQL expression: uses the Read-Only mode.

  • force-browsing: displays the field as a browsing field (Browsing mode).

    For example, when this option is selected for a Markdown component, only the content specified in the field displays in the form. The formatting controls of the Markdown editor are not displayed.

    Similarly, when this option is selected for a Date component, only the date specified in the field displays in the form. The date picker does not display.

  • force-read-only: always uses the Read-Only mode.

    In Read-Only mode, the edition controls for form fields are visible but disabled.

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. 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 being authored.
2 This property only applies to fields being browsed.

SemQL conditions applied to individual form fields (such as making a field read-only or changing its color) are not enforced during mass-update actions. For data security reasons, we recommend enforcing read-only restrictions through user privileges for attributes that should remain read-only in all contexts, rather than relying solely on SemQL conditions.

Table column 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

Conditional

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 checkbox.

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. For more information, see Display and editing formats.

Editing Format 1

String

Date and time data entry pattern. For more information, see Display and editing formats.

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.

Hyperlink

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 url. If no display text is specified, the URL is displayed.

Link Source

content, url

Conditional

Defines the type of the value, whether it is binary content or a URL in a string. Defaults to content for binary value, or 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 the ID is a number. For more information, see Display and editing formats.

Image

Property Value Default value Description

Fallback Image 2

Binary or String (see Image)

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

Fallback Source 2

content, url

url

Defines the type of the fallback-image expression.

Source

content, url

Conditional

Defines the type for this image value. Defaults to content if binary, or to url otherwise.

Full Size on Click

Boolean

true

Opens the image in full size when 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 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

Conditional

Source of the values in the menu: either the underlying LOV or a LOV 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. For more information, see Display and editing formats.

List Sort

code, label

label

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

Avatar

Boolean

false

Displays the LOV 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 a URL to the content.

When the content of a binary file is unreadable, a download link displays instead of the preview.

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 the auto-complete component when authoring.

Max Width

String

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

Avatar

Boolean

false

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

Secondary Text

Boolean

false

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

Display Type

chip, hyperlink

hyperlink

Defines how to display the reference, as a hyperlink showing the display card’s 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. For more information, see Display and editing formats.

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 being authored.
2 This property only applies to fields being browsed and columns.

Display and editing formats

Display format

Currency

Currency formatting can be achieved by changing the display format for a column in a collection to $, and adjusting the user’s language in their profile settings. The user’s language affects the displayed currency symbol.

For example, setting the Display Format field to $ will display the euro symbol € when the user’s language is set to Français (France) (fr-FR), and the pound symbol £ when the language is set to English (UK) (en-GB).

Also, when specifying the display format, the dollar symbol can be combined with other number formats, such as 0,0.0000$ or $0,0.0000. This combination allows for customizing prefix or postfix currency notation.

The numbro.js documentation offers guidance on formatting numbers like currency, percentages, and other numerical formats according to user preferences and cultural conventions. This library is employed in the current implementation for fields, particularly for browsing purposes.

Dates

For dates, the display format uses the SimpleDateFormat patterns, with the following exceptions:

The following SimpleDateFormat pattern letters are not supported: E, F, K, W, z, Z.

IDs and text

For IDs and text, the display format uses the following pattern elements for numeric values:

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

  • +: plus (+) or minus (-) sign.

  • ,: thousands separator.

  • .: decimal separator.

In an application, the thousands and decimal separators (, and .) used in the pattern conform to each user’s settings. Although users may adjust these separators based on their locale and preferences, the patterns are always defined with the , and . characters during design-time.
Number display format examples

In these examples, the results displayed are for users with a thousand separator set as , and a decimal separator set as . in their 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

Lists of values

For lists 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 items. For example, if you specify the code // label pattern for a gender list of values, the values will appear as F // Female, M // Male, etc.

Percentages

When specifying the display format, the percentage symbol % can be combined with other number formats, such as 0% or (0.00%).

The numbro.js documentation offers guidance on formatting numbers like currency, percentages, and other numerical formats according to user preferences and cultural conventions. This library is employed in the current implementation for fields, particularly for browsing purposes.

Editing format

Dates

For dates, the editing format property supports the same pattern as the display format, and this format is required strictly when inputting the date in a text or date picker field.

IDs and text

The editing format property is ignored by text and ID fields for numbers.

Lists of values

For lists 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.