jig.tabs

Tabs allow you to navigate between different jigs with ease, enhancing the user experience by providing an organized layout. These tabs are placed at the top of the screen to ensure a sleek and intuitive interface.

Tabs

Configuration options

Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.

The jig.tabs can be configured in the following way in Jigx Builder.

Core structure
title	Give the jig a title that is displayed at the top of the screen.
type	Select jig.tabs.
jigId	Provide the jigId for the jig that will be displayed when the tab is active.
instanceId	Give the tab a unique identifier, that can be used in expressions.
tab	title - The text that displays as the tab name.
icon	Add an icon to display in the tab. A list of available icons can be found in . The title appears below the icon in the tab.
badge	Add a badge to display on the tab to highlight critical information. The badge can be configured at the root level of the jig file. The badge can be configured with an icon, color, and a value.

areTabsScrollable	When there are many tabs that exceed the width of the screen, set the property to true to scroll and view the additional obscured tabs by swiping left. Setting the property to false will only display the tabs that fit on the width of the screen, additional tabs will be hidden. The property is accessible using IntelliSense at the root level in the YAML. By default tabs are scrollable. Tip: Using areTabsScrollable: false will align the tabs in the center.
inputs	Used to pass data between the jigs in the tabs to provide context and data. See for more information.
instanceId	Give the tab a unique identifier allowing you to reference the tab in expressions in jigs.
initialTabId	Specify the tab to display when the jig opens. The tab's jigId is used as the value. This property is accessible via IntelliSense at the root level in the YAML. If not specified, the first tab is displayed by default.
isDisabled	If true you won't be able to toggle the tabs. The default value is false.
isSwipeable	Set to true allows you to navigate between tabs by swiping left and right anywhere on the jig. By default tabs are not swipeable and require you to press on the tab title for navigation.
when	This property is used to show/hide any tab based on conditions, such as true, false, or conditions set using an expression.

actions	The actions property is a local action applicable to the specific tab. Once the tab is tapped the action will execute. Action Identifier - Provide a unique name that is used to identify the action. type - Select the that is triggered in the specific tab. Use IntelliSense to see the available list of actions.

[email protected].	activeTabId	Applies to the active tab in the jig.tab type.
[email protected].	tab	Global variable for the tab used throughout a solution.

Considerations

• Specifying a background color for tabs is currently not supported.

• jig.headers do not display in the children tabs.

• Using areTabsScrollable: false aligns the tabs in the center, aligns the tabs at the center, enhancing visual consistency.

Examples and code snippets

Basic tabs

Basic tab jig

This example demonstrates the simplest use of the jig.tabs. Four tabs are configured, each opens the corresponding jig.

Examples: See the full code sample in GitHub. Supporting jig samples in GitHub.

jig-tabs-basic.jigx

# Select the jig type tabs.
type: jig.tabs
title: Global INC
# Aligns the tabs at the center, enhancing visual consistency.
areTabsScrollable: false

children:
  # Specify the jig that will open when the tab is pressed.
  # Tab 1
  - jigId: appointments
    tab:
      type: component.tab-button
      options:
        # Give the tabs a name,you can use an expression, datasource or text.
        title: Today
  # Tab 2
  - jigId: inventory
    tab:
      type: component.tab-button
      options:
        title: Stock
  # Tab 3
  - jigId: timelogs
    tab:
      type: component.tab-button
      options:
        title: Logs
  # Tab 4
  - jigId: manuals
    tab:
      type: component.tab-button
      options:
        title: Help

index.jigx

appointments.jigx

inventory.jigx

# 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]

timelogs.jigx

manuals.jigx

Scrollable tabs

Scrollable tabs

This example shows the jig.tabs with ten tabs. Tab8, Tab9, and Tab10 are not visible. Setting the the areTabsScrollable: true property enables scrolling on the tab bar. Each tab opens the corresponding jig when pressed. For demonstration purposes placeholder jigs are used.

Examples: See the full code sample in GitHub. Supporting jig samples in GitHub.

jig-tabs-scrollable.jigx

# Select the jig type tabs.
type: jig.tabs
title: Global INC
# For multiple tabs that run over the screen, the property enables the tabs to be scrolled.
areTabsScrollable: true

children:
  # Specify the jigs that will open when the tabs are pressed.
  - jigId: appointments
    tab:
      type: component.tab-button
      options:
        title: Tab 1
  - jigId: inventory
    tab:
      type: component.tab-button
      options:
        title: Tab 2
  - jigId: timelogs
    tab:
      type: component.tab-button
      options:
        title: Tab 3
  - jigId: manuals
    tab:
      type: component.tab-button
      options:
        title: tab 4
  - jigId: tab-placeholder
    tab:
      type: component.tab-button
      options:
        title: Tab 5
  - jigId: tab-placeholder1
    tab:
      type: component.tab-button
      options:
        title: Tab 6
  - jigId: tab-placeholder2
    tab:
      type: component.tab-button
      options:
        title: Tab 7
  - jigId: tab-placeholder3
    tab:
      type: component.tab-button
      options:
        title: Tab 8
  - jigId: tab-placeholder4
    tab:
      type: component.tab-button
      options:
        title: Tab 9
  - jigId: tab-placeholder5
    tab:
      type: component.tab-button
      options:
        title: Tab 10

index.jigx

tab-placeholder.jigx

Swipeable tabs

Swipeable tabs

