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

Some properties are common to all components, see Common component properties for a list and their 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 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

Different types of entity fields

Basic

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)

children:
  - type: component.entity
    options:
      children:
        - 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: true
            contentType: checkbox
        - type: component.entity-field
          options:
            label: Date of Birth
            value: 1988-01-19
            contentType: 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: [phone]
            contentType: phone
            rightIcon: phone
        - type: component.entity-field
          options:
            label: Email Address
            value: [email protected]
            contentType: email
            rightIcon: email
        - type: component.entity-field
          options:
            label: Web Address
            value: [email protected]
            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: true
            contentType: default

entity-fields-compact (static)

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.

entity-fields-basic (static)

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Service
            value: [email protected][id=1].service
        - type: component.entity-field
          options:
            label: Hourly Rate
            value: [email protected][id=1].hourlyRate
        - type: component.entity-field
          options:
            label: Time
            value: [email protected][id=1].time & ' minutes'
        - type: component.entity-field
          options:
            label: Materials
            value: =(@ctx.datasources.repair-services-static[id=1].materials = 'True' ? true :false)
            contentType: checkbox
        - type: component.entity-field
          options:
            label: Description
            value: [email protected][id=1].description

entity-fields-compact (static)

entity-fields-basic (dynamic)

entity-fields-compact (dynamic)

children:
  - type: component.entity
    options:
      isCompact: true
      children:
        - type: component.entity-field
          options:
            label: Service
            value: [email protected]
        - type: component.entity-field
          options:
            label: Area
            value: [email protected]
        - type: component.entity-field
          options:
            label: Time
            value: [email protected] & ' minutes'
        - type: component.entity-field
          options:
            label: Indoor
            value: [email protected]
            contentType: checkbox
        - type: component.entity-field
          options:
            label: Description
            value: [email protected]
        - type: component.entity-field
          options:
            label: Hourly Rate
            value: [email protected]

datasources (static)

datasources (dynamic)

Entity-fields with right icons in color

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.

Entity-field with color

entity-right-icons.jigx

title: Entity field with right icons in color
type: jig.default
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            rightIcon: pin-location
            # Change the color of the icon by adding a style property
            style:
              isPrimary: true
            label: street
            value: 15 Jason Ave
        - type: component.entity-field
          options:
            label: City
            rightIcon: house-2-alternate
            style:
              isPositive: true
            value: London
        - type: component.entity-field
          options:
            label: ZIP code
            rightIcon: alert-circle
            style:
              isWarning: true
            value: 987 65
        - type: component.entity-field
          options:
            label: country
            rightIcon: maps-pin
            style:
              isPrimary: true
            value: United Kingdom
        - type: component.entity-field
          options:
            label: Contact number
            rightIcon: alert-triangle
            style:
              isNegative: true
            value: "12"