Join us this Friday for AI in Action at the Virtual Happy Hour! This free virtual event is open to all—enroll now on Academy and don’t miss out.
AI OnAI Off
Simple Dojo example: add button to toolbar
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?
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.
Cheers
Fredrik
Jan 27, 2016 9:43
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.
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; 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
Jan 27, 2016 14:42
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