System StatusSamples on GitHub

bottomSheet (Beta)

BETA: This feature is currently in beta. Functionality and design may change as we continue to improve the experience. Any bugs discovered must be logged via [email protected].

The bottomSheet element slides up from the bottom of the screen to present additional content, actions, or contextual information. It enhances user interaction by providing a seamless display of information without navigating away from the current screen. Perfect for menus, filters, forms, or quick actions, the bottomSheet can be customized to suit various use cases while maintaining a smooth and intuitive user experience.

BottomSheets
BottomSheets

Configuration options

Core structure

jigId

Provide the jigId for the jigs that will be displayed when the bottomSheet is opened. - instanceId - Give the bottomSheet jig a unique identifier allowing you to reference the jig in expressions. - inputs- Specify the inputs related to the the jigs.

Other options

isPanDownToCloseEnabled

Enable pan down gesture to close the sheet. Swiping or dragging downward while maintaining contact with the screen closes the sheet. Setting this to false disables closing the sheet by dragging down; instead, tapping outside the sheet on the jig will close it.

backDrop

The backdrop property controls the visibility of the jig content displayed beneath the bottomSheet. appearsOnIndex - Specifies the ID of the snapPoint at which the backdrop will appear. This value is a number starting from 0 and depends on the number of snapPoints configured. Example snapPoints configured: snapPoints: - 30% - 50% Example backdrop configuration: backdrop: appearsOnIndex: 0 disappearsOnIndex: 1 disappearsOnIndex - Specifies the ID of the snapPoint at which the backdrop will disappear. Like appearsOnIndex, the value starts at 0 and corresponds to the configured snapPoints. isVisible - Determines whether the backdrop is enabled.- true - Enables the backdrop, adding a grey overlay to the parent jig.- false - Disables the backdrop, rendering the parent jig without an overlay. Default: true. opacity - Sets the transparency level of the jig content under the bottomSheet. Acceptable values range from 0.1 (very transparent) to 1(fully opaque).

isDetached

When set to true, the modal detaches from the jig and slides up independently from the bottom of the screen.

initialValue

Setting the initialValue with the jigId ensures that the bottomSheet is open when the parent jig loads.

position

Determine the open position of the bottomSheet. Options are left, middle or right. Note: This property is specific to tablets.

snapIndex

Specifies the initial snapPoint to which the bottomSheet should open. The value is a number starting from 0 and corresponds to the configured snapPoints.

snapPoints

Defines the points where the bottomSheet will snap when opened. These points should be configured in ascending order, from the smallest to the largest, and are set as percentages. Examples:

  • The bottomSheet covers the entire jig: snapPoints: - 100% The bottomSheet covers the 30% on first snap and 60% on the second snap snapPoints: - 30% - 60%

width

Select the width of the bottomSheet from small, medium, or large. Note: This property is specific to tablets.

Considerations

  • Multiple bottomSheets: Multiple bottomSheets can be configured. When doing so, the action.go-to for the second bottomSheet must be configured in the parent jig. Refer to the Multiple BottomSheets example below.

  • Order of actions: When configuring multiple actions, carefully consider the order of the action list. Certain actions should be executed before the action.go-to that opens the bottomSheet. For instance, a execute-entity action to save data should be performed before opening the bottomSheet.

  • Testing: Configuring the bottomSheet requires careful setup and testing to ensure the jig content displays correctly and the bottomSheet renders as expected. Test on multiple devices to confirm the bottomSheet functions properly across all supported devices.

  • Global properties: BottomSheet properties can be set globally, applying the same settings to all jigs specified in the bottomSheet. These properties are configured directly under the bottomSheet property.

  • Local properties (per jig): BottomSheet properties can also be set individually for each jig. For instance, when multiple bottomSheets are configured, each jig may require unique settings, such as different heights or content. These properties are configured directly under each jigId property.

  • Navigating to jigs: To navigate to another screen from the bottomSheet specify isModal: false to explicitly open the jig outside of the bottomSheet.

  • Retrieving Outputs from the bottomSheet: When you navigate to a jig using the action.go-to to open the bottom modal (by setting isModal: true), you can access the outputs from that jig by referencing its instanceId in your context expressions. In the originating jig, use the syntax [email protected].[isntance-id-of-the-jig].outputs.[key-of-output] to retrieve specific output values. See the Accessing jig outputs from a modal example.

