website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components
entity

entity-field

7min

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




Compact

Entity fields
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: true
      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: +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: true
            contentType: default


Entity fields with a connected datasource

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)
|
datasources:
  cleaning-services-dd:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.time' 
        FROM [default/cleaning-services] WHERE '$.service' = "Mattress Cleaning"


See also

  • Developer reference
    • entity field
    • form
    • wsection
  • Related examples (Github)



Updated 19 Sep 2023
Did this page help you?
PREVIOUS
field-row
NEXT
event
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Examples and code snippets
Different types of entity fields
Entity fields with a connected datasource
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service