Actions
set-active-tab

6min
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﻿
﻿
Core structure
﻿
Action Identifier
Give the action a unique name that will be used to reference the action in another '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
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 . 
In the corresponding  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
timelogs.jigx
title: Time logging
description: Log the time taken to complete the job
type: jig.default

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

onRefresh: 
  type: action.reset-state
  options:
    state: [email protected]-form.state.data
    
children:
  - type: component.form
    instanceId: shift-form
    options:
      children:
        - type: component.number-field
          instanceId: employee-number
          options:
            label: Employee number
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: firstName
                options:
                  label: Name
              - type: component.text-field
                instanceId: lastName
                options:
                  label: Last Name   
        - type: component.email-field  
          instanceId: email
          options:
            label: Email  
        - type: component.text-field
          instanceId: contact
          options:
            textContentType: telephoneNumber
            label: Contact number
        - type: component.field-row
          options:
            children:
              - type: component.date-picker
                instanceId: shift-date
                options:
                  label: Select shift date 
              - type: component.duration-picker
                instanceId: shift-duration
                options:
                  label: Log your shift duration
                  initialValue: 14400
                  helperText: Standard shift is 4 hours 
                  errorText: [email protected] > 14400 ? 'Shift time needs approval':'' 
                  hours:
                    step: 4
                  minutes:
                    step: 2  
                    
actions:
  - children:
      # To trigger the action.set-active-tab in the jig.tabs.jigx,
      # configure an action button to execute the action.
      # This button displays on the bottom of the jig,
      # when tapped it will open the next appointment tab. 
      - type: action.execute-action
        options:
          title: Next appointment
          # Reference the action identifier configured in the jig.tabs.
          action: next-appointment            
title: Time logging
description: Log the time taken to complete the job
type: jig.default

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

onRefresh: 
  type: action.reset-state
  options:
    state: =@ctx.components.shift-form.state.data
    
children:
  - type: component.form
    instanceId: shift-form
    options:
      children:
        - type: component.number-field
          instanceId: employee-number
          options:
            label: Employee number
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: firstName
                options:
                  label: Name
              - type: component.text-field
                instanceId: lastName
                options:
                  label: Last Name   
        - type: component.email-field  
          instanceId: email
          options:
            label: Email  
        - type: component.text-field
          instanceId: contact
          options:
            textContentType: telephoneNumber
            label: Contact number
        - type: component.field-row
          options:
            children:
              - type: component.date-picker
                instanceId: shift-date
                options:
                  label: Select shift date 
              - type: component.duration-picker
                instanceId: shift-duration
                options:
                  label: Log your shift duration
                  initialValue: 14400
                  helperText: Standard shift is 4 hours 
                  errorText: =@ctx.component.state.value > 14400 ? 'Shift time needs approval':'' 
                  hours:
                    step: 4
                  minutes:
                    step: 2  
                    
actions:
  - children:
      # To trigger the action.set-active-tab in the jig.tabs.jigx,
      # configure an action button to execute the action.
      # This button displays on the bottom of the jig,
      # when tapped it will open the next appointment tab. 
      - type: action.execute-action
        options:
          title: Next appointment
          # Reference the action identifier configured in the jig.tabs.
          action: next-appointment            
﻿
﻿
Core structure
Action Identifier	Give the action a unique name that will be used to reference the action in another '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.
Updated 18 Feb 2025
Did this page help you?
set-state
set-active-tab

﻿Configuration options﻿

Core structure

State configuration

Key

Notes

Considerations

How to configure the action

﻿Examples and code snippets ﻿

Basic set active tab

Configuration options

Examples and code snippets
