Skip to main content
CESDK/CE.SDK/Web Editor/Customization/Guides

Adding New Buttons

Learn how to add new buttons to different location of the web editor

Customization not only includes changing the existing behavior but also extends to adding new features tailored to your needs. This guide will show you how to add new buttons to different locations within the web editor.

Adding a Document Button to the Dock#

In our default configuration of the web editor, we only show dock buttons that open asset libraries. In this example, we want to extend that functionality by adding a button that opens the document inspector.

In the default view of the web editor, the inspector panel is not always visible. Additionally, the document inspector only appears if no block is selected. If your use case requires a simple user interface with just the inspector bar and an easy way for the customer to access the document inspector, we can now add a custom button to achieve this.

First, we need to register a new component. This component will check if the document inspector is already open. To open it, we will deselect all blocks and use the Panel API to open the inspector panel.

cesdk.ui.registerComponent(
  'document.dock',
  ({ builder: { Button }, engine }) => {
    const inspectorOpen = cesdk.ui.isPanelOpen('//ly.img.panel/inspector');


    Button('open-document', {
      label: 'Document',
      // Using the open state to mark the button as selected
      isSelected: inspectorOpen,
      onClick: () => {
        // Deselect all blocks to enable the document inspector
        engine.block.findAllSelected().forEach((blockId) => {
          engine.block.setSelected(blockId, false);
        });


        if (inspectorOpen) {
          cesdk.ui.closePanel('//ly.img.panel/inspector');
        } else {
          cesdk.ui.openPanel('//ly.img.panel/inspector');
        }
      }
    });
  }
);

That is all for the component for now. What is left to do is to add this component to the dock order.

cesdk.ui.setDockOrder([
  ...cesdk.ui.getDockOrder(),
  // We add a spacer to push the document inspector button to the bottom
  'ly.img.spacer',
  // The id of the component we registered earlier
  'document.dock'
]);

Add a Button to the Canvas Menu to Mark Blocks#

In our next example, we aim to establish a workflow where a designer can review a design and mark blocks that need to be reviewed by another designer. We will define a field in the metadata for this purpose and add a button to the canvas menu that toggles this marker.

Once again, we start by registering a new component.

cesdk.ui.registerComponent(
  'marker.canvasMenu',
  ({ builder: { Button }, engine }) => {
    const selectedBlockIds = engine.block.findAllSelected();
    // Only show the button if exactly one block is selected
    if (selectedBlockIds.length !== 1) return;


    const selectedBlockId = selectedBlockIds[0];


    // Check if the block is already marked
    const isMarked = engine.block.hasMetadata(selectedBlockId, 'marker');


    Button('marker-button', {
      label: isMarked ? 'Unmark' : 'Mark',
      // Change the color if the block is marked to indicate the state
      color: isMarked ? 'accent' : undefined,
      onClick: () => {
        if (isMarked) {
          engine.block.removeMetadata(selectedBlockId, 'marker');
        } else {
          // Metadata is a simple key-value store. We do not care about the
          // actual value but only if it was set.
          engine.block.setMetadata(selectedBlockId, 'marker', 'marked');
        }
      }
    });
  }
);

Now, instead of appending this button, we want to put it at the beginning as this needs to be a prominent feature.

cesdk.ui.setCanvasMenuOrder([
  'marker.canvasMenu',
  ...cesdk.ui.getCanvasMenuOrder()
]);