expander

The expander component is a collapsible element that initially displays a small portion of content, such as a name. Users can tap the arrow, aligned either to the left or right, to expand the component and reveal additional details. The expander is customizable, and the content inside can be configured using components such as forms, lists, or cards. This helps keep screens clean and organized while making additional information easily accessible.

Configuration options

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

Core structure

children

Define the content of the expander. The following components can be used in the expander:

header

centerElement - what is initially visible in your jig. The following options are available in header:

Other options

divider

Added the ability to add a solid or transparent divider. Default setting is none.

expandIcon

Allows the ability to customize the alignment of the expander button. Default setting is right.

isInitiallyCollapsed

If the expander is initially collapsed. true is the default setting. false - expanded true - collapsed

leftElement

Add a left element, for example, an ordering number or avatar.

variant

Determine the background color for header versus body using the variant property with plain or emphasized values. Default setting is emphasized.

onContentPress

Action triggered while pressing on the content in the expander. Use IntelliSense (ctrl+space) to see the available list of actions.

Examples and code snippets

Expander with titles in a header, entity-fields and bar-chart

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

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

children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            title: July Nelson
            subtitle: Manager
            icon: person
            align: left
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Phone
                        value: "3249432812"
                    - type: component.entity-field
                      options:
                        label: Email
                        value: [email protected]
              - type: component.entity-field
                options:
                  label: Address
                  value: 141 Harbor Dr Claymont, Delaware(DE), 19703
        - type: component.bar-chart
          options:
            chart:
              title: 
                text: Last year revenue
            legend:
              isHidden: true
            series:
              - data: [email protected]

children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            title: [email protected] & ' ' & @ctx.datasources.expander-dynamic.lastname
            subtitle: [email protected]
            icon: person
            align: left
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Phone
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Email
                        value: [email protected]
              - type: component.entity-field
                options:
                  label: Address
                  value: [email protected]
        - type: component.bar-chart
          options:
            chart:
              title: 
                text: Last year revenue
            legend:
              isHidden: true
            series:
              - data: [email protected]

datasources:
  expander-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/employees
      query: | 
        SELECT 
          id,
          '$.firstname',
          '$.lastname',
          '$.picture', 
          '$.date_from', 
          '$.date_to', 
          '$.email',
          '$.phone', 
          '$.position', 
          '$.address', 
          '$.category' 
        FROM [default/employees] WHERE '$.firstname' = "July" AND '$.category' = 'employees'

Expander with stage in header and entity-field

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

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

children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.stage
          options:
            right:
              title: Boston
            left:
              title: New York
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Passanger name
                        value: July Nelson
                    - type: component.entity-field
                      options:
                        label: Date
                        value: 25 Jul
                    - type: component.entity-field
                      options:
                        label: Time
                        value: 12:30
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: From
                        value: Boston
                    - type: component.entity-field
                      options:
                        label: Flight
                        value: A 0123
                    - type: component.entity-field
                      options:
                        label: Seat
                        value: 12F
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: To
                        value: New York
                    - type: component.entity-field
                      options:
                        label: Gate
                        value: '16'
                    - type: component.entity-field
                      options:
                        label: Board till
                        value: 11:30

children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.stage
          options:
            right:
              title: [email protected]
            left:
              title: [email protected]
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Passanger name
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Date
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Time
                        value: [email protected]
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: From
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Flight
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Seat
                        value: [email protected]
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: To
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Gate
                        value: '16'
                    - type: component.entity-field
                      options:
                        label: Board till
                        value: [email protected]

datasources:
  trip-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/flight-schedule
      query: |
        SELECT 
          id, 
          '$.airline', 
          '$.board', 
          '$.disembark', 
          '$.date', 
          '$.flight', 
          '$.from', 
          '$.fromabrv', 
          '$.gate', 
          '$.name', 
          '$.seat', 
          '$.to', 
          '$.toabrv' 
        FROM [default/flight-schedule]

