Add a Custom Experience Editor Edit Field Command

Today I’m going to describe some basic functionality involving the experience editor and over the next few weeks I will expand on this further and further.  Most the Sitecore developers I meet, don’t really have much working knowledge of developing for the experienced editor (formally known as the page editor before Sitecore 8).  This article will cover one topic, how to edit fields when those fields don’t display as text or images that you might use for example @Html.Sitecore().Field to render.  You can actually create custom experience editor buttons (or commands).  There is a specific command type called a “Field Editor Button”.

You can add these for any rendering that you have in Sitecore (keep in mind this article mostly references Sitecore with MVC).  So for example, lets say you have a rendering, and it has a background image.  Now you could come up with another way to make the background image editable, such as using @Html.Sitecore.Field(“ImageName”) when the page editor is active, but you actually could also define a Field Editor Button that allows the user to edit this background image.  Assuming that’s what we want to create, that is what the step by step instructions below will demonstrate.

So to access and create/modify existing Field Editor Button commands, you will need to make sure you are in the Core Db.  This is where all the CMS based artifacts live.

ChangeDatabaseSitecore

  1. Access the Core Db.  To do so, access the Desktop (by going to the launchpad and clicking on the “Desktop” tile.  This also assumes you have administrator priviledges to the CMS.
  2. You can access the core, once you are on the desktop there is a small icon in the bottom right area next to the time and next to the search bar.  Click the icon and it will give you the options of different databases.  Click on Core.
  3. Once you are in the core database, you should go to the start menu, and click on Content Editor.
  4. The buttons (commands) that you’ll be modifying sit under this part of the tree: /sitecore/content/Applications/WebEdit/Custom Experience Buttons
  5. To create a new field editor button, just right click on the “Custom Experience Buttons” folder, and select insert “insert from template”.  Unfortunately Sitecore doesn’t make it easy by providing insert options, but you can go to templates/system/WebEdit and then selecting the “Field Editor Button”.

Once you have done that, you will be presented with fields to update.  The four most common ones you will need to update are:

  • Header – Displayed when you see the button in the experience editor options for the rendering.
  • Icon – Is the icon displayed in the experience editor options.
  • Fields – The specific fields you want to allow this command to show in the dialog.  So for our example, we would specify “Image”.  Keep in mind you can specify more than one Field, just separate the list with pipes (“|”).
  • Tool-tip – Useful to provide the user with a little more details about what the button will do, when the click it.

Once you’ve made those changes, save the item.  You have created your first field editor command, you are now ready to assign this command/button to the rendering that you want this button to display when they have that rendering open in the experience editor.  Keep in mind that there are other types of commands you can assign in exactly the same way as the above process, such as commands that run custom dialogs to perform custom functionality.

  1. Now switch back to the Master Db, using the process I described when switch to the Core Database.
  2. Go to the Content Editor, and find the rendering that you want to associate this field editor button to.
  3. Click on the Rendering and Scroll down and find the field labeled “Experience Editor Buttons”.
  4. You should see your custom field editor button in the list.  Assign it to this rendering by moving it to the right.

That’s it, nothing really fancy about that.  Now when you access the experience editor for a page that has this rendering on it, when you click the rendering in the experience editor, you should see this custom field editor command.  When you click it, it will show a popup dialog with the fields you specified with the right controls based on the type of the fields you specified.

  • Thanks for sharing Dylan!

    Just a quick recommendation: you might want to include screenshots of the changes you made in the Core and Master databases — this will make it easier to follow along with the steps enumerated above.

    Cheers,

    Mike Reynolds

    • Dylan Young

      Hi Mike,

      Great advice, I plan to start adding images to all my blog posts today! I appreciate any feedback you can provide.

      Dylan