Examples and code snippets

Basic bottomSheet

Basic bottomSheet
Basic bottomSheet

Here is a simple example of a menu that is configured to open a bottomSheet with options to order the food. The Options jigId is specified under the bottomSheet property.

title: Global Eats 
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVzdHVyYW50JTIwZm9vZHxlbnwwfHwwfHx8MA%3D%3D
                    
children:
  - type: component.section
    options:
      title: Dinner Menu
      children:
        - type: component.list
          options:
            data: [email protected]
            maximumItemsToRender: 8
            item: 
              type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected]
                leftElement: 
                  element: icon
                  icon: [email protected]
                rightElement: 
                  element: value
                  text: [email protected]
# Configure the jig that will open as the bottomSheet.
# Use the jigId to specify the jig by name that will open in the bottomSheet.    
bottomSheet:
  children:
    - jigId: options
# Configuring a bottomSheet requires that the go-to action be set,
# with the same jig name as in the jigId specified in the linkTo property.
# isModal set to true is required for the jig to open in the bottomSheet, 
# if not set, then normal navigation will take place.
actions:
  - children:
      - type: action.go-to
        options:
          title: Options
          linkTo: options
          isModal: true

BottomSheet with pan down to close disabled

This example demonstrates how to disable the bottomSheet from being closed by swiping or dragging downward. To achieve this, set the isPanDownToCloseEnabled property to false. This property is configured at the global level under the bottomSheet property. In this example, the jig rendered in the bottomSheet includes an info-modal action, which is used to display information necessary for ordering food from the menu. To close the bottomSheet in this example, add a go-back action.

Pan down disabled
Pan down disabled
title: Global Eats 
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1713667417581-9b755dbf7031?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8VmVnZ2llJTIwUGxhdHRlcnxlbnwwfHwwfHx8MA%3D%3D

children:
  - type: component.section
    options:
      title: Dinner Menu
      children:
        - type: component.grid
          options:
            data: [email protected]
            item:
              type: component.grid-item
              options:
                size: "2x2"
                children: 
                  type: component.image
                  options:
                    title: [email protected]
                    subtitle: [email protected]
                    source:
                      uri: [email protected]
    
bottomSheet:
# Prevent the bottom sheet from being closed by swiping or dragging downward.
  isPanDownToCloseEnabled: false
# Set a snapPoint ensuring the content is visible at 40% of screen height.  
  snapPoints:
    - 40%
  children:
# Specify the jig that will open in the bottomSheet.  
    - jigId: options
    
# Configuring a bottomSheet requires that the go-to action be set,
# with the same jig name as in the jigId specified in the linkTo property.
# isModal set to true is required for the jig to open in the bottomSheet, 
# if not set, then normal navigation will take place.
actions:
  - children:
      - type: action.go-to
        options:
          title: Options
          linkTo: options-action
          isModal: true

BottomSheet set to open by default when the parent jig opens

BottomSheet open by default
BottomSheet open by default

In this example, the bottomSheet opens automatically when the parent jig loads. This is achieved by setting the initialValue property with the corresponding jigId.

title: Itinerary
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1440778303588-435521a205bc?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.list
    options:
      data: [email protected]
      item: 
        type: component.stage
        options:
          icon: [email protected]
          right:
            title: [email protected]
            subtitle: [email protected]
          left:
            title: [email protected]
            subtitle: [email protected] 

bottomSheet:
# Set the bottomSheet to open by default when the parent jig loads.
  initialValue: status-itinerary
# Specify the jig that will open in the bottomSheet.    
  children:
    - jigId: status-itinerary

BottomSheet with backdrop

