Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCADAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Message API/docs/components/files/tabs

File Management

Keep your application tabs in sync with the viewer. The viewer manages the list of open files and the active selection.

Overview

File Management allows you to synchronize your application's tab bar with the list of files open in the viewer.

By connecting your UI to the viewer's session state, you ensure that the active file and tab names are always accurate, even if the user switches files from within the viewer canvas.

  • Automatic Updates: Your UI reacts instantly when files are opened or closed in the viewer.
  • Two-Way Control: Switch tabs from your own UI or let the viewer handle the interaction.
  • Consistent State: The viewer acts as the source of truth for the file list.

Quick Examples

Switch tabs from the host and listen for tab state changes.

Set active tab

iframe.contentWindow.postMessage({
  type: 'setActiveFileByIndex',
  payload: { fileIndex: 2 }
}, viewerOrigin);

Listen for fileTabs

window.addEventListener('message', (event) => {
  if (event.data.type === 'fileTabs') {
    setTabs(event.data.payload.tabs);
  }
});

Control flow

The sync process works in two ways: you tell the viewer which file to show, and the viewer tells your app which files are open.

Host Sends

1. Host Switches Tab

When a user clicks a tab in your parent UI, command the viewer to switch.

javascript
// 1. Get a handle to the viewer iframe
const iframe = document.querySelector('[data-viewer-iframe]');

// 2. Command the viewer to show the 3rd tab
iframe.contentWindow.postMessage({
  type: 'setActiveFileByIndex',
  payload: {
    fileIndex: 2
  }
}, '*');
Canvas Emits

2. Viewer Updates State

When the file loads or the user switches tabs manually, the viewer emits the full tab list.

javascript
// Listen for "fileTabs" to update your UI
window.addEventListener('message', (event) => {
  if (event.data.type === 'fileTabs') {
    const { activeId, tabs } = event.data.payload;
    // Update your application state
    setTabs(tabs);
    setActiveId(activeId);
  }
});

Complete Implementation

Sync file tabs in your UI and keep the active selection aligned.

const VIEWER_ORIGIN = 'https://your-canvas-domain.com';
const iframe = document.querySelector('[data-viewer-iframe]');

function setActiveTab(index) {
  iframe.contentWindow.postMessage({
    type: 'setActiveFileByIndex',
    payload: { fileIndex: index }
  }, VIEWER_ORIGIN);
}

window.addEventListener('message', (event) => {
  if (event.origin !== VIEWER_ORIGIN) return;
  if (event.data.type === 'fileTabs') {
    setTabs(event.data.payload.tabs);
    setActiveId(event.data.payload.activeId);
  }
});
Complete Implementation

Live Preview

Try the interactive preview below to see how events flow between the host and the viewer.

Interactive Workbench

File tabs preview

Open multiple files one at a time and monitor the tabs emitted by the viewer.

Additional Resources

Keep tab sync connected to file payload references.