website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components
entity

section

6min

The section component is used to group related items together under a single title. A section can be set up on a jig.default under the entity component or on a form component as its container.

This component can contain field-row and entity-field components or children components on a form component.

A section component can be set up in the below combinations:

  1. An entity containing section(s) with rows and entity-field for display purposes
  2. An entity containing section(s) and entity-field for display purposes
  3. A form component containing section(s) with rows and children components for display/capturing purposes
  4. A form component containing section(s) and children components for display / capturing purposes

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



Examples and code snippets 

The Entity with sections, rows, and entity fields (Display only)

Document image


Using sections, rows, and entity fields to create relevant display sections for the information to be functional yet elegant and neatly organized.

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.

Section-rows-entity-fields (static)
Section-rows-entity-fields (dynamic)
datasources (static)
datasources (dynamic)
|
datasources:
  cleaning-services-dynamic:
    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]


Form with sections, rows, and children components (Display and input)

Document image


Similar to the above example, this has the same functionality, except that this is for adding or editing data too, and not just for display purposes.

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

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

form-section-row (dynamic)
datasources (dynamic)
|
children:
  - type: component.form
    options:
      children:
        - type: component.section
          options:
            title: Cleaning Services
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.text-field
                      instanceId: cleaning_serv_tf
                      options:
                        label: Service
                        value: =@ctx.datasources.cleaning-services-dynamic[0].service
                    - type: component.text-field
                      instanceId: cleaning_serv_area_tf
                      options:
                        label: Area
                        value: =@ctx.datasources.cleaning-services-dynamic[0].area
              - type: component.field-row
                options:
                  children:
                    - type: component.number-field
                      instanceId: cleaning_serv_time_num
                      options:
                        label: Time in mins
                        value: =@ctx.datasources.cleaning-services-dynamic[0].time
                        keyboardType: number-pad
                    - type: component.checkbox
                      instanceId: cleaning_serv_indoor_checkbox
                      options:
                        label: Indoor
                        value: =@ctx.datasources.cleaning-services-dynamic[0]].indoor
                     
              - type: component.field-row
                options:
                  children:
                    - type: component.text-field
                      instanceId: cleaning_serv_desc_tf
                      options:
                        textArea: dynamic
                        label: Description
                        value: =@ctx.datasources.cleaning-services-dynamic[0].description
                        isMultiline: true
        - type: component.section
          options:
            title: Rates
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.text-field
                      instanceId: cleaning_serv_hourly_tf
                      options:
                        label: Hourly Rate
                        value: =@ctx.datasources.cleaning-services-dynamic[0].hourlyrate != null ? @ctx.datasources.cleaning-services-dynamic[0].hourlyrate:'N/A'
                    - type: component.text-field
                      instanceId: cleaning_serv_once_tf
                      options:
                        label: Once Off Rate
                        value: =@ctx.datasources.cleaning-services-dynamic[0].onceoffrate != null ? @ctx.datasources.cleaning-services-dynamic[0].onceoffrate :'N/A'


Entity with sections and entity-fields (Display only)

Basic

Document image


Compact

Document image


This is another example for display purposes only, but this time without the rows. Note the difference in the fields as they now display below each other instead of numerous entity-fields in a row.

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

Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