In this example, the backdrop of the bottomSheet completely obscures the menu screen. This is achieved by using the isVisible: true and maximum opacity: 1. Note: Setting isVisible: false allows the menu to be visible.

Backdrop
Backdrop
title: Global Eats 
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVzdHVyYW50JTIwZm9vZHxlbnwwfHwwfHx8MA%3D%3D
             
children:
  - type: component.section
    options:
      title: Dinner Menu
      children:
        - type: component.list
          options:
            data: [email protected]
            maximumItemsToRender: 8
            item: 
              type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected]
                leftElement: 
                  element: icon
                  icon: [email protected]
                rightElement: 
                  element: value
                  text: [email protected]
    
bottomSheet:
# Configure the backdrop of the underlying jig and set the opacity to the 1.
  backdrop:
    isVisible: true
# The backdrop is set to the maximum opacity, completely obscure the underlying jig.
    opacity: 1
  snapPoints:
    - 40% # First snap point at 40% of screen height
# Specify the jig that will open in the bottomSheet.        
  children:
    - jigId: options-action   

# Configuring a bottomSheet requires that the go-to action be set,
# with the same jig name as in the jigId specified in the linkTo property.
# isModal set to true is required for the jig to open in the bottomSheet, 
# if not set, then normal navigation will take place.       
actions:
  - children:
      - type: action.go-to
        options:
          title: Booking options
          linkTo: options-action
          isModal: true

BottomSheet with backdrop that appears & disappears on index

Backdrop set to disappear
Backdrop set to disappear

This example demonstrates how to configure the backdrop of the bottomSheet to appear at a specific snapPoint and disappear at another. Use the appearsOnIndex and disappearsOnIndex properties, which correspond to the indexes of the snapPoints. The snapIndex property specifies the initial snapPoint at which the bottomSheet will open.

title: Global Eats 
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVzdHVyYW50JTIwZm9vZHxlbnwwfHwwfHx8MA%3D%3D

children:
  - type: component.section
    options:
      title: Dinner Menu
      children:
        - type: component.list
          options:
            data: [email protected]
            maximumItemsToRender: 8
            item: 
              type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected]
                leftElement: 
                  element: icon
                  icon: [email protected]
                rightElement: 
                  element: value
                  text: [email protected]
    
bottomSheet:
# Configure the backdrop of the underlying jig to appear when the bottomSheet
#reaches the first snapPoint, and disappear the second snapPoint is reached.
  backdrop:
     appearsOnIndex: 1 # Backdrop appears when the sheet is at the second snapPoint
     disappearsOnIndex: 0 # Backdrop disappears when the sheet is at the first snapPoint
  snapPoints:
      - 20% # 0 
      - 50% # 1
# Specifies the initial snapPoint to which the bottomSheet will open.   
  snapIndex: 1
 # Specify the jig that will open in the bottomSheet.   
  children:
    - jigId: options

# Configuring a bottomSheet requires that the go-to action be set,
# with the same jig name as in the jigId specified in the linkTo property.
# isModal set to true is required for the jig to open in the bottomSheet, 
# if not set, then normal navigation will take place.
actions:
  - children:
      - type: action.go-to
        options:
          title: Options
          linkTo: options-action
          isModal: true

Detached bottomSheet

In this example the bottomSheet is detached from the main parent jig, giving it a floating effect. This functionality is achieved by setting the isDetached property to true.

Detached bottomSheet
Detached bottomSheet
title: Global Eats 
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVzdHVyYW50JTIwZm9vZHxlbnwwfHwwfHx8MA%3D%3D

children:
  - type: component.section
    options:
      title: Dinner Menu
      children:
        - type: component.grid
          options:
            data: [email protected]
            item:
              type: component.grid-item
              options:
                size: "2x2"
                children: 
                  type: component.image
                  options:
                    title: [email protected]
                    subtitle: [email protected]
                    source:
                      uri: [email protected]
    
bottomSheet:
# Detach the bottomSheet from the main parent screen.  
  isDetached: true
 # Specify the jig that will open in the bottomSheet.    
  children:
    - jigId: booking

