section

Learn how to use the section component in your user interface to group related items together.

The section component groups 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. The component can contain field-row and entity-field components or children components on a form component.

A component.section can be set up with the following combinations:

1. An entity containing sections with rows and entity-field for display purposes.

2. An entity containing sections and entity-field for display purposes.

3. A form component containing sections with rows and children for display/capturing purposes.

4. A form component containing sections and children components for display/capturing purposes.

5. Horizontal lists cannot be used with the section components as an empty white jig will be displayed.

Configuration options

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

Core structure
title	The title property defines the main text displayed in the section. It supports multiple configuration options; you can provide a static string, bind it dynamically using an expression, or extend it with advanced styling and formatting. You can control text appearance using properties such as fontSize, isbold, and color, transform, as well as specify the numberOfLines to display.
children	Add components that are grouped inside the section, such as number, text, and email fields. Text that can be evaluated, translated, and formatted

Other options
icon	Icon to be displayed on the left side of the header. The icon displays on the left side of the section, providing a visual cue. The icon can be fully customized using styling options such as type (duotone, contained, or basic), shape (rounded, circle, or basic), and color to align with your app’s design.
subtitle	The subtitle property defines the secondary text displayed beneath the section’s title. It supports multiple configuration options; you can provide a static string, bind it dynamically using an expression, or extend it with advanced styling and formatting. You can control text appearance using properties such as fontSize, isbold, and color, transform, as well as specify the numberOfLines to display.

Actions
actions	The action property defines what happens when the section’s action button is tapped. You can configure it to trigger any supported app action, such as navigating to another screen, opening a URL/map, or updating data. Use IntelliSense to explore the full list of available actions.

State
[email protected].	status	Global state variable that can be used throughout the solution.
[email protected].	filter searchtext	Jig-level state that applies to the specific jig (screen) context, with available keys depending on the jig type (e.g., for list jigs: activeItem, filter, searchText, etc.)
[email protected].	value	State variable of a specific component in the jig.

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

Considerations

• When no title formatting or styling is applied, section titles default to transform: UPPERCASE with isSubtle: true.

• You can determine the fontSize by configuring an expression.

Examples and code snippets

Sections with icons, text styling, rows, and entity fields

Jig with sections, icons and text styling

Using sections, rows, and entity fields, along with icons and text styling, to create relevant display sections for information that is functional, elegant, and neatly organized. (Display only)

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

Section-rows-entity-fields (dynamic)

title: Sections, Rows and Entity Fields
type: jig.default
description: Jig to display sections with icons, text styling, rows & entity fields

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: [email protected][0].image
          
children:
  - type: component.entity
    options:
      children:
         # Section added for services.
        - type: component.section
          options:
           # Section header text with font and boldness defined.
            title:
              text: Cleaning Services
              fontSize: regular
              isBold: true
            # Section header icon with styling defined.
            icon:
              name: cleaning-broom
              color: color1
              shape: rounded
              type: contained
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Service
                        value: [email protected][0].service
                    - type: component.entity-field
                      options:
                        label: Area
                        value: [email protected][0].area
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Time
                        value: [email protected][0].time & ' minutes'
                    - type: component.entity-field
                      options:
                        contentType: checkbox
                        label: Indoor
                        value: [email protected][0].indoor
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        isMultiline: true
                        label: Description
                        value: [email protected][0].description
        # Section added for rates.              
        - type: component.section
          options:
          # Section header text with font and boldness defined.
            title:
              text: Rates
              fontSize: regular
              isBold: true
            # Section icon with styling defined.  
            icon:
              name: currency-dollar
              color: color4
              shape: rounded
              type: contained
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Hourly Rate
                        value:
                          [email protected][0].hourlyrate != null ?
                          @ctx.datasources.cleaning-services-dynamic[0].hourlyrate:'N/A'   
                    - type: component.entity-field
                      options:
                        label: Once Off Rate
                        value:
                          [email protected][0].onceoffrate != null ?
                          @ctx.datasources.cleaning-services-dynamic[0].onceoffrate:'N/A'

