Tab Outlets

Tab outlets render one or more extensions as tabs within a tabbed interface. Each extension contributes a tab, and the platform handles tab switching, loading states, and layout. Tab outlets use the <tecton-tabbed-outlet> element.

How Tab Outlets Work

When a <tecton-tabbed-outlet> is placed in a platform's template, it:

1. Sends a resolution request to the platform with its outlet path, context, and context value
2. The platform resolves which extensions should appear as tabs based on the outlet configuration and context matching
3. For each resolved tab, a <tecton-tab-pane> is created containing an iframe that loads the extension
4. The tab container handles user interaction (switching tabs, settled states)

Configuring an Extension into a Tab Outlet

Extension developers use the Tecton CLI to configure their extension to appear in a tabbed outlet.

Run q2 tecton, select your extension, choose Outlet Configurations, then UUX Tabbed Outlet Config:

The CLI walks through:

1. Entrypoint selection — Choose which module of your extension to configure
2. Enable or disable — Enable your extension for a tabbed outlet or remove it from one
3. Tab label — Set the label that will appear on the tab
4. UUX space — Choose where the tab should appear:
   • Account Details
   • Transaction Details
   • Activity Center
   • Manage Accounts
5. Account/Transaction type — Choose which context types the tab should appear for (paginated list). Select "All Account Types" to show the tab for all account types, or choose a specific type like "Checking Accounts" to limit visibility.

The CLI updates your extension's configuration file at configuration/{ExtensionName}.py.

Context Filtering for Tabs

Tab outlets support context filtering to control which tabs appear based on the current account or transaction type. For example, a tab configured with Account::Checking will only appear on Checking account detail pages.

Context is set automatically by the CLI based on your UUX space and type selections. For more details on context types and the hierarchy, see UUX Content Controls.

Accessing Context in Your Extension

When your extension is rendered inside a tab outlet, you can access the context information that was passed to the outlet.

Client Side Rendered (CSR):

const tecton = await connect();
const { id, value } = tecton.incomingContext;
// id = 'accountId', value = '12345'

Server Side Rendered (SSR):

async def default(self):
    context_id = self.incoming_context.get('id')      # e.g., 'accountId'
    context_value = self.incoming_context.get('value')  # e.g., '12345'

Creating a Tab Outlet (Platform Implementers)

Platform implementers add tab outlets to their templates using the <tecton-tabbed-outlet> element. The element requires a name attribute that matches the outlet path used in extension configurations, and a context attribute that defines what type of data the outlet is contextual to.

<tecton-tabbed-outlet
    name="AccountDetails.main.tabs"
    context="Account::Q2Account"
    contextValue={{accountId}}
    resolvedType={{accountType}}
    min-height="450px"
>
    <q2-tab-container name="account-details-tabs" value={{currentTab}}>
        <!-- Platform-provided tabs can be placed here alongside extension tabs -->
        <tecton-tab-pane value="transactions" label="Transactions" name="account-details-tabs">
            <!-- Platform-owned tab content -->
        </tecton-tab-pane>
    </q2-tab-container>
</tecton-tabbed-outlet>

Attributes

How Extensions Map to Outlets

The mapping between an extension's CLI configuration and the platform's outlet element is handled through the Tecton configuration system. When the CLI configures a tabbed outlet, it writes an entry like:

ACCOUNT_DETAILS_TABS = [
    {
        'tabLabel': 'My Tab',
        'modules': [{'moduleName': 'Main'}]
    }
]

This maps to the AccountDetails.main.tabs outlet in the platform. The platform reads these configurations and resolves which tabs should appear for the current context.