# Configuring a bottomSheet requires that the go-to action be set,
# with the same jig name as in the jigId specified in the linkTo property.
# isModal set to true is required for the jig to open in the bottomSheet, 
# if not set, then normal navigation will take place.      
actions:
  - children:
      - type: action.go-to
        options:
          title: Book Now
          linkTo: booking
          isModal: true

BottomSheet with snapPoints

BottomSheet with snapPoints
BottomSheet with snapPoints

This example demonstrates how to configure three snap points for the bottomSheet using the SnapPoints property. The bottomSheet will initially open at 20% of the screen. When panned up, it will expand to cover 40%, and finally, 60% of the screen. Note: Snapoints should be configured in ascending order, from the smallest to the largest.

title: Global Eats 
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVzdHVyYW50JTIwZm9vZHxlbnwwfHwwfHx8MA%3D%3D
           
children:
  - type: component.section
    options:
      title: Dinner Menu
      children:
        - type: component.list
          options:
            data: [email protected]
            maximumItemsToRender: 8
            item: 
              type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected]
                leftElement: 
                  element: icon
                  icon: [email protected]
                rightElement: 
                  element: value
                  text: [email protected]
       
bottomSheet:
  # Snapoints should be configured in ascending order, 
  # from the smallest to the largest.
  snapPoints:
    - 20% # First snap point at 20% of screen height
    - 40% # Second snap point at 40% of screen height
    - 60% # Third snap point at 60% of screen height
    
# Specify the jig that will open in the bottomSheet.   
  children:
    - jigId: booking
    
# Configuring a bottomSheet requires that the go-to action be set,
# with the same jig name as in the jigId specified in the linkTo property.
# isModal set to true is required for the jig to open in the bottomSheet, 
# if not set, then normal navigation will take place.
actions:
  - children:
      - type: action.go-to
        options:
          title: Book Now
          linkTo: booking
          isModal: true

Multiple bottomSheets with local properties set

This example demonstrates that two jigs can be opened sequentially in the bottomSheet. Each jig is configured with its own local properties to ensure the bottomSheet adjusts and renders the content correctly.

Note: The go-to action for the second bottom sheet jig is configured within the YAML of the parent jig.

The first bottom sheet jig is set to open by default using the initialValue property.

Multiple bottomSheets
Multiple bottomSheets
title: Global Eats 
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVzdHVyYW50JTIwZm9vZHxlbnwwfHwwfHx8MA%3D%3D

children:
  - type: component.section
    options:
      title: Dinner Menu
      children:
        - type: component.list
          options:
            data: [email protected]
            maximumItemsToRender: 8
            item: 
              type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected]
                leftElement: 
                  element: icon
                  icon: [email protected]
                rightElement: 
                  element: value
                  text: [email protected]
    
bottomSheet:
# Set the first bottomSheet to open by default when the parent jig loads.
  initialValue: options-bookings
  children:
# Specify the two jigs that will open in the bottomSheet.  
    - jigId: options-bookings
# Local bottomsheet properties.
# Configure each bottomSheet jig with its own individual properties,
# this ensures the bottomSheet renders correctly for each jig in the bottomSheet.      
      snapPoints:
        - 40%
    - jigId: booking
      snapPoints:
      - 20% # First snap point at 20% of screen height
      - 40% # Second snap point at 40% of screen height
      - 60% # Third snap point at 60% of screen height
      backdrop:
        opacity: 0.5
      snapIndex: 1
# Configuring a bottomSheet requires that the go-to action be set,
# with the same jig name as in the jigId specified in the linkTo property.
# isModal set to true is required for the jig to open in the bottomSheet, 
# if not set, then normal navigation will take place.           
actions:
  - children:
      - type: action.go-to
        options:
# Link to the first bottomSheet jig. 
# In the options.jigx file,
# set the go-to action for the second bottomsheet jig.        
          title: Booking options
          linkTo: options-bookings
          isModal: true
PreviousCommon jig type propertiesNextjig.calendar

Last updated

Was this helpful?