Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCAD3DAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Rasterex API/docs/components/files/tabs

File Management

Keep your application tabs in sync with the canvas. The canvas 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 canvas.

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

  • Automatic Updates: Your UI reacts instantly when files are opened or closed in the canvas.
  • Two-Way Control: Switch tabs from your own UI or let the canvas handle the interaction.
  • Consistent State: The canvas 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 canvas which file to show, and the canvas 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 canvas to switch.

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

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

2. Canvas Updates State

When the file loads or the user switches tabs manually, the canvas 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 canvas.

Interactive Workbench

File tabs preview

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

Additional Resources

Keep tab sync connected to file payload references.