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.

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.

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]

# The datasource will return the images as thumbnails for display in the gallery,
# and will allow the image to be cached to the localPath in the app, 
# and returns the full image when the gallery-item is opened.
datasources:
  task-images:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/tasks
      query: SELECT
        id,
        json_extract(file, '$.localPath') as localPath,
        json_extract(file, '$.fileName')  as filename,
        json_extract(file, '$.thumbnail.base64') as thumbnail
        FROM [default/tasks]

Gallery jig with onSharePress and onDeletePress

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.

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]

# The datasource will return the images as thumbnails for display in the gallery,
# and will allow the image to be cached to the localPath in the app, 
# and returns the full image when the gallery-item is opened.
datasources:
  task-images:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/tasks
      query: SELECT
        id,
        json_extract(file, '$.localPath') as localPath,
        json_extract(file, '$.fileName')  as filename,
        json_extract(file, '$.thumbnail.base64') as thumbnail
        FROM [default/tasks]

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.

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]

title: Customer image gallery
type: jig.gallery
# Add inputs to return the exact customer details from the list.
inputs:
  customer:
    type: object
# Sync the gallery to show new images that are added when the jig is in focus
onFocus:
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_REST
    entities:
      - entity: customer-images
        function: rest-get-customer-images
        functionParameters:
          custId: [email protected]

datasources:
  customerImages:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: customer-images
      query: |
        SELECT 
          cim.id AS id,
          json_extract(cim.data, '$.createdDate') AS createdDate,
          json_extract(cim.data, '$.custId') AS custId,
          json_extract(cim.data, '$.createdBy') AS createdBy,
          json_extract(cim.data, '$.description') AS description,
          json_extract(cim.data, '$.image') AS image
        FROM 
          [customer-images] AS cim
        WHERE 
          json_extract(cim.data, '$.custId') = @custId
        ORDER BY 
          json_extract(cim.data, '$.createdDate') DESC
      queryParameters:
        custId: [email protected]
# Reference the datasource that has the images stored.
data: [email protected]
item:
  type: component.gallery-item
  options:
    # Provide the expression calling the images from the datasource.
    imageUri: [email protected]
# Add an action to add new images.
actions:
  - children:
      - type: action.go-to
        options:
          title: Add image
          linkTo: add-customer-images
          inputs:
            customer: [email protected]

title: Upload images
description: [email protected]
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://www.dropbox.com/scl/fi/o1gobv6lj1l3076veyaff/cloud-7906280_1280.png?rlkey=c5ad2oknpw5fju9qjlb1c2d2o&raw=1

onFocus:
  type: action.reset-state
  options:
    state: [email protected]

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Customer
            value: [email protected]
  - type: component.form
    instanceId: newImage
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: description
          options:
            label: Name
        - type: component.media-field
          instanceId: image
          options:
            label: image
            mediaType: any
            isMultiple: true
# Add the action to upload the image to the REST service,
# convert the image into base64 for file storage.
actions:
  - children:
      - type: action.execute-entities
        options:
          title: Upload images
          provider: DATA_PROVIDER_REST
          entity: customer-images
          method: functionCall
          goBack: previous
          function: rest-upload-customer-images
          conversions:
            - property: dd
              from: local-uri
              to: base64

          data: |
            [email protected].
            {
              "custId": @ctx.jig.inputs.customer.id,
              "createdBy": @ctx.user.email,
              "description": @ctx.jig.components.description.state.value,
              "createdDate": $now(),
              "image": $ 
            }

provider: DATA_PROVIDER_REST
method: GET
# Use your REST service URL.
url: https://[your_rest_service]/api/images?custId={custId}&includeImage=true
useLocalCall: true
forRowsWithValues: 
  custId: custId
  
parameters:
  x-functions-key:
    location: header
    required: false
    type: string
    value: XXXX # Add your API key
  custId:
    type: string
    location: query
    required: true

outputTransform: |
  $.images.
    {
        "id": id,
        "custId": $$.inputs.custId,
        "createdDate": createdDate,
        "createdBy": createdBy,
        "description": description,
        "image": image
    }[]
# Add the conversion into the format the app requies to display the image.
conversions:
  - property: image
    from: base64
    to: local-uri
    localFilename: description