section-entity-field (static)
section-entity-field-compact (static)
section-entity-field (dynamic)
section-entity-field-compact (dynamic)
datasources (static)
datasources (dynamic)
|
datasources:
  repair-services-static:
    type: datasource.static
    options:
      data:
        - id: 1
          description: Installation or repairs for doors. Doors to be provided by client
          hourlyRate: 70
          illustration: http://clipart-library.com/data_images/436224.png
          image: https://images.unsplash.com/photo-1500281781950-6cd80847ebcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80
          materials: false
          service: Door Installation/Repair
          time: 60
        - id: 2
          description: Repairs to door handles 
          hourlyRate: 40
          illustration: http://clipart-library.com/img1/1332215.jpg
          image: https://images.unsplash.com/photo-1538766017398-415434a31a5b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
          materials: true
          service: Door Handle/Lock Repairs
          time: 60        
        - id: 3
          description: Installation or repairs of tiled surfaces. Tiles have to be provided by client
          hourlyRate: 110
          illustration: http://clipart-library.com/images/kcKnbzbXi.jpg
          image: https://images.unsplash.com/photo-1523413184730-e85dbbd04aba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
          materials: false
          service: Tile Installation/Repair
          time: 120
        - id: 4
          description: Installation or repairs of dry-wall surfaces
          hourlyRate: 80
          illustration: http://clipart-library.com/img1/505759.jpg
          image: https://images.unsplash.com/photo-1628901551715-7234d14fb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
          materials: true
          service: Drywall Installation/Repair
          time: 120
        - id: 5
          description: Repairs to bathroom rails, toilets, etc
          hourlyRate: 90
          illustration: http://clipart-library.com/new_gallery/53-530190_black-and-white-toilet-png.png
          image: https://images.unsplash.com/photo-1585313647787-7a061b5a85a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1423&q=80
          materials: true
          service: Bathroom Repairs
          time: 60
        - id: 6
          description: Painting as required. Paint and tools not provided 
          hourlyRate: 70
          illustration: http://clipart-library.com/img/853166.jpg
          image: https://images.unsplash.com/photo-1562259949-e8e7689d7828?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1431&q=80
          materials: false
          service: Painting Services
          time: 120
        - id: 7
          description: Repairs to fences. Tools and items not included
          hourlyRate: 90
          illustration: http://clipart-library.com/img/18345.gif
          image: https://images.unsplash.com/photo-1583805978118-ba9a81ac1399?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
          materials: false
          service: Fence Installation/Repair
          time: 60
        - id: 8
          description: Removal of graffiti and painting. Paint and brushes not included in cost
          hourlyRate: 110
          illustration: http://clipart-library.com/images/6cy5aL5gi.jpg
          image: https://images.unsplash.com/photo-1581850518616-bcb8077a2336?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
          materials: false
          service: Removal of Graffiti
          time: 120
        - id: 9
          description: Repairs to cupboard doors
          hourlyRate: 60
          illustration: http://clipart-library.com/img1/1605140.jpg
          image: https://images.unsplash.com/photo-1522791465802-47616431a4cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1451&q=80
          materials: true
          service: Cupboard Door Repairs
          time: 60
        - id: 10
          description: Plumbing issues and repairs
          hourlyRate: 90
          illustration: http://clipart-library.com/images_k/plumbing-silhouette/plumbing-silhouette-6.png
          image: https://images.unsplash.com/photo-1591804774220-c1db3673d05b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80
          materials: true
          service: Plumbing
          time: 60


Form with sections and entity-fields (Display and input)

Document image


This is the same as the above, again with the exception of being used in a form component and not just being for display purposes, but allowing input from the user.

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

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

form-section-children (dynamic)
datasources (dynamic)
|
children:
  - type: component.form
    options:
      children:
        - type: component.section
          options:
            title: Cleaning Services
            children:
              - type: component.text-field
                instanceId: cleaning_serv_tf
                options:
                  label: Service
                  value: =@ctx.datasources.cleaning-services-dynamic[0].service
              - type: component.text-field
                instanceId: cleaning_serv_area_tf
                options:
                  label: Area
                  value: =@ctx.datasources.cleaning-services-dynamic[0].area
              - type: component.number-field
                instanceId: cleaning_serv_time_num
                options:
                  label: Time
                  value: =@ctx.datasources.cleaning-services-dynamic[0].time & ' minutes'
                  keyboardType: number-pad
              - type: component.checkbox
                instanceId: cleaning_serv_indoor_checkbox
                options:
                  label: Indoor
                  value: =@ctx.datasources.cleaning-services-dynamic[0].indoor
              - type: component.text-field
                instanceId: cleaning_serv_desc_tf
                options:
                  label: Description
                  value: =@ctx.datasources.cleaning-services-dynamic[0].description
                  isMultiline: true
        - type: component.section
          options:
            title: Rates
            children:
              - type: component.text-field
                instanceId: cleaning_serv_hourly_tf
                options:
                  label: Hourly Rate
                  value: =@ctx.datasources.cleaning-services-dynamic[0].hourlyrate != null ? @ctx.datasources.cleaning-services-dynamic[0].hourlyrate:'N/A'
              - type: component.text-field
                instanceId: cleaning_serv_once_tf
                options:
                  label: Once Off Rate
                  value: =@ctx.datasources.cleaning-services-dynamic[0].onceoffrate != null ? =@ctx.datasources.cleaning-services-dynamic[0].onceoffrate :'N/A'


See also

  • Developer reference
  • Related examples (Github)



Updated 19 Sep 2023
Did this page help you?
PREVIOUS
entity
NEXT
field-row
Docs powered by
Archbee
TABLE OF CONTENTS
Examples and code snippets
The Entity with sections, rows, and entity fields (Display only)
Form with sections, rows, and children components (Display and input)
Entity with sections and entity-fields (Display only)
Form with sections and entity-fields (Display and input)
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service