Expander with variant, divider & expandIcon

This example includes four expander components, each configured with different options for the variant, divider, and expandIcon properties.

Expander configured with a plain variant & transparent divider.
Expander configured with emphasized variant & no divider.
Expander configured with no variant and a solid divider.
Expander configured with expandIcon aligned to the left, plain variant & no divider.

title: Deliveries
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1536607278842-2e762f290252?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGRlbGl2ZXJ5JTIwdHJ1Y2t8ZW58MHx8MHx8fDA%3D
 
children:
  - type: component.section
    options:
      title: EXPANDER WITH VARIANT (plain), DIVIDER (transparent)
      children: 
        # First expander.                
      - type: component.expander
        options:
          # Configure a plain variant.  
          variant: plain
          # Add a transparent divider.
          divider: transparent
          header:
            centerElement: 
              type: component.titles
              options:
                title: [email protected][0].destination
                subtitle: [email protected][0].deliveryId
                icon: truck-1
                iconColor: color2
                align: right
          children:
            - type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected][0].expectedDelivery
                isContained: true
                rightElement: 
                  element: value
                  text: [email protected][0].status
  - type: component.divider
  - type: component.section
    options:
      title: EXPANDER WITH VARIANT - EMPHASIZED
      children:
        # Second expander. 
      - type: component.expander
        options:
          # Configure an emphasized variant.
          variant: emphasized
          header:
            centerElement: 
              type: component.stage
              options:
                right:
                  title: [email protected][1].deliveryId
                left:
                  title: [email protected][1].status
                icon: truck-cargo  
          children:
            - type: component.entity
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Product
                      value: [email protected][1].Item
                  - type: component.entity-field
                    options:
                      label: Destination
                      value: [email protected][1].destination  
                  - type: component.entity-field
                    options:
                      label: Destination
                      value: [email protected][1].expectedDelivery  
  - type: component.divider                       
  - type: component.section
    options:
      title: EXPANDER WITH SOLID DIVIDER
      children:
        # Third expander.
      - type: component.expander
        options:
          # Add a solid divider,
          # that displays when the component is expanded.
          divider: solid
          header:
            centerElement: 
              type: component.titles
              options:
                title: [email protected][2].deliveryId
                subtitle: [email protected][2].expectedDelivery       
                align: left 
          children:
            - type: component.list-item
              options:
                title: [email protected][2].destination
                subtitle: [email protected][2].Item
                color: color4
                leftElement: 
                  element: icon
                  icon: delivery-truck
                rightElement: 
                  element: value
                  text: [email protected][2].status
            - type: component.location
              options:
                viewPoint:
                  address: New York, NY 10001, United States
  - type: component.divider
  - type: component.section
    options:
      title: EXPANDER WITH ICON ALIGNMENT & VARIANT (plain)
      children:
        # Fourth expander. 
      - type: component.expander
        options:
          # Configured a plain variant. 
          variant: plain
          header:
            # Configure the expander icon to display on the left.
            expandIcon:
              align: left
            centerElement: 
              type: component.stage
              options:
                right:
                  title: [email protected][3].status
                left:
                  title: [email protected][3].deliveryId 
                icon: truck-cargo-1                            
          children:
            - type: component.entity
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Delivery date
                      value: [email protected][3].expectedDelivery
                      rightIcon: calendar-3
                      style:
                        isWarning: true

type: datasource.sqlite
options:
  provider: DATA_PROVIDER_DYNAMIC

  entities:
    - default/product-delivery

  query: 
    SELECT id,
     '$.deliveryId',
     '$.Item',
     '$.destination',
     '$.status',
     '$.expectedDelivery'
    FROM [default/product-delivery]

Previousevent Nextstage

Last updated 3 months ago

Was this helpful?

Good afternoon

Configuration options

Examples and code snippets

Expander with titles in a header, entity-fields and bar-chart

Expander with stage in header and entity-field

Expander with variant, divider & expandIcon