Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCADAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Message API/docs/components/measurement/save

Save

Persist measurement data to the database.

Overview

The save command triggers a request to the viewer to extract and send all active measurements and annotations to the host application for persistence.

After the save request runs, listen for `saveAnnotationsComplete` to confirm whether the save completed successfully.

Control flow

Saving measurements follows a request-completion pattern where the host sends `saveAnnotations` and listens for `saveAnnotationsComplete`.

Host Sends

1. Host Sends

The host application sends the saveAnnotations message to the viewer.

typescript
const iframe = document.querySelector('[data-viewer-iframe]') as HTMLIFrameElement;
iframe.contentWindow?.postMessage({
  type: 'saveAnnotations'
}, '*');
Canvas Emits

2. Viewer Emits Completion Event

The viewer emits `saveAnnotationsComplete` after the save flow finishes.

typescript
{
  type: 'saveAnnotationsComplete',
  payload: {
    success: true,
    requestId: 'save-001'
  }
}
Host Sends

3. Host Handles Completion

The host uses the completion event to show success or failure state and continue its workflow.

typescript
window.addEventListener('message', (event) => {
  if (event.data?.type !== 'saveAnnotationsComplete') return;

  const { success, requestId } = event.data.payload;
  console.log('saveAnnotationsComplete', { success, requestId });
});

Implementation

Manual Save

const iframe = document.querySelector('[data-viewer-iframe]');
iframe.contentWindow.postMessage({
  type: 'saveAnnotations'
}, '*');

Listen for saveAnnotationsComplete

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'saveAnnotationsComplete') return;

  const { success, requestId } = event.data.payload;
  console.log('saveAnnotationsComplete', { success, requestId });
});

Auto-Save

You can enable auto-save to have the viewer automatically trigger persistence events when measurements are modified. By default, this is set to `false`.

Toggle Auto-Save

const iframe = document.querySelector('[data-viewer-iframe]');
iframe.contentWindow.postMessage({
  type: 'setAutoSave',
  payload: { enabled: true }
}, '*');

Additional Resources

Continue with related measurement workflows and API references.