provider: DATA_PROVIDER_REST
method: POST
# Add the REST endpoint URL.
url: https://[your_rest_service]/api/images
useLocalCall: true

parameters:
  x-functions-key:
    location: header
    required: false
    type: string
    # Add your API key.
    value: XXXX 
  custId:
    type: string
    location: body
    required: false
  createdBy:
    type: string
    location: body
    required: false
  description:
    type: string
    location: body
    required: false
  createdDate:
    type: string
    location: body
    required: false
    value: =$now()
  image:
    type: image
    location: body
    required: false

inputTransform: |
  {
    "custId": custId,
    "createdBy": createdBy,
    "description": description,
    "createdDate": createdDate,
    "image": image
  }

outputTransform: |
  $.{
      "id": image_id
    }
# Add the conversion into the format the REST sercvice 
# requires to store the image.
conversions:
  - property: image
    from: local-uri
    to: base64
    convertHeicToJpg: true

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.

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

# The datasource will return the images as thumbnails for display in the gallery,
# and will allow the image to be cached to the localPath in the app, 
# and returns the full image when the gallery-item is opened.
datasources:
  task-images:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/tasks
      query: SELECT
        id,
        json_extract(file, '$.localPath') as localPath,
        json_extract(file, '$.fileName')  as filename,
        json_extract(file, '$.thumbnail.base64') as thumbnail
        FROM [default/tasks]

title: Today
description: My appointments for today
type: jig.default

datasources:
  appointments:
    type: datasource.static
    options:
      data:
        - id: 1
          time: 8:00am
          customer: Jay Motors
          address: 13 Sunnydale Road
        - id: 2
          time: 11:30am
          customer: Elementary School
          address: 1 Harold Street
        - id: 3
          time: 8:00am
          customer: Becker Consulting
          address: Suite A, Tower building, Main street
children:
  - type: component.form
    instanceId: schedule-appt
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.choice-field
          instanceId: appointment
          options:
            label: Today
            data: [email protected]
            item:
              type: component.choice-field-item
              options:
                title: [email protected]
                value: [email protected]

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.

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

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

# The datasource will return the images as thumbnails for display in the gallery,
# and will allow the image to be cached to the localPath in the app, 
# and returns the full image when the gallery-item is opened.
datasources:
  task-images:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/tasks
      query: SELECT
        id,
        json_extract(file, '$.localPath') as localPath,
        json_extract(file, '$.fileName')  as filename,
        json_extract(file, '$.thumbnail.base64') as thumbnail
        FROM [default/tasks]
        
# 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
    onDeletePress:
      type: action.execute-entity
      options:
        provider: DATA_PROVIDER_DYNAMIC
        entity: default/tasks
        method: delete
        data:
          id: [email protected]
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]

# Supporting jig - First tab corresponding jig
title: Today
description: My appointments for today
type: jig.default

datasources:
  appointments:
    type: datasource.static
    options:
      data:
        - id: 1
          time: 8:00am
          customer: Jay Motors
          address: 13 Sunnydale Road
        - id: 2
          time: 11:30am
          customer: Elementary School
          address: 1 Harold Street
        - id: 3
          time: 8:00am
          customer: Becker Consulting
          address: Suite A, Tower building, Main street
children:
  - type: component.form
    instanceId: schedule-appt
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.choice-field
          instanceId: appointment
          options:
            label: Today
            data: [email protected]
            item:
              type: component.choice-field-item
              options:
                title: [email protected]
                value: [email protected]

# Supporting jig - Second tab's corresponding jig
title: Inventory
description: Select the parts required for the job
type: jig.list

datasources:
  inventory:
    type: datasource.static
    options:
      data:
        - id: 1
          item: Compressor
        - id: 2
          item: Condenser Coil
        - id: 3
          item: Refrigerant
        - id: 4
          item: Expansion Valve
        - id: 5
          item: Fan Motor

data: [email protected]
item:
  type: component.list-item
  options:
    leftElement:
      element: icon
      icon: tool-organizer-1
      # isDuotone: true
    title: [email protected]

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
  - jigId: gallery-onsharepress
    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
            - type: action.open-url
              when: [email protected] ="manuals"
              options:
                url: https://www.manualslib.com/

Previousjig.fullscreen Nextjig.grid

Last updated 2 months ago

Was this helpful?

Good evening