Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCADAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Message API/docs/components/cad/blocks

Blocks

Request block snapshots and update CAD block visibility from the host.

Overview

Block workflows expose repeated CAD entities that can be filtered independently from layers.

Use blocks when your product needs a host-side panel for named symbols, reusable CAD objects, or selective visibility controls based on block naming.

  • Request current block state with `getBlocks`.
  • Listen for `blocksSnapshot` and render the returned collection.
  • Send `setBlockVisibility` using `all`, `index`, `indexes`, `name`, or `names`.

Quick Examples

The block flow mirrors the layer flow, but the payload targets block names and indexes.

Request blocks

parent.postMessage({
  type: 'getBlocks',
  payload: { requestId: 'blocks-1' }
}, '*');

Listen for blocksSnapshot

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

  const payload = event.data.payload;
  renderBlockPanel(payload.blocks);
});

Hide multiple blocks

parent.postMessage({
  type: 'setBlockVisibility',
  payload: {
    requestId: 'blocks-hide-1',
    indexes: [4, 7],
    visible: false
  }
}, '*');

Show all blocks

parent.postMessage({
  type: 'setBlockVisibility',
  payload: {
    requestId: 'blocks-show-all',
    all: true,
    visible: true
  }
}, '*');

Control flow

The host requests the current block collection, renders it in its own UI, and sends visibility updates back into the viewer.

Host Sends

1. Host requests blocks

Call `getBlocks` when the CAD block panel opens or the active file changes.

javascript
viewerWindow.postMessage({
  type: 'getBlocks',
  payload: { requestId: 'blocks-open' }
}, '*');
Canvas Emits

2. Viewer returns blocksSnapshot

The viewer responds with the current block list and visibility state for the active document.

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

  console.log(event.data.payload.blocks);
});
Host Sends

3. Host posts visibility updates

Use block names or indexes from the snapshot when toggling host-side controls.

javascript
viewerWindow.postMessage({
  type: 'setBlockVisibility',
  payload: { requestId: 'block-toggle', name: 'DOOR_TAG', visible: false }
}, '*');

Complete Implementation

This pattern gives you a standalone block panel without coupling it to layer rendering.

let blocks = [];

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

  blocks = data.payload.blocks;
  renderBlocks(blocks);
});

function loadBlocks() {
  viewerWindow.postMessage({
    type: 'getBlocks',
    payload: { requestId: 'blocks-init' }
  }, '*');
}

function toggleBlock(index, visible) {
  viewerWindow.postMessage({
    type: 'setBlockVisibility',
    payload: { requestId: 'block-' + index, index, visible }
  }, '*');
}
Complete Implementation

Additional Resources

Use the related pages below when you need the matching layer workflow or the full payload reference.