jig.gallery

The jig.gallery provides a way to browse and swipe through a collection of images. This gallery fetches data dynamically from a datasource and presents each image as a gallery item, allowing users to view, share, or delete each item. This control is ideal for showcasing visual collections with interactive features, such as product catalogs or job-related images.

Image gallery

Usage

Use the gallery component when you need to:

• Display a collection of images from a datasource.

• Allow users to interact with each item (e.g., share, delete, or navigate).

  1. Tap on a thumbnail to view the image in fullscreen mode. The selected image opens with share and delete icons visible.

  2. Supports horizontal swiping to scroll through multiple images. The total image count is displayed at the top.

  3. Pinch and zoom on the current image for detailed viewing.

  4. Close the full screen view fullscreen view by swiping down or tapping the back arrow.

Configuration options

The jig.gallery creates a gallery layout from a datasource. The YAML structure is similar in configuration to the jig.list or jig.grid where a single gallery-item is configured and iterates through the datasource. Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.

Core structure
title	Give the jig a title that is displayed at the top of the screen. If you do not want to show a title in a jig use title: ' '.
type	Specifies the control type. Here, it is set to jig.gallery for a gallery view.
item	Within a gallery jig type, the gallery-item component is used to define each of the elements in the layout, configured under the imageUri property.
datasources	Configure a datasource to call the image data to display in the gallery. The datasource property is required. Depending on the datasource, conversions might be required.
data	Binds the gallery data to the results from the datasource.

Other options
actions	Choose from the provided list of available actions, for example, use the go-to action to open a different jig.
badge	Enhance your tabs with a badge, for instance show the number of grid-items. Add the badge property to the jig YAML with an expression.
bottomSheet	The bottomSheet element slides up from the bottom of the screen to present additional content, actions, or contextual information.
expressions	Use the expressions property to set that are reusable throughout the jig.
header	Configure a that displays and image, location or video at the top of the jig.
icon	The icon will be displayed on the of the jig. Start typing the name of the icon to invoke the available list in IntelliSense. See Jigx icons for information on working with icons. The icon property applies to component.jig-widget without a widgetId. See the considerations below for the rules governing icon behavior.
inputs	Configure that allow you to receive data from other jigs and use it in the current jig.
isWaitingSync	Displays a waiting sync indicator.
jigId	Give the jig a unique id that can be referenced outside the jig, for example in state expressions.
outputs	Configure that allow you to transfer data out of the current jig and use it in another jig.
placeholders	Create a placeholder to show when there is no data to use yet. See tips and tricks -use a placeholder for a placeholder example.
summary	Add a component that displays at the bottom of the jig.
title	By default, the jig's title is displayed on the widget. You can override it by adding the title property to the component.jig-widget in the grid-item, either with a custom title or with '' (a blank space) to remove the title entirely.
widgets	Configure the widgets property to display the content from this jig on the home hub or another jig (screen).

Events
onSharePress	Add an action directly on the gallery-item, such as action.share which lets you quickly send the image via the apps on the device, such as email, messaging apps, or AirDrop.
onDeletePress	Add an action directly on the gallery-item that will execute when the image delete, such as execute-entity to delete the image frm the datasource.

State
state	You can set the initial value of state and then use it anywhere in context of the jig by [email protected].[key]

Considerations

• The OnSharePress action displays as a share icon in the bottom-left corner of the image. Tapping it opens the device’s sharing options (e.g., email, messaging apps, AirDrop).The OnSharePress action must be explicitly defined in the YAML for the icon and its behavior to appear.

• The OnDeletePress action, displays as a trash icon in the bottom-left corner. Tapping it removes the image from both the gallery and its datasource according to the configured actions. The OnDeletePress action must be explicitly defined in the YAML for the icon and its behavior to appear.

• If both the onSharePress and onDeletePress actions are configured the share icon stays in the bottom-left, and the delete icon shifts to the bottom-right.

• The jig.gallery is not supported inside a composite jig.

• Consider when and how images are loaded in the gallery. Use server-generated thumbnails to keep the gallery fast and bandwidth-efficient. Download and cache full images (via localPath) when high quality is needed, for offline access, or to reduce repeated network requests. This approach balances performance with quality and resource efficiency.

Examples and code snippets

Basic gallery jig

This example shows how to configure a jig.gallery component to pull photos of job-site tasks from a Dynamic Data source and display them in a scrollable gallery. Users can tap the open-media-picker action to capture or select new images, which are then saved back to the same datasource and appear instantly in the gallery. Example: The full example can be seen in GitHub.

Basic image gallery

gallery-simple.jigx

title: Job task gallery
# Select the gallery jig type.
type: jig.gallery

