How to create a Sitecore ribbon button with a drop down menu?

Question

The Sitecore PageEditor and Preview interfaces have a language selection button that launches the drop-down menu or overlay menu, where the user can select a language. How to reproduce this behavior?

(I decided to answer this question and came up with a solution. Posting in SOF for comments / improvements.)

Answer 1

You can see how Sitecore does this in the Sitecore.Client , Sitecore.Shell.Applications.WebEdit.Commands.ChangeLanguage and Sitecore.Shell.Applications.WebEdit.Commands.SetLanguage assembly.

To do this, you need to create two own teams. One command is associated with a button, one is executed when a subitem is selected. The example is based on a scenario for changing a country's cookie.

ChangeCountry Team

Firstly, a command to display the menu. You can see that it displays a Menu with dynamic parameters. Overriding GetHeader and GetIcon allows the button itself to be dynamically based on the selection of the current user.

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sitecore.Shell.Applications.WebEdit.Commands; using Sitecore.Diagnostics; using Sitecore.Data.Items; using Sitecore.Web.UI.Sheer; using Sitecore.Web.UI.HtmlControls; using Sitecore.StringExtensions; using System.Web; namespace Prototype.Commands { public class ChangeCountry : WebEditCommand { protected Dictionary<string, CountryOption> _countries = new Dictionary<string, CountryOption> { {"US", new CountryOption { ID = "US", Name = "United States", Icon = "Flags/32x32/flag_usa.png" }}, {"CA", new CountryOption { ID = "CA", Name = "Canada", Icon = "Flags/32x32/flag_canada.png" }}, {"MX", new CountryOption { ID = "MX", Name = "Mexico", Icon = "Flags/32x32/flag_mexico.png" }}, {"DE", new CountryOption { ID = "DE", Name = "Germany", Icon = "Flags/32x32/flag_germany.png" }} }; public override void Execute(Sitecore.Shell.Framework.Commands.CommandContext context) { Assert.ArgumentNotNull(context, "context"); if (context.Items.Length == 1) { Item item = context.Items[0]; SheerResponse.DisableOutput(); Menu control = new Menu(); //replace with lookup and loop of available values foreach (var key in _countries.Keys) { var country = _countries[key]; string id = country.ID; string header = country.Name; string icon = country.Icon; string click = "prototype:setcountry(country={0})".FormatWith(key); control.Add(id, header, icon, string.Empty, click, false, string.Empty, MenuItemType.Normal); } SheerResponse.EnableOutput(); SheerResponse.ShowPopup("ChangeCountryButton", "below", control); } } public override string GetHeader(Sitecore.Shell.Framework.Commands.CommandContext context, string header) { HttpCookie country = HttpContext.Current.Request.Cookies["country"]; if (country != null && _countries.ContainsKey(country.Value)) { return _countries[country.Value].Name; } return base.GetHeader(context, header); } public override string GetIcon(Sitecore.Shell.Framework.Commands.CommandContext context, string icon) { HttpCookie country = HttpContext.Current.Request.Cookies["country"]; if (country != null && _countries.ContainsKey(country.Value)) { return _countries[country.Value].Icon; } return base.GetIcon(context, icon); } protected class CountryOption { public string ID { get; set; } public string Name { get; set; } public string Icon { get; set; } } } } 

In any Commands.config or include file, register a new command.

 <command name="prototype:changecountry" type="Prototype.Commands.ChangeCountry,Prototype" /> 

Change Country Button

Create a new Chunk and Button in /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Experience . This ribbon strip is referenced / replicated in preview mode. The button will use the following properties:

The Click field must match the name of your command, and the ID field must match the identifier of the element specified in the SheerResponse.ShowPopup call above.

SetCountry Command

The next command to be called when an item is selected in your menu / drop-down menu.

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sitecore.Shell.Applications.WebEdit.Commands; using System.Net; using Sitecore.Diagnostics; using Sitecore.Web.UI.Sheer; using System.Web; namespace Prototype.Commands { public class SetCountry : WebEditCommand { public override void Execute(Sitecore.Shell.Framework.Commands.CommandContext context) { Assert.ArgumentNotNull(context, "context"); var country = context.Parameters["country"]; Assert.IsNotNullOrEmpty(country, "Country not found"); HttpCookie cookie = new HttpCookie("country", country); HttpContext.Current.Response.Cookies.Add(cookie); WebEditCommand.Reload(WebEditCommand.GetUrl()); } } } 

In our example, we set a cookie based on the selected value and reload the page. The value passed inside is based on a click event associated with a menu item in ChangeCountry . Likewise, the configuration name of the command should match what was used in the click ChangeCountry event.

 <command name="prototype:setcountry" type="Prototype.Commands.SetCountry,Prototype" />