Add custom button to the template composer toolbar - Bloomreach Experience - Open Source CMS

Add custom button to the template composer toolbar

The toolbar in the template composer can be extended with custom buttons. Each custom button is rendered via toolbar plugin. A toolbar plugin can be placed anywhere in the toolbar: as the first or last item, before or after an existing item, or not at all.

The toolbar of the template composer has two modes: 'view' mode (when viewing a channel), and 'edit' mode (when editing a channel). A toolbar plugin can have a different position for both modes (or only be shown in one of the modes by using position 'hidden' for the other mode).


The following example adds a simple button the template composer toolbar with the text 'My Button':

First, add the following configuration:

+ hippo:configuration
  + hippo:frontend
    + cms
      + hippo-channel-manager
        + templatecomposer-my-button
          - jcr:primaryType = frontend:plugin
          - plugin.class = org.example.MyButton
          - position.edit = first
          - position.view = after template-composer-toolbar-pages-button

Second, add the following class to the cms module of your project:


package org.example;

import org.apache.wicket.Component;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
import org.hippoecm.frontend.plugin.IPluginContext;
import org.hippoecm.frontend.plugin.config.IPluginConfig;
import org.onehippo.cms7.channelmanager.templatecomposer.ToolbarPlugin;
import org.wicketstuff.js.ext.util.ExtClass;

public class MyButton extends ToolbarPlugin {
    private static final JavaScriptResourceReference MYBUTTON_JS
            = new JavaScriptResourceReference(MyButton.class, "MyButton.js");

    public MyButton(IPluginContext context, IPluginConfig config) {
        super(context, config);

    public void renderHead(final Component component, final IHeaderResponse response) {
        super.renderHead(component, response);

Third, add the following Javascript file to the resources of the cms module in the directory  org/example:



Example.MyButton = Ext.extend(Ext.Button, {
    constructor: function(config) {, Ext.apply(config, {
            text: 'My Button',
            handler: function() {
                alert('Toolbar mode: ' + config.toolbarMode);

Rebuild your project and restart the CMS. The toolbar should now show the 'My Button' button. In 'view' mode it should be placed after the 'Pages' button, and in 'edit' mode it should become the first button in the toolbar.


The following configuration properties can be specified for a toolbar plugin:

  • plugin.class The Java class name of the toolbar plugin.

  • position.edit The position string of this toolbar plugin when a channel is being edited. Default: last

  • position.view The position string of this toolbar plugin when a channel is being viewed. Default: last

Possible position strings


make this plugin the first item in the toolbar


make this plugin the last item in the toolbar

before <id>

place this plugin before the item with the given ID

after <id>

place this plugin after the item with the given ID


do not add this plugin to the toolbar

Existing toolbar item IDs

  • template-composer-toolbar-channel-properties-button
  • template-composer-toolbar-components-button
  • template-composer-toolbar-discard-button
  • template-composer-toolbar-edit-button
  • template-composer-toolbar-fullscreen-button
  • template-composer-toolbar-gear-menu
  • template-composer-toolbar-lock-label
  • template-composer-toolbar-manage-changes-button
  • template-composer-toolbar-save-and-close-button
  • template-composer-toolbar-page-settings-button
  • template-composer-toolbar-pages-button
  • template-composer-toolbar-publish-button
  • template-composer-toolbar-unlock-button
  • template-composer-toolbar-variants-combo
  • template-composer-toolbar-variants-label


The following properties are available in the 'config' object passed to the Javascript constructor of the toolbar plugin:

  • templateComposer (Ext.util.Observable)
    The template composer API object (see below)
  • toolbarMode (String)
    The current mode of the toolbar (either 'view' or 'edit')

The templateComposer object exposes the following functionality.


  • refreshIFrame()
    Refreshes the current page shown
  • channelChanged()
    Notifies the channel manager that the current channel has been changed. It will trigger the channel manager to reload the channel information and update the UI.


  • variantselected(variant: String)
    Fired when a new variant is selected.
    - variant (String): the selected variant
  • containeritemselected (containerItemId: String, containerDisabled: boolean) 
    Fired when a container item is selected in the preview site of the channel manager.
    - containerItemId (String): the id of the selected container item
    - containerDisabled (boolean): true if the container that holds this container item is disabled, false otherwise
  • channelChanged:
    Fired when the channelChanged function is called.


Why is my custom toolbar item not visible?

  • You may have set the configuration parameters position.edit and/or position.view to 'hidden'.

  • You may have used a position string 'before <id>' or 'after <id>' with an ID that does not exist. In this case, a warning should be logged in the Javascript console of your browser.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?