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.

"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"].

Note that if no applications / shortcuts / widgets will become visible based on the layout groups, the tab itself is omitted from being displayed.

Putting It All Together

Below is a complete example of a Tabbed Layouts configuration:

"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"]
    }
  ]
}