This example shows the jig.tabs with four tabs. Setting the isSwipeable: true property allows you to swipe left and right anywhere on the screen to navigate between the tabs instead of pressing on each tab title to display the jigs. Each tab opens the corresponding jig.

Examples: See the full code sample in GitHub

jig-tabs-swipeable.jigx

# Select the jig type tabs.
type: jig.tabs
title: Global INC
# Aligns the tabs at the center, enhancing visual consistency.
areTabsScrollable: false
# Enable swiping. Swipe left and right on the screen to navigate between tabs.
isSwipeable: true
# Specify the jigs that will open in each tab.

children:
  # Specify the jigs that will open when the tabs are pressed.
  - jigId: appointments
    tab:
      type: component.tab-button
      options:
        title: Today
  - jigId: inventory
    tab:
      type: component.tab-button
      options:
        title: Stock
  - jigId: timelogs
    tab:
      type: component.tab-button
      options:
        title: Logs
  - jigId: manuals
    tab:
      type: component.tab-button
      options:
        title: Help

index.jigx

Tabs with initialTabId

Initial tab specified

This example demonstrates the jig.tabs with the third tab (logs) set as the default (initial) tab displayed when the jig opens. The initialTabId: timelogs property specifies which tab will be in focus upon opening the jig. To specify the default jig use the jigId as the initialTabId's value.

Examples: See the full code sample in GitHub.

jig-tabs-initialtabid.jigx

# Select the jig type tabs.
type: jig.tabs
title: Global INC
# Aligns the tabs at the center, enhancing visual consistency.
areTabsScrollable: false
# Specify the jigId for the tab that must be displayed when the jig opens.
initialTabId: timelogs

children:
  # Specify the jigs that will open in each tab.
  - jigId: appointments
    tab:
      type: component.tab-button
      options:
        title: Today
  - jigId: inventory
    tab:
      type: component.tab-button
      options:
        title: Stock
  - jigId: timelogs
    tab:
      type: component.tab-button
      options:
        title: Logs
  - jigId: manuals
    tab:
      type: component.tab-button
      options:
        title: Help

index.jigx

Tabs with icons

Tabs with icons

This example demonstrates the jig.tabs with the icons. The active tab's icon displays in the primary color.

Examples: See the full code sample in GitHub.

jig-tabs-icons.jigx

# Select the jig type tabs.
type: jig.tabs
title: Global INC
# Aligns the tabs at the center, enhancing visual consistency.
areTabsScrollable: false

# Specify the jigs that will open in each tab.
children:
  - jigId: 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
    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: 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
  - jigId: manuals
    tab:
      type: component.tab-button
      options:
        title: Help
        # Add an icon to the tab. The title is diplayed below the icon.
        icon: book-book-pages

index.jigx

Tabs with inputs

Tabs with inputs

This example demonstrates jig.tabs where the Logs tab is configured to use a jig with inputs. The input values are set within jig.tabs under the jigId of the corresponding jig.

Examples: See the full code sample in GitHub. Supporting jig samples in GitHub.

jigx-tabs-inputs.jigx

type: jig.tabs
title: Global INC
# Aligns the tabs at the center, enhancing visual consistency.
areTabsScrollable: false

# Specify the jigs that will open in each tab.
children:
  - jigId: appointments
    tab:
      type: component.tab-button
      options:
        title: Today
  - jigId: inventory
    tab:
      type: component.tab-button
      options:
        title: Stock
  - jigId: timelogs-inputs
    tab:
      type: component.tab-button
      options:
        title: Logs
    # The jig that displays in the tab has inputs defined.
    # Provide the values for the inputs to the jig.
    inputs:
      Name: [email protected]
      email: [email protected]
      contact: 1345632
  - jigId: manuals
    tab:
      type: component.tab-button
      options:
        title: Help

timelogs-inputs.jigx

index.jigx

Set tab's content from a single jig

Tabs using single tab

This example demonstrates how to use a single jig to set the content for each tab by using the jig inputs.

Examples: See the full code sample in GitHub Supporting jig samples in GitHub.

jig-tab-content.jigx

type: jig.tabs
title: Time-tracking
isSwipeable: true
areTabsScrollable: false
initialTabId: week1
# Specify the single jig that will open in each tab.
# Use inputs to change the content in the tab.
children:
  # Tab 1
  # Note all the tabs use the same jigId.
  - jigId: timecard
    instanceId: week1
    tab:
      type: component.tab-button
      options:
        title: Week 1
        icon: number-one-circle
    # Provide the values for the inputs to the jig to display on the jig.
    inputs:
      Team: HVAC Team
      shift: Day
      hours: 8
  # Tab 2
  # Note all the tabs use the same jigId.
  - jigId: timecard
    instanceId: week2
    tab:
      type: component.tab-button
      options:
        title: Week 2
        icon: number-two-circle
    # Provide the values for the inputs to the jig to display on the jig.
    inputs:
      Team: Electrical Team
      shift: Night
      hours: 12
      color: color2
  # Tab 3
  # Note all the tabs use the same jigId.
  - jigId: timecard
    instanceId: week3
    tab:
      type: component.tab-button
      options:
        title: Week 3
        icon: number-three-circle
    # Provide the values for the inputs to the jig to display on the jig.
    inputs:
      Team: Plumbing Team
      shift: Split
      hours: 6
      color: color4

timecard.jigx