set-active-tab

Programmatically set the next active tab to display in the jig.tabs. The action determines which tab will open next. For example, if you are on the third tab, the action button can be set to open the first tab.

Configuration options

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

Core structure
Action Identifier	Give the action a unique name that will be used to reference the action in another jig's action. See the example below.
id	Provide the jigId for the jig that will be opened next.

State configuration	Key	Notes
[email protected].	initialTabId	A state variable used to reference the tab designated as the default.
[email protected].	activeTabId	A state variable that references the currently active tab.

Considerations

• The action.set-active-tab can only be used in jig.tabs.

• The action.set-active-tab needs to be referenced as a callback action which is used in conjunction with the action.execute-action.

How to configure the action

1. The action is configured under the jigId in the jig.tabs file. Give the action a unique name (action identifier) that will be used to reference the action in the tab's corresponding jig.

2. In the corresponding jig configure the action.execute-action and specify the unique name (action identifier) in the action property's value.

Examples and code snippets

Basic set active tab

Set next active tab

In this example, when you are on the third tab (timelogs), a Next Appointment button at the bottom of the screen will open the first tab (appointments). Note: The action.set-active-tab works in conjunction with action.execute-action using an action identifier.

jig.tabs.jigx

type: jig.tabs
title: Global INC
areTabsScrollable: false

children:
  - jigId: appointments
    title: Today
    icon: calendar-3
  - jigId: inventory
    title: Stock
    icon: supply-chain-shipping-fee-included-truck
  - jigId: timelogs
    title: Logs
    icon: time-clock-circle-1-alternate    
    actions:
      # Give the action a unique identifier. 
      # In the main jig use this identifier in the action.execute-action.
      # This creates the action button on the main jig 
      # to trigger the action.
      next-appointment: 
        type: action.set-active-tab
        options:
          # Set the next tab that will open programatically,
          # when the action button is tapped in the timelogs jig.
          # The id is the jigId of the tab you want to open next.   
          id: appointments
  - jigId: manuals
    title: Help   
    icon: book-book-pages

timelogs.jigx