🚀 JigxForms is now live! Use AI to build and share mobile-friendly forms with your field team.
Try it free.
Ctrlk
System StatusSamples on GitHub
For the complete documentation index, see llms.txt. This page is also available as Markdown.

field-row (entity)

The field-row component contains other entity 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.

Field rows can be used in two places, to avoid confusion here is an explanation:

  1. Field-rows used as a standalone component to include input fields/form fields such as text-fields in a single row.

  2. In the entity component allowing you to place entity-fields (read-only) into a single row field-row (entity)

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 the properties and their configuration options.

Examples and code snippets

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

Field-row
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.

children:
  - type: component.entity
    options:
      children:
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Service
                  value: =@ctx.datasources.repair-services-static[id=2].service
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Description
                  value: =@ctx.datasources.repair-services-static[id=2].description
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Hourly Rate
                  value: =@ctx.datasources.repair-services-static[id=2].hourlyRate
              - type: component.entity-field
                options:
                  label: Time
                  value: =@ctx.datasources.repair-services-static[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

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

field-row on form
field-row on form

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

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

Previousentity-fieldNextevent

Last updated

Was this helpful?