Adding Custom Dropdown Button in #Sitecore 9 to Content Editor Ribbon

I published a blog recently for creating a dropdown in the Rich Text Editor (RTE). You can find that here. I needed to do something similar for the content editor, so the same functionality could be done in text fields by saving the value in the clipboard.

In this case I will be adding a Token button to the Ribbon in the content editor. This button will contain a drop down.

In the Core database in the content editor you can add a button using the following path. I added the Tokens directory which is a Chunk item.

/sitecore/content/Applications/Content Editor/Ribbons/Chunks/Tokens/

Underneath the chunk I created a Large Gallery Button item. This type of item contains a drop down as seen above.


In my Visual Studio project, I added two files. The structure is below. This structure should match the structure in your site.

Gallery Tokens.xml contains the following code. The highlighted area is important as that tells Sitecore where to find the CSS code for the button and the code behind.

In the CodeBeside in the xml code it points the following extension. This extension will get the list of items in Sitecore and build a drop down list.

  1. public class CopyTokenMenu: GalleryForm {  
  2.     protected Menu Options = new Menu();  
  3.     static readonly Sitecore.Data.Database master = Sitecore.Configuration.Factory.GetDatabase(“master”);  
  4.     readonly Item _parentTokenFolder = master.GetItem(“/sitecore/content/CustomerPortal/Site Settings/Tokens”);  
  5.     public override void HandleMessage(Message message) {  
  6.         Assert.ArgumentNotNull((object) message, nameof(message));  
  7.         if (message.Name != “item:load”) {  
  8.             base.HandleMessage(message);  
  9.         } else {  
  10.             Invoke(message, true);  
  11.         }  
  12.     }  
  13.     protected override void OnLoad(EventArgs e) {  
  14.         if (_parentTokenFolder == null || !_parentTokenFolder.HasChildren) {  
  15.             return;  
  16.         }  
  17.         Assert.ArgumentNotNull((object) e, nameof(e));  
  18.         base.OnLoad(e);  
  19.         if (Context.ClientPage.IsEvent) {  
  20.             return;  
  21.         }  
  22.         Options.Controls.Add(new LiteralControl(

    Copy token to place within your text:

    ));  

  23.         foreach(Item token in _parentTokenFolder.Children) {  
  24.             Options.Controls.Add(new LiteralControl(“<p><button class=button title=’copy’ id=\”” + token.Fields[“TokenValue”].Value + “\” onclick=copytext(‘” + token.Fields[“TokenValue”].Value + “‘)><img src=\”/temp/iconcache/office/16×16/documents_empty.png\”></button>&nbsp;” + token.Fields[“TokenValue”].Value + ” – “ + token.Fields[“Description”].Value + “</p>”));  
  25.         }  
  26.     }  
  27.     private static Item GetCurrentItem() {  
  28.         string queryString1 = WebUtil.GetQueryString(“db”);  
  29.         string queryString2 = WebUtil.GetQueryString(“id”);  
  30.         var index1 = Language.Parse(WebUtil.GetQueryString(“la”));  
  31.         var index2 = Sitecore.Data.Version.Parse(WebUtil.GetQueryString(“vs”));  
  32.         Database database = Factory.GetDatabase(queryString1);  
  33.         Assert.IsNotNull((object) database, queryString1);  
  34.         return database.Items[queryString2, index1, index2];  
  35.     }  
  36. }  

    This is the token item created that will be read in for the button drop down.


    This is the style sheet code that is referred to in the xml file.


    In the Home Ribbon in the Content Editor the Token button now appears. Clicking it will bring down a drop-down list. Clicking on the icon will copy the value to the clipboard.

    That is, it. I hope this helps some of you. I enjoyed doing this and wanted to make sure it was documented as it could be difficult at first to figure out all the pieces.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s