[NEW] Workspaces

​

What is an Upsolve Workspace?

​

Dashboard Types in a Workspace

​

Global Dashboards

• Created by administrators in the Upsolve Hub
• Visible to all users of the workspace
• Read-only for end users (tenants)
• Define the baseline analytics experience

​

Tenant Dashboards

• Created by individual users/tenants when embedded
• Private to each tenant
• Fully editable by the tenant who created them
• Allow for personalized analytics views

​

Creating Your First Workspace

1. Navigate to Workspaces: In the Upsolve Hub, go to your workspace management area
2. Create New Workspace: Click the “Create Workspace” button
3. Initial Dashboard: The system automatically creates your first dashboard, which becomes the foundation of your workspace
4. Workspace Properties: The workspace inherits its name, author, and metadata from this first dashboard

​

Adding Dashboards to Your Workspace

1. Use the + Button: In your workspace view, click the ”+” button to create a new dashboard
2. Dashboard Creation: This opens the dashboard builder where you can:
   • Add charts and visualizations
   • Configure filters
   • Set dashboard permissions
3. Automatic Organization: New dashboards are automatically added to your current workspace

​

Managing Dashboard Organization

​

Moving Dashboards

1. Access Move Function: Click the “Move” button on any dashboard
2. Select Destination: Choose the target workspace from the dropdown
3. Confirm Move: The dashboard moves to the new workspace immediately

​

Important Behaviors

• Empty Workspaces: If you move all dashboards out of a workspace, it will automatically disappear from your home screen
• Workspace Inheritance: When moved, dashboards adapt to their new workspace’s configuration

​

Deploying Your Workspace

​

Using the UpsolveWorkspace Component

import { UpsolveWorkspace } from '@upsolve-labs/react';

function MyApp() {
  const userToken = "your-tenant-jwt"; // Replace with your tenant JWT

  return (
    <UpsolveWorkspace
      workspaceId="your-workspace-id"
      tenantJWT={userToken}
      tenantEditingPermissions={{
        addChart: true,
        addFilter: true,
        createChart: true,
        editCharts: true,
        removeChart: true,
        aiCharts: true
      }}
    />
  );
}

​

Key Props Explained

• workspaceId: The unique identifier of your workspace (found in the Hub)
• tenantJWT: Authentication token for your tenant
• tenantEditingPermissions: Controls what your users can do:
  • addChart: Allow tenants to add charts to their view-only dashboards
  • addFilter: Allow tenants to add filters that apply only to their view
  • createChart: Allow tenants to create new charts that appear only for them
  • createChartSQL: Allow tenants to create charts with SQL (requires createChart)
  • editCharts: Allow tenants to edit charts in their personal dashboards
  • removeChart: Allow tenants to remove charts from their view of a dashboard
  • readOnly: Make personal dashboards visible but read-only
  • disableTabs: Disable tabbed display in the SDK
  • aiCharts: Allow tenants to use AI-powered chart creation
  • editMarketplace: Allow tenants to edit marketplace charts
  • aiInsight: Allow access to the AI insights chat sidebar

​

Getting Your Workspace ID

1. In the Upsolve Hub, navigate to your workspace
2. Click the “Deploy” button
3. Copy the provided workspace ID and integration code

​

Code Examples

​

Basic Workspace Component

import { UpsolveWorkspace } from '@upsolve-labs/react';

export function AnalyticsDashboard({ userToken }: { userToken: string }) {
  return (
    <div className="analytics-container">
      <h1>Company Analytics</h1>
      <UpsolveWorkspace
        workspaceId="ws_abc123"
        tenantJWT={userToken}
        tenantEditingPermissions={{
          addChart: true,
          addFilter: true,
          createChart: true,
          editCharts: true,
          removeChart: true,
        }}
        tabPlacement="top" // or "popover"
      />
    </div>
  );
}

​

Advanced Configuration

