# set-active-tab

Programmatically set the next active tab to display in the [jig.tabs](/examples/readme/jig-types/jig_tabs.md). 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 actions, see [Common action properties](/examples/readme/actions/common-action-properties.md) for the list of actions and their configuration options.

<table><thead><tr><th width="179.25390625">Core structure</th><th></th></tr></thead><tbody><tr><td><code>Action Identifier</code></td><td>Give the action a unique name that will be used to reference the action in another jig's action. See the example below.</td></tr><tr><td><code>id</code></td><td>Provide the <code>jigId</code> for the jig that will be opened next.</td></tr></tbody></table>

<table><thead><tr><th width="181.921875">State configuration</th><th width="144.46484375">Key</th><th>Notes</th></tr></thead><tbody><tr><td><code>=@ctx.jig.state.</code></td><td><code>initialTabId</code></td><td>A state variable used to reference the tab designated as the default.</td></tr><tr><td><code>=@ctx.jig.state.</code></td><td><code>activeTabId</code></td><td>A state variable that references the currently active tab.</td></tr></tbody></table>

## Considerations

* The `action.set-active-tab` can only be used in [jig.tabs](/examples/readme/jig-types/jig_tabs.md).
* 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

{% columns %}
{% column %}

<figure><img src="/files/37FV2sLCEhd7BzEPtGOe" alt="Set next active tab" width="188"><figcaption><p>Set next active tab</p></figcaption></figure>
{% endcolumn %}

{% column %}
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`.
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="jig.tabs.jigx" %}

```yaml
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
```

{% endtab %}

{% tab title="timelogs.jigx" %}

```yaml
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            
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jigx.com/examples/readme/actions/set-active-tab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.