Services
Creating

Creating a Dashboard

Initializing the Vizzly API

Ensure you have loaded the Vizzly package by following the prerequisite steps in our initializing guide. You will then be able to instantiate the Vizzly API using the following code

const api = new Vizzly.API(<< Identity function >>);

Note that << Identity function >> is your identity function itself, not the returned value from it. Feel free to reuse the same identity function that you use to render the Vizzly dashboard. For more information about the identity function, see the identity docs

To create a dashboard a parent dashboard Id is required this can be included in two ways. Either by passing it into the call or by doing it when the API is initialised.

  • Direct Method: Pass the ID directly into the creation call.
  • Initialization Method: Specify the ID during the API initialization process.

Below are the steps and code snippets to guide you through each method.

Direct Method

await api.createDashboard(<< options >>);

Initialization Method

When loading the API, you can set a default Parent Dashboard ID. This ID will be used when creating new dashboards unless otherwise specified.

// Configuration object with Parent Dashboard ID
const apiConfig = {
  parentDashboardId: << PARENT DASHBOARD ID >>
};
 
// Initialize the API with the configuration
const manager = new Vizzly.API(apiConfig);
 
// Create a new dashboard using the default Parent Dashboard ID
await manager.createDashboard(<< options >>);

Parameters for createDashboard

The createDashboard function accepts an object with the following properties:

  • definition: The structure and content of the new dashboard.
  • metadata: Any additional metadata required for the dashboard, which can be of any type as per your needs.
  • parentDashboardId (optional): The identifier for the parent dashboard. If not provided, the default ID set during initialization will be used.

Here is the TypeScript type definition:

export type CreateDashboard = {
  definition: Dashboard.SaveableDashboardDefinition; // Structure and content of the dashboard
  metadata: any; // Replace 'any' with a more specific type if possible for additional metadata
  parentDashboardId?: string; // Optional Parent Dashboard ID
};

definition

This will be the Dashboard you created in Building blocks.

Note: meta property has been deprecated and replaced with metadata