Enhancing the Page Editor Experience with Custom Experience Buttons

Page Editor is an extremely efficient way to edit content within Sitecore.  Developing your site to including editing using this interface is also straight forward.  For instance you simply user Sitecore Field Renderers to display the text data types, and Sitecore takes care of the rest.  These however only work for the text based data types, so tree lists, checkbox lists, and the other non-text fields cannot be edited this way.

Never fear, there is still an easy no coding approach to enable these fields to be edited.  The solution is to use a Field Editor Button.  This button is created in the core database in a special section of the tree (/sitecore/content/Applications/WebEdit/Custom Experience Buttons).  You specify the header, the icon to show in the floating toolbar, and a pipe delimited list of fields that should be editable.  In this example, I am only specifying a single field.


With the button created, we can now edit our rendering to show this button in its floating toolbar.  This is controlled by the Page Editor Buttons field on each rendering.


With this configured, we will see the Quick Links button everywhere that this rending is used.  It is always shown in the floating toolbar like this:


Clicking the button opens a new window with a field editor similar to Content Editor.  In this case, it looks like this:


  • Chris, great post.  This is an awesome feature of the Page Editor.  Its particularly valuable for editing of fields which may not be visible due to an author's choice of renderings or the particular page presentation.  Its a great way to close the gap between what is shown in a specific context in Page Editor and the total compound content item available in Content Editor.

  • Great example, I have tried to play around with this feature but am having troubles with caching of the property editor (eg. two modules both having a droplink field named "reference")? Here the droplink contains same values for both templates although a different query exists in the droplink datasource on each template: TypeATemplate: reference field query: /sitecore/content/settings/References/TypeA TypeBTemplate: reference field query: /sitecore/content/settings/References/TypeB  When I hit the "Reference" button in the page editor I get the same data sources in the ddl link for both template types :/

  • Hi William. I gave this a quick test and this appears to occur if the two fields with identical field names are rendered on the same page in the experience editor. Having two fields with the same name is not recommended even if they are used to render different parts of the page, so I would go ahead and change one the field names on the template for one of the modules if you can. I did seem to get the correct drop down values if the 2 fields (with identical names) were not used on the same page. Let me know if you have any follow up questions.