datasources (dynamic)

Sections with text styling, rows, and children components (Display and input)

Jig with sections text styling and actions

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. The execute-entity action is added to the section header.

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

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

form-section-row-children-dd.jigx

title: Form with Sections and Children Components
description: Jig to display a form with sections & children components
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: [email protected][0].image

children:
  - type: component.form
    options:
      children:
        # Section added for services.
        - type: component.section
          options:
            # Section header text with font, color and boldness defined.
            title:
              text: Cleaning Services
              fontSize: medium
              color: color1
              isBold: true
            # Section header action to update the Dynamic Data.  
            actions:
              - type: action.execute-entity
                options:
                  title: Update Service & rates
                  provider: DATA_PROVIDER_DYNAMIC
                  entity: default/cleaning-services
                  method: update
                  data:
                    id: sectionId
                    service: [email protected]_serv_tf.state.value
                    area: [email protected]_serv_area_tf.state.value
                    time: [email protected]_serv_time_num.state.value
                    indoor: [email protected]_serv_indoor_checkbox.state.value
                    description: [email protected]_serv_desc_tf.state.value
                    hourlyRate: [email protected]_serv_hourly_tf.state.value
                    onceOffRate: [email protected]_serv_once_tf.state.value  
            children:
              - type: component.text-field
                instanceId: cleaning_serv_tf
                options:
                  label: Service
                  value: [email protected][0].service
              - type: component.text-field
                instanceId: cleaning_serv_area_tf
                options:
                  label: Area
                  value: [email protected][0].area
              - type: component.number-field
                instanceId: cleaning_serv_time_num
                options:
                  label: Time
                  value: [email protected][0].time & ' minutes'
                  keyboardType: number-pad
              - type: component.checkbox
                instanceId: cleaning_serv_indoor_checkbox
                options:
                  label: Indoor
                  value: [email protected][0].indoor
              - type: component.text-field
                instanceId: cleaning_serv_desc_tf
                options:
                  label: Description
                  value: [email protected][0].description
                  isMultiline: true
        # Section added for rates.           
        - type: component.section
          options:
            # Section header text with font, color and boldness defined.
            title:
              text: Rates
              fontSize: medium
              color: color4
              isBold: true
            children:
              - type: component.text-field
                instanceId: cleaning_serv_hourly_tf
                options:
                  label: Hourly Rate
                  value: [email protected][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: [email protected][0].onceoffrate != null ? @ctx.datasources.cleaning-services-dynamic[0].onceoffrate :'N/A'

datasources (dynamic)

Sections with icons & multi-lined subtitle

Sections with icons, multi-line subtitle, list children

This example demonstrates how to use sections with styled icons, formatted titles, and multi-line subtitles to create a clear and visually engaging layout. Each section represents a project team, displaying their key details and task summaries in an organized structure.

Examples: See the full example in GitHub.

sections-icon-subtitle.jigx

title: Team task list
description: List displaying sections per team and multiple tags
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      options:
        source:
          uri: https://images.unsplash.com/photo-1590402494628-9b9acf0b90ae?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
      type: component.image

children:
 # Section added for team A.  
  - type: component.section
    options:
     # Section header title text with font and boldness defined.
      title:
        text: Team A
        fontSize: medium
        isBold: true
      # Section header styled icon. 
      icon:
        name: text-format-capital-formatting
        color: color1
        shape: rounded
        type: contained
      # Section header with subtle subtitle multi-lined text.  
      subtitle:
        text: Manage and track your team’s tasks per project—keeping priorities, progress, and ownership visible to everyone involved.
        fontSize: regular
        isSubtle: true
        isBold: false
        numberOfLines: 3
      children:
        - type: component.list
          options:
            data: [email protected][team='teamA' and taskStatus!='Complete']
            maximumItemsToRender: 8
            item:
              type: component.list-item
              options:
                isContained: true
                title: [email protected]
                subtitle: [email protected]
                tags:
                  - text: [email protected]
                    color: warning
                  - text: [email protected]
                    color: color2
                leftElement:
                  element: avatar
                  text: [email protected]
                  uri: [email protected]
  # Section added for team B.
  - type: component.section
    options:
     # Section header title text with font and boldness defined.
      title:
        text: Team B
        fontSize: medium
        isBold: true
      # Section header styled icon.   
      icon:
        name: text-bold-formatting
        color: color4
        shape: rounded
        type: contained
      # Section header with subtle subtitle multi-lined text.   
      subtitle:
        text: Manage and track your team’s tasks per project—keeping priorities, progress, and ownership visible to everyone involved.
        fontSize: regular
        isSubtle: true
        isBold: false
        numberOfLines: 3
      children:
        - type: component.list
          options:
            data: [email protected][team ='teamB' and taskStatus!='Complete']
            maximumItemsToRender: 8
            item:
              type: component.list-item
              options:
                isContained: true
                title: [email protected]
                subtitle: [email protected]
                tags:
                  - text: [email protected]
                    color: warning
                  - text: [email protected]
                    color: color2
                leftElement:
                  element: avatar
                  text: [email protected]
                  uri: [email protected]
  # Section added for team C.                
  - type: component.section
    options:
      # Section header title text with font and boldness defined.
      title:
        text: Team C
        fontSize: medium
        isBold: true
      # Section header styled icon.   
      icon:
        name: calcium
        color: color8
        shape: rounded
        type: contained
      # Section header with subtle subtitle multi-lined text.   
      subtitle:
        text: Manage and track your team’s tasks per project—keeping priorities, progress, and ownership visible to everyone involved.
        fontSize: regular
        isSubtle: true
        isBold: false
        numberOfLines: 3
      children:
        - type: component.list
          options:
            data: [email protected][team ='teamC' and taskStatus!='Complete']
            maximumItemsToRender: 8
            item:
              type: component.list-item
              options:
                isContained: true
                title: [email protected]
                subtitle: [email protected]
                tags:
                  - text: [email protected]
                    color: warning
                  - text: [email protected]
                    color: color2
                leftElement:
                  element: avatar
                  text: [email protected]
                  uri: [email protected]

datasource (dynamic)

Basic form with sections (Display and input)

Basic form with sections

Using sections, along with icons and text styling, creates relevant display sections for information that is functional, elegant, and neatly organized. (Display and input)

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

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

form-section-children (dynamic)

title: (Basic) Form with Sections
description: Jig to display a form with sections & children components
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: [email protected][1].image

actions:
  - children:
      - type: action.execute-entity
        options:
          title: Update Service
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/cleaning-services
          method: update
          data:
            id: sectionId
            service: [email protected]_serv_tf.state.value
            area: [email protected]_serv_area_tf.state.value
            time: [email protected]_serv_time_num.state.value
            indoor: [email protected]_serv_indoor_checkbox.state.value
            description: [email protected]_serv_desc_tf.state.value
            hourlyRate: [email protected]_serv_hourly_tf.state.value
            onceOffRate: [email protected]_serv_once_tf.state.value

children:
  - type: component.form
    options:
      children:
        - type: component.section
          options:
            title:
              text: Cleaning Services
              fontSize: medium
              isBold: true
            icon:
              name: gardening-lawn-mower-1-farming
              shape: basic
              type: basic
            children:
              - type: component.text-field
                instanceId: cleaning_serv_tf
                options:
                  label: Service
                  value: [email protected][1].service
              - type: component.text-field
                instanceId: cleaning_serv_area_tf
                options:
                  label: Area
                  value: [email protected][1].area
              - type: component.number-field
                instanceId: cleaning_serv_time_num
                options:
                  label: Time
                  value: [email protected][1].time & ' minutes'
                  keyboardType: number-pad
              - type: component.checkbox
                instanceId: cleaning_serv_indoor_checkbox
                options:
                  label: Indoor
                  value: [email protected][1].indoor
              - type: component.text-field
                instanceId: cleaning_serv_desc_tf
                options:
                  label: Description
                  value: [email protected][1].description
                  isMultiline: true
        - type: component.section
          options:
            title:
              text: Rates
              fontSize: medium
              isBold: true
            icon:
              name: cost-of-living-money-chat-real-estate
              shape: basic
              type: basic
            children:
              - type: component.text-field
                instanceId: cleaning_serv_hourly_tf
                options:
                  label: Hourly Rate
                  value: [email protected][1].hourlyrate != null ? @ctx.datasources.cleaning-services-dynamic[1].hourlyrate:'N/A'
              - type: component.text-field
                instanceId: cleaning_serv_once_tf
                options:
                  label: Once Off Rate
                  value: [email protected][1].onceoffrate != null ? @ctx.datasources.cleaning-services-dynamic[1].onceoffrate :'N/A'

datasources (dynamic)

Form sections with icon, actions, and text styling

This example demonstrates how component.section can be used in a form to organize related information into clear, structured groups. Each section has been configured with properties such as title, subtitle, icons, and actions to improve usability for frontline workers in the field.

Sections with icon, action and text styling

section-icon-action-styling.jigx

title: Delivery Confirmation
type: jig.default

children:
  - type: component.form
    instanceId: deliveryForm
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.section
          options:
            title:
              # Section header text with font and boldness defined.
              text: Delivery Details
              fontSize: medium
              isBold: true
            # Section icon displayed before the section text. 
            icon:
              name: delivery-person-motorcycle
              color: primary
              shape: circle
              type: duotone
            # Section action displayed as an icon on the righthand side 
            # of section that opens the map modal to navigate to the address.   
            actions:
              - type: action.open-map
                options:
                  title: Directions
                  address: [email protected]
                  icon: maps-pin
                  # Styling applied to the action button.
                  style:
                    isDanger: true
            children:
              - type: component.text-field
                instanceId: orderId
                options:
                  initialValue: [email protected]
                  label: Order ID
              - type: component.date-picker
                instanceId: dateId
                options:
                  initialValue: [email protected]
                  label: Delivery Date
              - type: component.text-field
                instanceId: customerName
                options:
                  initialValue: [email protected]
                  label: Customer
              - type: component.number-field
                instanceId: contactPhone
                options:
                  initialValue: [email protected]
                  label: Contact Number

        - type: component.section
          options:
           # Section header text with font and boldness defined.
            title:
              text: Items Delivered
              fontSize: medium
              isBold: true
             # Section subtitle displayed below the title defined.
            subtitle: Mark delivered items and adjust quantities if needed.
            children:
              - type: component.expander
                options:
                  header:
                    centerElement:
                      type: component.titles
                      options:
                        title: Items for delivery
                        subtitle: See list of items to be delivered

                  children:
                    - type: component.text-field
                      instanceId: item1
                      options:
                        initialValue: [email protected]
                        label: Item

                    - type: component.number-field
                      instanceId: item1qty
                      options:
                        initialValue: [email protected]
                        label: Qty Delivered

                    - type: component.text-field
                      instanceId: item2
                      options:
                        initialValue: [email protected]
                        label: Item
                    - type: component.number-field
                      instanceId: item2qty
                      options:
                        initialValue: [email protected]
                        label: Qty Delivered

        - type: component.section
          options:
             # Section header text with font and boldness defined.
            title:
              text: Proof of Delivery
              fontSize: medium
              isBold: true
            # Section action displayed as a button on the righthand side
            # of section that saves the signature and notes to dynamic data..  
            actions:
              - type: action.execute-entity
                options:
                  title: Complete
                  provider: DATA_PROVIDER_DYNAMIC
                  entity: default/deliveries
                  method: create
                  data:
                    recipientSignature: [email protected]
                    driverNotes: [email protected]
                  # Styling applied to the action button.
                  style:
                    isPrimary: true
            children:
              - type: component.text-field
                instanceId: driverNotes
                options:
                  label: Driver Notes
              - type: component.signature-field
                instanceId: recipientSignature
                options:
                  label: Recipient Signature
                  isRequired: true

datasource