
Adding a custom command to item context menu
The context menu is designed to increase the efficiency of content authors. The requirements may vary for content authors across different organizations.
In this recipe, we will create a menu item in the context menu of a Sitecore item that will display the number of children that the selected item contains. In the same way, you will be able to create a command button for the Content Editor and Experience Editor ribbons as well.
How to do it…
We will first create a Command
class:
- In the
SitecoreCookbook
project, create aGetChildCount
class in theCommands
folder. Inherit the class fromSitecore.Shell.Framework.Commands.Command
. - Override the
Execute()
method of theCommand
class to apply a command action as follows:public override void Execute(CommandContext context) { if (context.Items.Length == 1) { Item currentItem = context.Items[0]; SheerResponse.Alert(string.Format("Children count: {0}", currentItem.Children.Count)); } }
- Override the
QueryState()
method of theCommand
class to show or hide the button, which means changing the state of the command based on its children count. Here, when an item does not have any children, we hide the command:public override CommandState QueryState(CommandContext context) { if (context.Items.Length == 1) { Item currentItem = context.Items[0]; if (currentItem.Children.Count == 0) return CommandState.Hidden; } return base.QueryState(context); }
- Open the
\App_Config\Commands.config
file, and add the following command above the</configuration>
node with the fully qualified name of the class created in step 1:<command name="item:getchildcount" type="SitecoreCookbook.Commands.GetChildCount, SitecoreCookbook" />
- Open the Sitecore desktop mode and switch the database to
core
. Open the Content Editor and select the/sitecore/Content/Applications/Content Editor/Context Menus/Default
item. Create a new item,Child Count
, in it using the/sitecore/templates/System/Menus/Menu item
template. - Enter field values in the item, as shown in the following image. Here,
item:getchildcount
is the command that we created in theCommands.config
file in step 4: - Now, right-click on any item in the content tree of the Content Editor; you will get a new menu item Count Children in the context menu, as shown on the left-hand side of the following image. Clicking on it will show an alert box displaying the number of children that it contains:
How it works…
The following image shows you how Sitecore renders the menu item in HTML. When the menu item is clicked, the scForm.postEvent()
JavaScript method is called with parameters of the current event and an item:getchildcount(id=$Target)
message, which passes these parameters to the Sitecore command engine:

When Sitecore receives the message from the browser, it first interprets it and extracts the command name (item:getchildcount
) and parameters (id={$Target}
). Then, based on the commands from Commands.config
, it invokes the Execute()
method of the respective class where we can write our custom logic.
Here, if you see step 2, the Execute()
method of Command
contains a parameter of the CommandContext
type, where we can get parameters passed from. We can also get multiple parameters passed from the command using context.Parameters["Parameter Name"];
.
In step 3, we overrode the QueryState()
method, which returns CommandState
to the ribbon or context menu. CommandState
is the state of the menu item, which we can set as CommandState.Hidden
, CommandState.Enabled
, or CommandState.Disabled
to hide, enable, or disable the menu item accordingly.
There's more…
We can add a custom tab (ribbon), group (Strip), or button (Chunk) to the Content Editor ribbon under the /sitecore/Content/Applications/Content Editor/Ribbons
item of the core
database. The button on the ribbon will look like the following image:

To create a custom button (Chunk) on the Content Editor ribbon, create an item named Count Children
in /sitecore/Content/Applications/Content Editor/Ribbons/Chunks/Operations
with the /System/Ribbon/Small Button
item template and fill in fields as follows:

In the same way, you can find all the buttons of the Experience Editor ribbon under the /sitecore/Content/Applications/WebEdit/Ribbons/WebEdit
item. You can add different types of buttons to the ribbon. You can find more details about this at https://goo.gl/4nNSQu.
See also
Sitecore provides two frameworks—Sheer UI and SPEAK—to manage user interfaces. Here, we used the Sheer UI to show an alert message. We could also use SPEAK to show an alert or open a modal dialog, which you can learn from http://goo.gl/8rFKr5.