entity

The entity component is a container for the following components:

• entity-field

• entity-field

• section

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 with sections, row & field

Entity with sections & field

Entity example

Compact

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

Basic-entity-section-row-entity-field

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

Compact-entity-section-entity-field

Datasource (dynamic)

See also

• entity-field

• field-row

• section