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 |
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.
|
||
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 |
Read-Only 1 |
Boolean |
|
Defines when the current component should be set to read-only in an authoring form. |
Component |
Background Color |
Background color of the component. |
||
Component |
Text Alignment |
|
|
Component’s text alignment |
Component |
Text Color |
Component’s text color. |
||
Component |
Typography |
|
|
Component’s text typography. This property is not available for the Checkbox component. |
Label |
Visible 2 |
Boolean |
|
Defines whether the label is visible. |
Label |
Alignment 2 |
|
|
Label text alignment in a browsing form. |
Label |
Floating Label 1 |
Boolean |
|
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 |
|
|
Position of the label in a browsing form. |
Label |
Typography 2 |
|
|
Typography of the label. |
Component |
Background Color |
Background color of the component. |
||
Label |
Color |
Text color for the label. |
||
Label |
Icon |
Icon used instead of the label. |
||
Label |
Icon 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 |
|
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 |
|
Conditional |
Column header and content alignment. Default alignment depends on the component’s type and datatype:
|
Column |
Header Color |
Column header text color. |
||
Column |
Text Color |
Cell text color. |
||
Column |
Background 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 |
|
Displays a switch instead of a regular checkbox. |
Chips
Property | Value | Default value | Description |
---|---|---|---|
Avatar |
Boolean |
|
Displays the avatar in the chip. |
Secondary Text |
Boolean |
|
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 |
|
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:
|
|
Max. Date |
Date |
Maximum date for the date picker (inclusive). This date should be in the ECMAScript standard format:
|
Hyperlink
Property | Value | Default value | Description |
---|---|---|---|
Display Text |
String |
|
Text displayed for the hyperlink value. The |
Link Source |
|
Conditional |
Defines the type of the value, whether it is binary content or a URL in a string. Defaults to |
Open In |
|
|
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 |
|
|
Defines the type of the fallback-image expression. |
Source |
|
Conditional |
Defines the type for this image value. Defaults to |
Full Size on Click |
Boolean |
|
Opens the image in full size when clicked. |
Height |
String |
|
Height of the image container in pixels. |
Image Alignment |
|
|
Defines how the image is aligned in its container. |
Resize Mode |
|
|
Defines how the image is resized in its container.
|
Markdown
Property | Value | Default value | Description |
---|---|---|---|
Char Counter 1 |
Boolean |
|
Defines whether a character counter is displayed under the Markdown component when authoring. |
Height |
String |
|
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 |
|
List Type |
|
Conditional |
Source of the values in the menu: either the underlying LOV or a LOV provided in the List Items property. It defaults to |
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 |
|
|
Defines how the list is sorted. Only when List Type is set to |
Avatar |
Boolean |
|
Displays the LOV images as avatars for the menu items. |
Object
Property | Value | Default value | Description |
---|---|---|---|
Source Type |
|
|
Defines whether the value contains the content to display or a URL to the content. |
Height |
String |
|
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 |
|
Avatar |
Boolean |
|
Display the avatar in the chip. Ignored if Display type is |
Secondary Text |
Boolean |
|
Display the secondary text in the chip, between brackets. Ignored if Display type is |
Display Type |
|
|
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 |
|
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 |
|
Maximum number of lines for a multi-line component when authoring. |
Min Lines 1 |
Number |
|
Initial number of lines for a multi-line component when authoring. |
Multi-Line 1 |
Boolean |
|
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
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.
|
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.