Components
entity

entity-field

5min

Entity fields display data such as text, numbers, dates, and currency from a datasource to the user. These entity fields are found on a jig.default and can be nested under field-row and/or section components but not under component.form as it is used for display purposes only.

Configuration options



Core structure



label

Add a label for the entity-field, you can add text or an expression.

value

Add a value to display in the entity-field, you can add text or an expression.

Other options



contentType

Various types of entity fields determine the visual display and behavior of the entity-field, including:

  • default
  • checkbox
  • copy
  • date
  • email - format: [email protected]
  • link
  • phone- format: 1234567890 or +001234567890 (no spaces)
  • signature
  • time

instanceId

The unique identifier for the entity field.

rightIcon

A list of icons is available. See Jigx icons for more information.

style

The following styling set is available and works in conjunction with rightIcon to determine the color of the icon and the enitity-field line separator:

  • isNegative
  • isPositive
  • isPrimary
  • isWarning

Consideration

  • There are two variants of entity fields available - Basic and Compact.
    • The Compact variant requires the property isCompact to be set to true.
    • This is the entity component's property, not the entity-field.
  • When using the contentType: phone, ensure the phone number entered contains no spaces; this allows you to click on the field to initiate a call from your device.

Examples and code snippets 

Basic

Entity fields
Entity fields




Compact

Entity fields compact
Entity fields 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-basic (static)
entity-fields-compact (static)


Basic

Entity fields with datasource
Entity fields with datasource


Compact

Entity fields with datasource
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.

entity-fields-basic (static)
entity-fields-compact (static)
entity-fields-basic (dynamic)
entity-fields-compact (dynamic)
datasources (static)
datasources (dynamic)


In this example, the rightIcons color is determined by adding a style property to each entity-field.

Examples: See the full example using static values in GitHub.

Right icons in color
Right icons in color

YAML




Updated 24 Jul 2024
Doc contributor
Did this page help you?