How To Build Different Dashboards For Different Panoramas

Prerequisites

• Completed the Build Your First Dashboard with Helium tutorial
• Basic understanding of Helium's page structure and routing
• You have access to your Helium instance and clientIds (panorama ids).
• This will only work in a deployed environment, where the currentUser context will be populated.

About

In this tutorial, we will build on the "Build Your First Dashboard with Helium" use case to create a Helium App that has different dashboard pages for different panoramas (clients). This allows you to provide customized experiences for different client organizations.

Part 1: Set up your project to contain multiple dashboards

Project Structure

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

Part 2: Setting up the dashboard.page.server.tsx page

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

export { onBeforeRender };

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

  // Check if user is authenticated
  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 environment variable is not set'
    );
  }

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

  // If client ID doesn't match any specific panorama, proceed with default dashboard
  return {};
}

Understanding the Code

What does onBeforeRender() do?

The onBeforeRender() hook allows us to perform actions before rendering a page. It's commonly used for:

• Data fetching
• Authentication checks
• Route redirection
• Access control

This hook has access to the pageContext, which contains important information about the current request and user.

Why use a server page?

Server pages allow us to:

• Control server-side behavior on a per-page basis
• Perform authentication and authorization checks
• Handle redirects before the page is rendered
• Access server-side environment variables

Learn more about server pages in the Vike documentation.

How the routing works

1. The code first checks if the user is authenticated by examining currentUser
2. If not authenticated, redirects to the sign-in page
3. Extracts the instanceUrl from environment variables
4. Checks the user's clientId against known panorama IDs:
   • If it matches Panorama A, redirects to /PanoramaDashboardA
   • If it matches Panorama B, redirects to /PanoramaDashboardB
   • If no match is found, proceeds to the default dashboard

Summary

Once deployed, your app will now redirect the user to the dashboard belonging to their client.