Custom Experience Buttons - Enhancing the Page Editor

Adding Custom Experience Buttons

Have you ever wondered how to edit your List Type field from the Page Editor whit out opening the content editor? Preparing Sitecore to enabling you to do that is actually straight forward.

Adding a Custom Experience button to the Page Editor takes the following two steps:

• Create a new Custom Experience button item in the Core database
• Assigning the Custom Experience button to the sublayout where the Custom Experience button should be displayed

Creating the new Custom Experience Button

First you have to create the new Custom Experience Button (CEB) item which should be displayed in the Page Editor. Open the content editor in the core database and navigate to “/sitecore/content/Applications/WebEdit/Custom Experience Buttons”. When you create the new CEB item from the “Custom Experience Buttons” item folder, you can choose among a couple of “
Edit” buttons. Select the “Field Editor Button.

The CEB item contains four fields in the “Data” field section. The “Header” field defines the header of the CEB. The “Icon” field defines the icon displayed in the Page Editor, where the CEB is assigned. In the “Fields – pipe …” field you define the list of field names you should be able to edit from the specific Custom Experience Button. The value in the last field, the “Tooltip” field, will be displayed when you hover the mouse over the button in the Page Editor.

Assigning the Custom Experience Button

After creating the CEB item and filled in the fields at the item, you go back to the Content Editor for the Master database and assigning the new CEB to the sublayouts from where the CEB should be accessed. In the “Editor Options” field section find the “Page Editor Buttons” multilist and select your CEB item.

Validate the Custom Editor Button 

Open your Page Editor and navigate to a page where the sublayout is used and you will find your new Custom Editor Button.

Selecting the button and you will get a dialog box containing your fields added at on the fields added at your Custom Editor Button in the Core database.