field-row

3min
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.
﻿
﻿Examples and code snippets ﻿
Field-row components with entity-fields (Display only)
﻿
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)
row-entity-fields (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"
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"
﻿
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)
datasources (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]-services-dd.service
              - type: component.text-field
                instanceId: cleaning_area_tf
                options:
                  label: Area
                  value: [email protected]-services-dd.area
        - type: component.field-row
          options:
            children:
              - type: component.number-field
                instanceId: cleaning_serv_time_num
                options:
                  label: Time
                  value: [email protected]-services-dd.time & ' minutes'
                  keyboardType: number-pad
              - type: component.checkbox
                instanceId: cleaning_serv_indoor_checkbox
                options:
                  label: Indoor
                  value: [email protected]-services-dd.indoor
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_desc_tf
                options:
                  label: Description
                  value: [email protected]-services-dd.description
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_hourly_tf
                options:
                  label: Hourly Rate
                  value: [email protected]-services-dd.hourlyrate
              - type: component.text-field
                instanceId: cleaning_serv_once_tf
                options:
                  label: Once Off Rate
                  value: [email protected]-services-dd.onceoffrate
children:
  - type: component.form
    options:
      children:
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_tf
                options:
                  label: Service
                  value: =@ctx.datasources.cleaning-services-dd.service
              - type: component.text-field
                instanceId: cleaning_area_tf
                options:
                  label: Area
                  value: =@ctx.datasources.cleaning-services-dd.area
        - type: component.field-row
          options:
            children:
              - type: component.number-field
                instanceId: cleaning_serv_time_num
                options:
                  label: Time
                  value: =@ctx.datasources.cleaning-services-dd.time & ' minutes'
                  keyboardType: number-pad
              - type: component.checkbox
                instanceId: cleaning_serv_indoor_checkbox
                options:
                  label: Indoor
                  value: =@ctx.datasources.cleaning-services-dd.indoor
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_desc_tf
                options:
                  label: Description
                  value: =@ctx.datasources.cleaning-services-dd.description
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: cleaning_serv_hourly_tf
                options:
                  label: Hourly Rate
                  value: =@ctx.datasources.cleaning-services-dd.hourlyrate
              - type: component.text-field
                instanceId: cleaning_serv_once_tf
                options:
                  label: Once Off Rate
                  value: =@ctx.datasources.cleaning-services-dd.onceoffrate
﻿
﻿
Updated 24 Jul 2024
Did this page help you?
entity-field
section
field-row

Considerations

﻿Examples and code snippets ﻿

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

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

Examples and code snippets
