field-row

The field-row component contains other components and displays them on the same row. This component does not indicate a new row; all components are automatically placed in a new row. Instead, this component ensures that items are placed next to instead of underneath each other.

Considerations

• Rows can contain entity-field components:

  • On a default jig or children components

  • On a form component

  • Nested under section components

• A maximum of three components can be displayed per row.

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

Examples and code snippets

Field-row components with entity-fields (Display only)

Field-row

Example showing how rows have been incorporated to display more than one component per row in certain instances.

Examples: See the full example using static data in GitHub. 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.

row-entity-fields (static)

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

row-entity-fields (dynamic)

datasources (static)

datasources (dynamic)

Field-row components on form with children components (Display and input)

field-row on form

Examples: See the full example using dynamic data in GitHub.

Datasource: See the full datasource for dynamic data in GitHub.

form-rows-children (dynamic)

children:
  - type: component.form
    options:
      children:
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_tf
                options:
                  label: Service
                  value: [email protected]
              - type: component.text-field
                instanceId: cleaning_area_tf
                options:
                  label: Area
                  value: [email protected]
        - type: component.field-row
          options:
            children:
              - type: component.number-field
                instanceId: cleaning_serv_time_num
                options:
                  label: Time
                  value: [email protected] & ' minutes'
                  keyboardType: number-pad
              - type: component.checkbox
                instanceId: cleaning_serv_indoor_checkbox
                options:
                  label: Indoor
                  value: [email protected]
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_desc_tf
                options:
                  label: Description
                  value: [email protected]
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_hourly_tf
                options:
                  label: Hourly Rate
                  value: [email protected]
              - type: component.text-field
                instanceId: cleaning_serv_once_tf
                options:
                  label: Once Off Rate
                  value: [email protected]

datasources (dynamic)