Entity fields display data such as text, numbers, dates, and currency from a datasource to the user. These entity fields are found on a default jig. and they can also be nested under field-row and/or section components.
Unlike the section and field-row components, entity-field can not be nested under form components because its functions are for display purposes only.
Because of this, the only configuration option for the entity-field is on a default jig with the data of your choice.
Configuration options
Some properties are common to all components, see Common component properties for a list and their configuration options.
The core structure includes: label and value
There are 2 variants of entity fields available - Basic and Compact.
The Compact variant requires the property isCompact to be set to true. Please note that this is the property of the entity component itself, not of the entity-field.
Also, this variant doesn't allow usage of field-row as entity-field will always cover the whole row.
Other options:
instanceId - The unique identifier for the actual entity field
contentType - There are various types of entity fields that determine the visual display and behavior of the entity-field, including:
Default
Checkbox
Copy
Date
Email
Link
Phone
Signature
Time
rightIcon - There is a list of icons available, but you can customize the design with your own icon
style - There are styling sets:
isNegative
isPositive
isPrimary
isWarning
flex
Examples and code snippets
Different types of entity fields
Basic
Entity fields
Compact
Entity fields
This example demonstrates the visual display and behavior of the entity-fields on this default jig.
Examples:
Basic - See the full example using static data in GitHub.
Compact - See the full example using static data in GitHub.
entity-fields-basic (static)
entity-fields-compact (static)
|
children:-type: component.entity
options:isCompact:truechildren:-type: component.entity-field
options:label: First Name
value: Samantha
contentType: default
rightIcon: person
-type: component.entity-field
options:label: Surname
value: Jackson
contentType: default
rightIcon: person
-type: component.entity-field
options:label: Member
value:truecontentType: checkbox
-type: component.entity-field
options:label: Date of Birth
value:1988-01-19contentType: date
rightIcon: calendar
-type: component.entity-field
options:label: Last Login Time
value: =$fromMillis($toMillis($now()), '[h#1]:[m01][P]')contentType: time
rightIcon: time-clock-circle
-type: component.entity-field
options:label: Clipboard Info
value: Copy me!contentType: copy
-type: component.entity-field
options:label: Contact Number
value: +2776 123 4567
contentType: phone
rightIcon: phone
-type: component.entity-field
options:label: Email Address
value: samjax@email.com
contentType: email
rightIcon: email
-type: component.entity-field
options:label: Web Address
value: samjax@website.me
contentType: link
rightIcon: google
-type: component.entity-field
options:label: About
value: Lorem ipsum dolor sit amet, putent viderer pericula per ex, cu ius sonet referrentur. Cu pri ubique mediocrem maluisset, eum ea assum vivendum constituto. Fierent accusata nec ut, ullum impetus omittam cu per. Perpetua consectetuer no ius. Nam error elitr no, ferri praesent te cum. An commodo aliquando dissentiet duo. Primis eripuit bonorum ius ei, usu cu posse mazim. Elitr alterum mentitum eos cu, sit te quodsi everti neglegentur. Est in diam causae, erat conceptam eum an. Sea ullum causae temporibus ex, libris delectus pro et.
isMultiline:truecontentType: default
Entity fields with a connected datasource
Basic
Entity fields with datasource
Compact
Entity fields with datasource
An example to show how entity fields display when linked to a datasource.
Examples:
Basic - See the full example using static data in GitHub.
Compact - See the full example using static data in GitHub.
Basic - See the full example using dynamic data in GitHub.
Compact - See the full example using dynamic data in GitHub.
Datasources:
See the full datasource for static data in GitHub.
See the full datasource for dynamic data in GitHub.