Simple Dojo example: add button to toolbar

Fredrik Stolpe

Vote:

Hello

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

Fredrik

#143536

Jan 26, 2016 13:32

Mattias Olsson

Vote:

Hi!

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?

#143574

Jan 27, 2016 9:05

Fredrik Stolpe

Vote:

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.

Cheers

Fredrik

#143584

Jan 27, 2016 9:43

Grzegorz Wiecheć

Vote:

Hi,

A wile ago I prepared a Favourite Content feature where I used a button https://gregwiechec.com/2016/01/editor-favourite-contents/

The full source code is available on Gist - https://gist.github.com/gregwiechec/38188931a443bf913eea

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.

define([
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/when",

        "epi/shell/command/_Command",
        "epi/dependency",
        "epi-cms/_ContentContextMixin"
    ],
    function(
        declare,
        lang,
        when,

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

            _execute: function() {
				alert(1);
            }

        });
    });

Another example of command is here - https://gregwiechec.com/2015/06/displaying-related-content-in-edit-mode/

There is an action added under publish menu.

#143602

Jan 27, 2016 14:18

Fredrik Stolpe

Vote:

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; http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=114951

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

But maybe your examples works like a charm :-)

Regards
Fredrik

#143604

Jan 27, 2016 14:42