Multi-Panorama Dashboards

Build on the Build Your First Dashboard tutorial to create different dashboard pages for different panoramas (clients).

Prerequisites

• Completed the Build Your First Dashboard tutorial
• Basic understanding of Helium's page structure and routing
• Access to your Helium instance and clientIds (panorama IDs)
• This only works in a deployed environment where currentUser is populated

Part 1: Project Structure

my-helium-app
├── pages
│   └── learn
│       ├── dashboard.page.server.tsx
│       └── dashboard.page.tsx
│   └── PanoramaDashboardA
│       └── index.page.tsx
│   └── PanoramaDashboardB
│       └── index.page.tsx
├── renderer
├── locales
├── ti-config.json
└── package.json

Part 2: Server-Side Redirect

Use dashboard.page.server.tsx to detect the user's panorama and redirect:

// dashboard.page.server.tsx
import { PageContext } from 'types';

export { onBeforeRender };

async function onBeforeRender(pageContext: PageContext) {
  const { currentUser } = pageContext;

  if (!currentUser) {
    return {
      pageContext: { redirectTo: '/sign_in' }
    };
  }

  const baseUrl = process.env.HELIUM_PRIVATE_INSTANCE_URL;
  const clientId = currentUser.client;

  if (!baseUrl) {
    throw new Error('HELIUM_PRIVATE_INSTANCE_URL is not set');
  }

  // Panorama A
  if (clientId === '143tyg3y-0280-470b-bfc3-873bd882a5b3') {
    return { pageContext: { redirectTo: `${baseUrl}/PanoramaDashboardA` } };
  }
  // Panorama B
  else if (clientId === '1045e00f-4707-df9b-972e-10842edbaa7f') {
    return { pageContext: { redirectTo: `${baseUrl}/PanoramaDashboardB` } };
  }

  return {};
}

Part 3: Individual Dashboard Pages

Create separate dashboard components for each panorama:

// pages/PanoramaDashboardA/index.page.tsx
import React from 'react';

function Page() {
  return (
    <div>
      <h1>Welcome to Panorama A Dashboard</h1>
    </div>
  );
}

export { Page };

Shared components

Extract common dashboard elements (stats, certificates) into shared components. Only the layout and branding differ between panorama dashboards.