Simple Dojo example: add button to toolbar



So, I've spent some time going trough some examples using Dojo to add a button to the toolbar (above the page edit area).

I have to say I'm totally lost. All the examples look a bit different, and then I stumble on Dojo error messages and I end up in long forum posts where suddenly most lines of Dojo code is totally different than the examples and documentation.

You really need to clear this out; can someone point me to a complete example of how to do something like this?

For example, say a button in the toolbar above the page edit area, that is visible for a certain page type, and when you press it, the page name is alerted.

Thanks a bunch


Jan 26, 2016 13:32


Exactly which toolbar are you talking about? Do you mean the top toolbar with the publish changes menu? And do you mean a stand-alone button next to the "Options" dropdown?

Jan 27, 2016 9:05

For example next to "toggle preview mode" and "compare different versions" buttons.

But really, the exact placement is not that important, I guess by any working example it would be possible to figure out how to make the button appear in any other place where it is possible to place a button.



Jan 27, 2016 9:43


A wile ago I prepared a Favourite Content feature where I used a button

The full source code is available on Gist -

You need to create the Command Initializer where you register your commands via Command provider (commandsInitializer.js)

var commandregistry = dependency.resolve("epi.globalcommandregistry");
            var area = "epi.cms.globalToolbar";
            commandregistry.registerProvider(area, commandsProvider);

In Commands Provider you define the Command (button) and specify where it should be added - could be addToLeading addToTrailing or addtoCenter (I used addToLeading - commandsProvider.js). You also define type of widget - I used ToggleButton.

The you need to define command (addToFavouriteCommand.js)

My command looks complex because it used Content Context, but most important is _execute method where you run your custom action. canExecute property defines if command can be executed.



    ) {
        return declare([_Command, _ContentContextMixin], {
            name: "ContentReferences",
            label: "Favourite content",
            tooltip: "Favourite content",
            iconClass: 'epi-icon--medium epi-iconStar',
			canExecute: true,

            _execute: function() {


Another example of command is here -

There is an action added under publish menu.

Jan 27, 2016 14:18

Thanks Grzegorz, I'll check ut out later.

Although, when trying some similar examples before I stumbled on an error in the console saying that "epi.globalcommandregistry" couldn't be resolved, and after that I ended up in this thread;

That's when I decided to write a question here.

But maybe your examples works like a charm :-)


Jan 27, 2016 14:42