Skip to main content

didShowPanel

Indicates that the panel has been shown to the user.

Overview​

Call this method when your application shows the Maestro panel to the user. This allows the SDK to update its internal state and trigger any necessary analytics events.

Method Signature​

didShowPanel(): Promise<void>

Parameters​

This method does not take any parameters.

Return Value​

A Promise that resolves when the internal state has been updated.

Example Usage​

import SDK from '@maestro_io/maestro-web-sdk';

// Function to show the panel
async function showPanel() {
  try {
    // Render the panel UI
    const unmountFunction = await SDK.renderPanel('panel-container');
    
    // Get the event view model
    const event = SDK.getMaestroEventViewModel();
    
    // Update the DOM to show the panel (your application specific code)
    document.getElementById('panel-container').classList.add('visible');
    
    // Notify the SDK that the panel is now visible
    await event.didShowPanel();
    
    // Optional: Store the unmount function for later use
    this.unmountFunction = unmountFunction;
    
    return true;
  } catch (error) {
    console.error('Failed to show panel:', error);
    return false;
  }
}

Usage with React​

import React, { useEffect, useState } from 'react';
import SDK from '@maestro_io/maestro-web-sdk';

function PanelComponent() {
  const [isPanelVisible, setIsPanelVisible] = useState(false);
  const [unmountFunction, setUnmountFunction] = useState(null);
  
  // Function to toggle panel visibility
  const togglePanel = async () => {
    if (!isPanelVisible) {
      try {
        // Render the panel
        const unmount = await SDK.renderPanel('panel-container');
        setUnmountFunction(() => unmount);
        
        // Notify the SDK that the panel is visible
        const event = SDK.getMaestroEventViewModel();
        await event.didShowPanel();
        
        setIsPanelVisible(true);
      } catch (error) {
        console.error('Failed to show panel:', error);
      }
    } else {
      // Hide the panel
      if (unmountFunction) {
        unmountFunction();
        setUnmountFunction(null);
      }
      
      // Notify the SDK that the panel is hidden
      const event = SDK.getMaestroEventViewModel();
      await event.didHidePanel();
      
      setIsPanelVisible(false);
    }
  };
  
  return (
    <div>
      <button onClick={togglePanel}>
        {isPanelVisible ? 'Hide Panel' : 'Show Panel'}
      </button>
      <div 
        id="panel-container" 
        className={`panel-container ${isPanelVisible ? 'visible' : 'hidden'}`} 
      />
    </div>
  );
}

Proper Panel Lifecycle​

The typical lifecycle for showing the panel includes:

  1. Create a DOM element where the panel will be rendered
  2. Call SDK.renderPanel() to render the panel into that element
  3. Update your UI to show the panel (e.g., by changing CSS classes or visibility)
  4. Call event.didShowPanel() to notify the SDK that the panel is now visible

When hiding the panel, the process is reversed:

  1. Call the unmount function returned by renderPanel() to remove the panel
  2. Update your UI to hide the panel container
  3. Call event.didHidePanel() to notify the SDK that the panel is now hidden

Notes​

  • Always call this method after the panel has been successfully rendered and is visible to the user.
  • This method triggers internal state updates and may trigger analytics events.
  • This method should be called in conjunction with showing the panel UI in your application.
  • The panel can be shown and hidden multiple times during an event without needing to reinitialize.
  • Showing the panel does not automatically trigger focus management - if you need to set focus to the panel, you should call event.startFocusManagement() separately.
Last updated on