<DashboardEmbed />

Learn about the <DashboardEmbed /> component and how to enhance your embedded dashboards in your React applications using the `embed-dossier-mstr-react` package.

Import

import { DashboardEmbed } from "embed-dossier-mstr-react"

Props

PropTypeRequiredDescription
dossierUrlstringYesThe complete URL of your MicroStrategy dossier in the format: https://{env-url}/{libraryName}/app/{projectId}/{dossierId}
classNamestringNoCSS class names to apply to the container element
styleReact.CSSPropertiesNoInline styles to apply to the container element
configOmit<MicroStrategyDossierConfig, "placeholder" | "url">NoAdditional configuration options for the dashboard

Basic Usage

Here's a simple example of using the DashboardEmbed component:

import { DashboardEmbed } from "embed-dossier-mstr-react"

const MyDashboard = () => {
  return (
    <DashboardEmbed
      dossierUrl="https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0"
      className="my-dashboard"
      style={{ height: "600px" }}
    />
  )
}

How It Works

The DashboardEmbed component:

  1. Extracts the server URL from the provided dossier URL using the getInfoFromUrl utility
  2. Uses the useCreateDashboard hook to initialize and create the dashboard
  3. Renders a div element with the provided styling that serves as the container for the embedded dashboard

Advanced Configuration

You can customize the behavior and appearance of your dashboard by providing a config object:

import { DashboardEmbed } from "embed-dossier-mstr-react"

const MyCustomDashboard = () => {
  return (
    <DashboardEmbed
      dossierUrl="https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0"
      config={{
        enableResponsive: true,
        disableNotification: true,
        dockedFilter: {
          dockedPosition: "left",
          canClose: true,
          dockChangeable: true,
          isDocked: true,
        },
        navigationBar: {
          enabled: true,
          gotoLibrary: true,
          title: true,
          toc: true,
        },
        filterFeature: {
          enabled: true,
          edit: true,
          summary: true,
        },
      }}
      style={{ height: "800px", width: "100%" }}
    />
  )
}

Configuration Options

The config prop accepts all MicroStrategy dossier configuration options except for placeholder and url (which are handled automatically). Some common configuration options include:

OptionTypeDescription
enableResponsivebooleanEnable responsive design for the dashboard
disableNotificationbooleanHide notification popups
dockedFilterobjectConfigure the filter panel docking behavior
navigationBarobjectConfigure the navigation bar options
filterFeatureobjectConfigure the filter features
shareFeatureobjectConfigure sharing functionality
customUiobjectCustomize UI elements

Error Handling

The component includes basic error handling for URL parsing. If the dossier URL cannot be parsed correctly, an error will be logged to the console, but the component will still attempt to render with an empty server URL.

For more robust error handling, you may want to use the useCreateDashboard hook directly or use the DashboardEmbedWithAuth component which provides more comprehensive error handling.

Examples

Basic Dashboard

<DashboardEmbed dossierUrl="https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0" />

Dashboard with Custom Styling

<DashboardEmbed
  dossierUrl="https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0"
  className="rounded-lg shadow-lg"
  style={{
    height: "700px",
    width: "100%",
    border: "1px solid #e5e7eb",
  }}
/>

Read-Only Dashboard

<DashboardEmbed
  dossierUrl="https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0"
  config={{
    dossierFeature: {
      readonly: true,
    },
    navigationBar: {
      enabled: true,
      edit: false,
    },
  }}
/>