Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
GitHubNuGetDev CommunityOptimizely AcademySubmit a ticket

Optimizely developer documentation

How can we help you?

Try our conversational search powered by Generative AI!

AI OnAI Off

Global toolbar commands plugin

Describes how to add commands to the global toolbar.

You can create a command plugin for the global toolbar in the Optimizely Content Management System (CMS) user interface. To add commands to the global toolbar, add a Command Provider to the global command registry—the global command registry maps command providers against keys.

Create a command provider for the global toolbar

The following example shows how to create a provider that adds three commands to the areas inside the global toolbar.

//alloy/MyGlobalToolbarProvider define([ "dojo/_base/declare", "dijit/form/Button", "dijit/form/ToggleButton", "epi-cms/component/command/_GlobalToolbarCommandProvider", "alloy/TestCommand", "alloy/MyToggleCommand" ], function (declare, Button, ToggleButton, _GlobalToolbarCommandProvider, TestCommand, MyToggleCommand) { return declare([_GlobalToolbarCommandProvider], { constructor: function () { this.inherited(arguments); // The Global Toolbar has three areas that you can add commands to ["leading", "center", "trailing"] // the _GlobalToolbarCommandProvider extends the _CommandProviderMixin with helper methods for easy adding // of commands to the different areas //Create dijit/Form/Button in the leading area and bind the TestCommand to it this.addToLeading(new TestCommand({ label: "First command" }), { showLabel: true, widget: Button }); //Create dijit/Form/ToggleButton in the center area and bind the TestCommand to it this.addToCenter(new MyToggleCommand({ label: "Second command" }), { showLabel: true, widget: ToggleButton }); //Create dijit/Form/Button in the trailing area and bind the TestCommand to it this.addToTrailing(new TestCommand({ label: "Third command" }), { showLabel: true, widget: Button }); } }); } );

The following code shows the test commands:

//alloy/TestCommand.js define([ "dojo/_base/declare", "epi/shell/command/_Command" ], function(declare, _Command) { return declare([_Command], { name: "Test", label: "Test command", tooltip: "Click to execute me", iconClass: "dijitIconNewPage", //Define your own icon css class here. canExecute: true, _execute: function() { alert("label : " + this.label); } }); } ); //alloy/MyToggleCommand.js define([ "dojo/_base/declare", "epi/shell/command/ToggleCommand" ], function(declare, ToggleCommand) { return declare([ToggleCommand], { name: "Test", label: "Click here to toggle", tooltip: "Click to toggle me", iconClass: "dijitIconNewPage", //Define your own icon css class here. canExecute: true, _execute: function() { alert("Label : " + this.label); } }); } );

For the system to find your command provider, you must register it in the global command registry:

var commandregistry = dependency.resolve("epi.globalcommandregistry"); //The first parameter is the "area" that your provider should add commands to //For the global toolbar the area is "epi.cms.globalToolbar" //You need to register your custom global toolbar provider that we created before using that area commandregistry.registerProvider("epi.cms.globalToolbar", new MyGlobalToolbarProvider());

To initialize your command provider, see Add a module initializer. See the example of an initializer at episerver / alloy-mvc-template.

You can find a working example of the described components on Alloy MVC on GitHub.

Clone the repository, check out the branch doc/global-toolbar-provider and run the site. You will see the commands added in the global toolbar.


Did this page help you?