# Data binding: fetch images from the task-images datasource.
data: [email protected]
item:
# Use the standard gallery-item component for each image to render.
  type: component.gallery-item
  options:
    # For images stored in Dynamic Files use the thumbnail image URI from the server, 
    # see the expression below.
    # For other providers use [email protected].
    imageUri: |
      ='data:image/png;base64,' & @ctx.current.item.thumbnail

actions:
  - children:
      - type: action.action-list
        options:
          title: Add image
          isSequential: true
          actions:
          # Open the media picker to select or take an image.
            - type: action.open-media-picker
              instanceId: taskmedia
              options:
                mediaType: image
                imageQuality: 20
            # Create a new task-image record in Dynamic files in Dyanmic Data.   
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/tasks
                method: create
                data:
                  # Save selected image name.
                  name: task image
                file:
                 # Attach the selected file by its local path.
                  localPath: [email protected]

datasource (Dynamic files)

Gallery jig with onSharePress and onDeletePress

Gallery share & delete actions

This example demonstrates how to configure the onSharePress and onDeletePress actions that allow users to share or delete images when tapping on an image in the gallery. The image opens in fullscreen, with share and delete icons displayed at the bottom, providing quick and intuitive interaction with each image.

Example: The full example can be seen in GitHub.

gallery-share-delete.jigx

title: Job task gallery
# Select the gallery jig type.
type: jig.gallery

# Data binding: fetch images from the task-images datasource.
data: [email protected]
item:
  # Use the standard gallery-item component for each image to render.
  type: component.gallery-item
  options:
    # For images stored in Dynamic Files use the thumbnail image URI from the server, 
    # see the expression below.
    # For other providers use [email protected].
    imageUri: |
      ='data:image/png;base64,' & @ctx.current.item.thumbnail
    # Configure the action to execute when the share icon is pressed.
    onSharePress:
      type: action.share
      options:
        fileUri: ='data:image/png;base64,' & @ctx.current.item.thumbnail
        message: Today's progress at the job appointment
        subject: Current progress
    # Configure the actions to execute when the delete icon is pressed. 
    # Include a confirmation modal before deleting the image.    
    onDeletePress:
      type: action.action-list
      options:
        isSequential: true
        actions:
          - type: action.confirm
            options:
              isConfirmedAutomatically: false
              onConfirmed:
                type: action.execute-entity
                options:
                  provider: DATA_PROVIDER_DYNAMIC
                  entity: default/tasks
                  method: delete
                  data:
                    id: [email protected]
              modal:
                title: Are you sure you want to delete this image?
actions:
  - children:
      - type: action.action-list
        options:
          title: Add image
          isSequential: true
          actions:
          # Open the media picker to select or take an image.
            - type: action.open-media-picker
              instanceId: taskmedia
              options:
                mediaType: image
                imageQuality: 20
            # Create a new task-image record in Dynamic files in Dyanmic Data.   
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/tasks
                method: create
                data:
                  name: task image
                file:
                 # Attach the selected file by its local path.
                  localPath: [email protected]          

datasource

Gallery jig with REST datasource conversions

This example retrieves customer details and images from a REST endpoint and displays them in a list. Swiping left on a customer triggers an onPress event that opens a jig.gallery, showing all images associated with that customer. You can add more images using the Add Image button. The configured GET and POST REST functions handle the necessary conversions, transforming images to the format expected by the REST service and converting them back for use in the app.

Gallery with image conversions

list-customer.jigx

title: List customers
type: jig.list
icon: tiger-shark

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://www.dropbox.com/scl/fi/ha9zh6wnixblrbubrfg3e/business-5475661_640.jpg?rlkey=anemjh5c9qsspvzt5ri0i9hva&raw=1

datasources:
  customers:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: customers
      query: |
        SELECT 
          cus.id AS id, 
          json_extract(cus.data, '$.firstName') AS firstName, 
          json_extract(cus.data, '$.lastName') AS lastName,
          json_extract(cus.data, '$.companyName') AS companyName,
          json_extract(cus.data, '$.address') AS address,
          json_extract(cus.data, '$.city') AS city,
          json_extract(cus.data, '$.state') AS state,
          json_extract(cus.data, '$.zip') AS zip,
          json_extract(cus.data, '$.phone1') AS phone1,
          json_extract(cus.data, '$.phone2') AS phone2,
          json_extract(cus.data, '$.email') AS email,
          json_extract(cus.data, '$.web') AS web,
          json_extract(cus.data, '$.customerType') AS customerType
        FROM 
          [customers] AS cus
        ORDER BY 
          json_extract(cus.data, '$.companyName')

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected] & ' ' & @ctx.current.item.lastName
    leftElement:
      element: avatar
      text: [email protected]
    label:
      title: =$uppercase((@ctx.current.item.customerType = 'Silver' ? @ctx.current.item.customerType:@ctx.current.item.customerType = 'Gold' ? @ctx.current.item.customerType:''))
      color:
        - when: [email protected] = 'Gold'
          color: color3
        - when: [email protected] = 'Silver'
          color: color14
    swipeable:
      left:
        - label: Gallery
          icon: gallery
          color: primary
          onPress:
            type: action.go-to
            options:
              linkTo: customer-image-gallery
              inputs:
                customer: [email protected]

    onPress:
      type: action.go-to
      options:
        linkTo: customer-composite
        inputs:
          customer: [email protected]
          id: [email protected]

