> For the complete documentation index, see [llms.txt](https://docs.bluefletch.com/bluefletch-enterprise/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bluefletch.com/bluefletch-enterprise/product-guides/bluefletch-launcher/configurable-layouts/tabbed-layouts.md).
# Tabbed Layouts
## Overview
An alternative to the standard layout method, Tabbed Layouts organizes apps into tabs, each linked to specific layouts, and spreads them across multiple pages as needed. When enabled, apps are grouped into tabs and clicking on a tab will jump to that specific page in the workspace.
Configured footers are replaced with a widget similar to the quickStartApps widget. This widget displays icons that act as shortcuts to the first page of each tab.
## User Guide
* Tabs are created by grouping apps in the Launcher configuration. Each tab represents a specific group of apps, such as "AssociateApps".
* Tabs are populated across multiple pages by the Launcher, which automatically organizes apps within each tab.
* The footer widget replaces any configured footers and provides shortcuts for each tab.
* Tab icons in the footer can be tapped to jump directly to the first page of the associated tab.
* Pages within a tab can be swiped through to view all apps in the group.
## Feature Configuration
### Enabling Tabbed Layouts
To enable Tabbed Layouts, set **tabbedLayouts** to true within the Launcher configuration file.
```json
"tabbedLayouts": {
"enabled": true,
"showIcons": true,
"iconSize": 18,
"showLabels": true,
"labelFontSize": 12,
"labelFontColor": "#FFFFFF",
"backgroundColor": "#14364a",
"searchEnabled": true,
"edgeToEdge": true,
"tabs": [ ... ],
"criteria_OR": [
{
"field": "_${session.userId}",
"pattern": "^_.+$"
}
]
}
```
### Configuring the Tab Layout
To configure the overall tab layout, use the table below as a guide:
| enabled | Set to **true** to enable tab switching. This will override your footer settings if enabled. default value is **false** |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| backgroundColor | Set with the hex RGB background color of the tab bar, e.g. "#633200" |
| showIcons | Set to **true** to display icon indicators for each tab. |
| iconSize | Size (in dp) of the icons if shown. |
| showLabels | Set to **true** to show labels below each tab icon. |
| labelFontSize | Size (in dp) of the label fonts. |
| labelFontColor | Set with the hex RGB color of the label. |
| searchEnabled | If set to **true** this will insert a search tab as the first tab icon. |
| edgeToEdge | By default, the tab bar will display as a floating footer widget. To display as a fixed toolbar, Set the edgeToEdge parameter to **true.** |
| tabs | An array of **tab** objects that define the function for each tab. |
| criteria\_OR
criteria\_AND
| Criteria objects that can be used to define when the tab layout will appear (e.g. you can configure the tab widget to only appear after login). |
### Configuring Tabs
Create a tab object for each page/group, using the table below as a guide:
| label | The tab's display name shown in the footer. Example: "tab1", "tab2". |
| --------- | ------------------------------------------------------------------------------------------------------------------------- |
| icon | The icon for the tab, referencing an asset. Example: "assets:bsb". |
| iconColor | The icon's color. Example: "633200", "000000", "FF5733". |
| layouts | The layouts assigned to the tab. Use "\*" for all apps or specify layouts. Example: \["AssociateApps"], \["ManagerApps"]. |
{% hint style="info" %}
Note that if no applications / shortcuts / widgets will become visible based on the layout groups, the tab itself is omitted from being displayed.
{% endhint %}
### Putting It All Together
Below is a complete example of a Tabbed Layouts configuration:
```json
"tabbedLayouts": {
"enabled": true,
"showIcons": true,
"iconSize": 18,
"showLabels": true,
"labelFontSize": 12,
"labelFontColor": "#FFFFFF",
"backgroundColor": "#14364a",
"searchEnabled": true,
"edgeToEdge": true,
"criteria_OR": [
{
"field": "_${session.userId}",
"pattern": "^_.+$"
}
],
"tabs": [
{
"label": "tab1",
"icon": "assets:bsb",
"iconColor": "633200",
"layouts": ["*"]
},
{
"label": "tab2",
"icon": "assets:bsb",
"iconColor": "000000",
"layouts": ["AssociateApps", "ManagerApps"]
},
{
"label": "tab3",
"icon": "assets:bsb",
"iconColor": "FF5733",
"layouts": ["TabTest"]
},
{
"label": "tab4",
"icon": "assets:bsb",
"iconColor": "000000",
"layouts": ["AssociateApps"]
}
]
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.bluefletch.com/bluefletch-enterprise/product-guides/bluefletch-launcher/configurable-layouts/tabbed-layouts.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.