field-row

5min
The field-row component contains other components and displays them on the same row. This component does not use to indicate a new row as all components are automatically placed in a new row. Instead, this component aids in ensuring that items are placed next to instead of underneath each other. 
Rows can contain entity-field﻿﻿ components (on a default jig﻿ or children components (on a form﻿ component). They can also be 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)
﻿
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)
﻿
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: =@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
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
﻿
See also
﻿﻿Developer reference﻿  
﻿﻿Related examples (Github)﻿
﻿