CESDK/CE.SDK/Web Editor/Customization/Guides

Creating A Custom Panel

Learn how to create and open a custom panel in the CE.SDK editor

For some complex workflows, simply adding or moving buttons may not be enough. You’ll need a way for users to interact with the panel’s content to input or process information.

The CE.SDK editor allows you to add fully custom panels, and in this guide, we will cover the basics. Please, also take a look at the Custom Panel API reference for more information.

Registering a Custom Panel#

The entry point for writing a custom panel is the method registerPanel. For a given panel identifier, you add a function that will be called repeatedly to render the content of the panel. Several arguments are passed to this function that can be used to access the current state of the engine and render an UI with the help of the builder.

JavaScript


cesdk.ui.registerPanel('myCustomPanel', ({ builder, engine }) => {
  // Once `findAllSelected` changes, the panel will be re-rendered
  // with the correct number of selected blocks
  const selectedIds = engine.block.findAllSelected();

  // Create a new section with a title
  builder.Section('selected', {
    title: `Selected Elements: ${selectedIds.length}`,
    children: () => {
      // For every selected block, ...
      selectedIds.forEach((selectedId) => {
        // ... create a button ...
        builder.Button(`select.${selectedId}`, {
          label: `Deselect ${selectedId}`,
          onClick: () => {
            // ... that deselects the block when clicked
            engine.block.setSelected(selectedId, false);
          }
        });
      });
    }
  });
});

Once a panel is registered, it can be controlled using the Panel API, just like any other panel. For instance, you can open a custom panel with cesdk.ui.openPanel(registeredPanelId). Other settings, such as position and floating, can also be adjusted accordingly.

In most cases, you will want to open it using a custom button, .e.g in a button inside the Dock or Inspector Bar.

JavaScript


cesdk.ui.registerComponent('myCustomPanel.dock', ({ builder }) => {
  const isPanelOpen = cesdk.ui.isPanelOpen('myCustomPanel');

  builder.Button('open-my-custom-panel', {
    label: 'My Custom Panel',
    onClick: () => {
      if (isPanelOpen) {
        cesdk.ui.closePanel('myCustomPanel');
      } else {
        cesdk.ui.openPanel('myCustomPanel');
      }
    }
  });
});

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