<UpsolveWorkspace
  workspaceId="ws_abc123"
  tenantJWT={userToken}
  tenantEditingPermissions={{
    addChart: true,
    createChart: false, // Users can add existing charts but not create new ones
    editCharts: true,
    readOnly: false
  }}
  theme="dark" // or "light"
  tabPlacement="popover" // Compact dropdown instead of tabs
/>

​

Alternative Deployment: IFrame Embedding

​

IFrame Deployment

​

Basic IFrame Integration

<iframe
  src="https://hub.upsolve.ai/share/dashboard/[DASHBOARD_ID]?personalWorkspace=true&createChart=true"
  width="100%"
  height="600px"
  frameborder="0">
</iframe>

​

IFrame Configuration Parameters

Essential Parameters

• personalWorkspace=true - Required to enable workspace functionality with tabs
• jwt=[YOUR_JWT_TOKEN] - Authentication token for your users

Dashboard Creation Controls

• createChart=true - Allow users to create new charts and dashboards
• addChart=true - Allow users to add existing charts to dashboards
• addFilter=true - Allow users to add filters to dashboards

Additional Permissions

• editCharts=true - Allow editing of chart configurations
• removeChart=true - Allow removing charts from dashboards
• aiCharts=true - Enable AI-powered chart creation
• readOnly=true - Personal dashboards visible but read-only
• disableTabs=true - Show single dashboard without tabs

UI Customization

• hideHeader=true - Hide the dashboard header
• hideDownloadButton=true - Hide download functionality
• theme=dark or theme=light - Set color theme
• globalDashboardName=Custom Name - Override the global tab name

​

Complete IFrame Examples

​

Full-Featured Workspace

<iframe
  src="https://hub.upsolve.ai/share/dashboard/your-dashboard-id?personalWorkspace=true&createChart=true&addChart=true&addFilter=true&editCharts=true&removeChart=true&aiCharts=true&jwt=your-jwt-token"
  width="100%"
  height="800px"
  frameborder="0">
</iframe>

​

Read-Only Workspace (No + Button)

<iframe
  src="https://hub.upsolve.ai/share/dashboard/your-dashboard-id?personalWorkspace=true&jwt=your-jwt-token"
  width="100%"
  height="600px"
  frameborder="0">
</iframe>

​

Single Dashboard (No Tabs)

<iframe
  src="https://hub.upsolve.ai/share/dashboard/your-dashboard-id?disableTabs=true&hideHeader=true&jwt=your-jwt-token"
  width="100%"
  height="500px"
  frameborder="0">
</iframe>

​

Dark Theme with Custom Global Name

<iframe
  src="https://hub.upsolve.ai/share/dashboard/your-dashboard-id?personalWorkspace=true&createChart=true&theme=dark&globalDashboardName=Company Analytics&jwt=your-jwt-token"
  width="100%"
  height="700px"
  frameborder="0">
</iframe>

​

⚠️ Important Requirements

​

For Dashboard Creation (+ Button)

1. personalWorkspace=true is set, AND
2. At least one of these permissions is enabled:
   • createChart=true
   • addChart=true
   • addFilter=true

​

Workspace vs Single Dashboard

• With personalWorkspace=true: Shows tabbed interface with global + tenant dashboards
• With disableTabs=true: Shows single dashboard without tabs
• Default behavior: Shows only the specified dashboard without workspace features

​

Technical Notes

• UpsolveWorkspace wraps internal dashboard rendering to provide tabs and workspace context
• Workspaces contain multiple dashboards identified by workspaceId
• Each dashboard has a tenant_id (null for global, specific ID for tenant dashboards)
• The component automatically handles tab creation and switching
• Global dashboards (tenant_id = null) are read-only for embedded users
• Tenant dashboards are fully editable based on tenantEditingPermissions
• Empty workspaces automatically disappear from the Hub interface
• The + button creates new dashboards within the current workspace
• Tab placement can be top (traditional tabs) or popover (dropdown)