Workspace

The Workspace component provides a flexible full-screen layout designed for building comprehensive, multi-pane views within the GridStudio interface. It is structured as a three-column layout:

• Left Column (optional): Often used for menus or navigation panels. Can be collapsible.
• Center Column: The main content area where views are rendered. This is the widest section and the core of the workspace.
• Right Column (optional): A fixed-width area for auxiliary widgets or contextual information.

This structure allows developers to create rich, responsive dashboards or management interfaces, especially when combined with the built-in Tab component for organizing content in the center pane.

---

Usage

To render a Workspace, your Custom View function should return an object describing the layout and tab configuration. The example below demonstrates a standard use case with collapsible left panel and a tab-based content structure in the center column.

CustomFunction(async function ({ sdk }, reject, resolve) {
  resolve(async function CustomFunction({ sdk }) {
    return {
      isTemplateLeftCollapsible: true,
      tabs: {
        name: 'bbTabs',
        queryParamKey: 'bbTab',
        isNoPadding: true,
        listHeader: {
          title: 'BaytiBot',
          iconName: 'robot',
        },
        panes: [
          {
            id: 'leads',
            iconName: 'crown',
            text: 'Leads',
            isActive: true,
            customFunctionPathString: sdk.utils.absolutePathString('leads/index.js'),
          },
          {
            id: 'appointments',
            iconName: 'calendar',
            text: 'Appointments',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('appointments/index.js'),
          },
          {
            id: 'properties',
            iconName: 'building',
            text: 'Properties',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('properties/index.js'),
          },
          {
            id: 'projects',
            iconName: 'strategy',
            text: 'Projects',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('projects/index.js'),
          },
          {
            id: 'settings',
            iconName: 'gear-six',
            text: 'Settings',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('settings/index.js'),
          },
        ],
      },
    }
  })
})

---

Parameters

Key	Type	Description
isTemplateLeftCollapsible	boolean	Enables or disables collapsibility of the left column.
tabs.name	string	Unique identifier for the tab group.
tabs.queryParamKey	string	URL query key used to persist the selected tab state.
tabs.isNoPadding	boolean	Removes internal padding inside the tab pane area.
tabs.listHeader.title	string	Title displayed at the top of the tab pane.
tabs.listHeader.iconName	string	Icon shown next to the title.
tabs.panes[]	array	Defines each tab item and the function it loads.
panes[].id	string	Unique tab identifier.
panes[].iconName	string	Icon name to represent the tab.
panes[].text	string	Label text shown on the tab.
panes[].isActive	boolean	Marks the tab as initially active. Only one should be true.
panes[].customFunctionPathString	string	Path to the function that renders the view for the tab.

---

Tips

• Use sdk.utils.absolutePathString(path) to dynamically resolve full paths to other custom functions.
• Keep only one tab as isActive: true to avoid rendering conflicts.
• You can dynamically show or hide panes using conditions, allowing role-based UI customization.