Library Page Use Case

Learn how to embed a MicroStrategy Library Page in your React application using the embed-dossier-mstr-react package.

Installation

First, install the package. You could see the documentation about installing the package in Installation Page

Basic Usage

The simplest way to embed a library page is using the LibraryPageEmbed component:

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

function MyLibraryPage() {
  return (
    <LibraryPageEmbed
      serverUrlLibrary="https://your-mstr-server/MicroStrategyLibrary"
      className="library-container"
      style={{ height: "600px" }}
      config={{
        containerHeight: "600px",
        containerWidth: "100%",
      }}
    />
  )
}

Props

The LibraryPageEmbed component accepts the following props:

  • serverUrlLibrary (required): The URL of your MicroStrategy Library server
  • className (optional): CSS class names to apply to the container
  • style (optional): React inline styles for the container
  • config (optional): Additional configuration options for the library page

Advanced Configuration

You can customize the library page behavior using the config prop:

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

function CustomizedLibraryPage() {
  return (
    <LibraryPageEmbed
      serverUrlLibrary="https://your-mstr-server/MicroStrategyLibrary"
      config={{
        // Authentication
        enableCustomAuthentication: true,
        customAuthenticationType: "AUTH_TOKEN",
        getLoginToken: async () => "your-auth-token",

        // Container settings
        containerHeight: "800px",
        containerWidth: "100%",

        // Library-specific settings
        libraryItemSelectMode: "single", // or "multiple"
        currentPage: {
          name: "myFolders",
          key: "personal",
        },

        // Custom UI settings
        customUi: {
          library: {
            toolbarEnabled: true,
            navigationBarEnabled: true,
          },
        },

        // Error handling
        errorHandler: (error) => {
          console.error("Library error:", error)
        },
        sessionErrorHandler: (error) => {
          console.error("Session error:", error)
        },
      }}
    />
  )
}

Using the useCreateLibraryPage Hook

For more control over the library page embedding process, you can use the useCreateLibraryPage hook directly:

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

function CustomLibraryPage() {
  const { libraryPage, libraryPageRef, isSdkLoaded, isLoading, error } =
    useCreateLibraryPage({
      serverUrlLibrary: "https://your-mstr-server/MicroStrategyLibrary",
      config: {
        containerHeight: "600px",
        containerWidth: "100%",
        enableCustomAuthentication: true,
      },
    })

  if (!isSdkLoaded) {
    return <div>Loading MicroStrategy SDK...</div>
  }

  if (isLoading) {
    return <div>Loading library page...</div>
  }

  if (error) {
    return <div>Error: {error}</div>
  }

  return (
    <div>
      <div ref={libraryPageRef} className="library-container" />
      {libraryPage && (
        <div>
          {/* Example of using library page methods */}
          <button onClick={() => libraryPage.setSidebarVisibility?.(true)}>
            Show Sidebar
          </button>
          <button onClick={() => libraryPage.setNavigationBarEnabled?.(false)}>
            Hide Navigation
          </button>
        </div>
      )}
    </div>
  )
}

Hook Return Values

The useCreateLibraryPage hook returns an object with the following properties:

  • libraryPage: The MicroStrategy library page instance (null until loaded)
  • libraryPageRef: React ref that must be attached to the container div
  • isSdkLoaded: Boolean indicating if the MicroStrategy SDK has loaded
  • isLoading: Boolean indicating if the library page is currently loading
  • error: Error message string if there was an error, null otherwise

Library Page Methods

The library page instance provides several useful methods:

// Example of using library page methods
function LibraryPageWithControls() {
  const { libraryPage } = useCreateLibraryPage({
    serverUrlLibrary: "your-server-url",
    config: {
      /* ... */
    },
  })

  const handleGetGroups = async () => {
    if (libraryPage) {
      // Get all user groups
      const myGroups = await libraryPage.getAllMyGroups?.()
      const defaultGroups = await libraryPage.getAllDefaultGroups?.()

      console.log("My Groups:", myGroups)
      console.log("Default Groups:", defaultGroups)
    }
  }

  return (
    <div>
      {/* UI Controls */}
      <button onClick={handleGetGroups}>Get Groups</button>
      <button onClick={() => libraryPage?.setSidebarVisibility?.(true)}>
        Show Sidebar
      </button>
      <button onClick={() => libraryPage?.setNavigationBarEnabled?.(false)}>
        Hide Navigation
      </button>
    </div>
  )
}

Error Handling

The component and hook include built-in error handling:

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

function LibraryPageWithErrorHandling() {
  const { libraryPageRef, isSdkLoaded, isLoading, error } =
    useCreateLibraryPage({
      serverUrlLibrary: "https://your-mstr-server/MicroStrategyLibrary",
      config: {
        errorHandler: (error) => {
          console.error("Library error:", error)
          // Handle library-specific errors
        },
        sessionErrorHandler: (error) => {
          console.error("Session error:", error)
          // Handle session-related errors
        },
      },
    })

  if (!isSdkLoaded) {
    return <div>Loading SDK...</div>
  }

  if (isLoading) {
    return <div>Loading library page...</div>
  }

  if (error) {
    return <div>Error: {error}</div>
  }

  return <div ref={libraryPageRef} className="library-container" />
}

Example Use Case Implementation

Here's a live example of how to implement a library page embed in a real-world scenario:

Or you can see the code on StackBlitz:

See the code on StackBlitz

API Reference

For detailed information about all available configuration options and methods, please refer to the API Reference Documentation.