entity-field
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.
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
Different types of entity fields
Basic
Compact
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 with a connected datasource
Basic
Compact
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.
- Developer reference