customer-image-gallery.jigx

add-customer-images.jigx

rest-get-customer-images

rest-upload-customer-images

Gallery jig with a bottomSheet

This example shows a jig.gallery configured with a bottomSheet that slides up from the bottom of the screen to display additional information about the related appointment. The bottomSheet uses the jigId property with a go-to action to open the appointments jig, providing a view of the appointment associated with the images. Example: The full example is in GitHub.

Gallery with bottomSheet

gallery-bottomsheet.jigx

title: Job task gallery
# Select the gallery jig type.
type: jig.gallery

# Data binding: fetch images from the task-images datasource.
data: [email protected]
item:
  # Use the standard gallery-item component for each image to render.
  type: component.gallery-item
  options:
    # For images stored in Dynamic Files use the thumbnail image URI from the server, 
    # see the expression below.
    # For other providers use [email protected].
    imageUri: | 
      ='data:image/png;base64,' & @ctx.current.item.thumbnail
    # Configure the action to execute when the share icon is pressed.
    onSharePress:
      type: action.share
      options:
        fileUri: ='data:image/png;base64,' & @ctx.current.item.thumbnail
        message: Today's progress at the job appointment
        subject: Current progress
    # Configure the actions to execute when the delete icon is pressed. 
    # Include a confirmation modal before deleting the image.     
    onDeletePress:
      type: action.action-list
      options:
        isSequential: true
        actions:
          - type: action.confirm
            options:
              isConfirmedAutomatically: false
              onConfirmed:
                type: action.execute-entity
                options:
                  provider: DATA_PROVIDER_DYNAMIC
                  entity: default/tasks
                  method: delete
                  data:
                    id: [email protected]
              modal:
                title: Are you sure you want to delete this image?

# Add the appointments jig to open as a bottomSheet.
bottomSheet:
  children:
    - jigId: appointments
# 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: Go to appointment
        linkTo: appointments
        isModal: true

datasource

appointments.jigx

Gallery jig in a tab jig

In this example, jig.gallery is used as a tab within a jig.tabs screen. The tab, labeled Task Photos, displays a gallery of images related to appointments. Tapping an image opens it in fullscreen, where you can access the share and delete action icons at the bottom. The fullscreen view also supports pinch-and-zoom to explore image details.

Example: The full example is available on GitHub.

galley-in-tabs.jigx

type: jig.tabs
title: My work dashboard
areTabsScrollable: false

# Specify the jigs that will open in each tab.
children:
  - jigId: appointments
    instanceId: appointments
    tab:
      type: component.tab-button
      options:
        title: Today
        # Add an icon to the tab. The title is diplayed below the icon.
        # When active the icon uses the primary color.
        icon: calendar-3
  - jigId: inventory
    instanceId: inventory
    tab:
      type: component.tab-button
      options:
        title: Stock
        # Add an icon to the tab. The title is diplayed below the icon.
        icon: supply-chain-shipping-fee-included-truck
  # Add the gallery jig as one of the tabs.      
  - jigId: gallery-share-delete
    instanceId: task-photos
    tab:
      type: component.tab-button
      options:
        title: Photo Gallery
        # Add an icon to the tab. The title is diplayed below the icon.
        icon: gallery
  - jigId: timelogs
    instanceId: timelogs
    tab:
      type: component.tab-button
      options:
        title: Logs
        # Add an icon to the tab. The title is diplayed below the icon.
        icon: time-clock-circle-1-alternate

actions:
  - numberOfVisibleActions: 1
    children:
      - type: action.action-list
        options:
          isHidden: [email protected] ="inventory"
          title: Continue
          isSequential: false
          actions:
            - type: action.info-modal
              when: [email protected] ="timelogs"
              options:
                modal:
                  title: Successfully submitted
                  buttonText: Exit
                  element:
                    type: icon
                    icon: check-2
                    color: positive
            - type: action.open-map
              when: [email protected] ="appointments"
              options:
                title: Directions
                address: 105 Othello Dr, Woodstock, GA 30189, United States

gallery-share-delete.jigx

appointments.jigx

inventory.jigx

timelogs.jigx