entity

The entity component is a container for the following components:

Considerations

The component.entity used with the above-mentioned components is configurable on a jig.default.
Section and field-row are also available under the component.form as its container. Here the entity-field is replaced by the form's children field.
When setting up a component.entity, either a default jig or component.form can be used in the following combinations:
- An entity containing section(s) with rows and entity-field
- An entity containing section(s) and entity-fieldAn entity containing rows and entity-field
- An entity containing entity fields

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Other options

isCompact

When this property is set to true the entity-field will cover the entire row. This compact variant does not allow usage of field-row components. By default, a label is at the top and the value below. isCompact will place the label on the left and the value on the right. Columns are not supported.

Examples and code snippets

Entity example

Compact

Examples: Basic - See the full example using static data in GitHub. Compact - See the full example using dynamic data in GitHub.

children:
  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Biographical & Membership Details
            children:
              - type: component.field-row
                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.field-row
                options:
                  children:
                    - 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: =$now()
                        contentType: time
                        rightIcon: time-clock-circle
        - type: component.section
          options:
            title: Contact & Other Details
            children:
            - 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: [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

children:
  - type: component.entity
    options:
      isCompact: true
      children:
        - type: component.section
          options:
            title: Cleaning Services
            children:
              - type: component.entity-field
                options:
                  label: Service
                  value: [email protected][0].service
              - type: component.entity-field
                options:
                  label: Area
                  value: [email protected][0].area
              - type: component.entity-field
                options:
                  label: Time
                  value: [email protected][0].time & ' minutes'
              - type: component.entity-field
                options:
                  label: Indoor
                  value: [email protected][0].indoor
                  contentType: checkbox
              - type: component.entity-field
                options:
                  label: Description
                  value: [email protected][0].description
                  isMultiline: true
        - type: component.section
          options:
            title: Rates
            children:
              - type: component.entity-field
                options:
                  label: Hourly Rate
                  value: [email protected][0].hourlyrate != null ? @ctx.datasources.cleaning-services[0].hourlyrate :'N/A'
              - type: component.entity-field
                options:
                  label: Once Off Rate
                  value: [email protected][0].onceoffrate != null ? @ctx.datasources.cleaning-services[0].onceoffrate :'N/A'

datasources:
  cleaning-services:
    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] ORDER BY '$.service' ASC

Good afternoon

entity

Considerations

Configuration options

Examples and code snippets

Entity example

See also