Experience editor gives WYSIWYG (What you see is what you get) experience to content authors in Sitecore. Most of the fields defined in templates for components are directly editable in the experience editor mode including images, text, links and many others (Thanks to the Sitecore field renderers implemented in the view!)
However, there are scenarios in which some of your fields won’t be easily editable on the page in the experience editor. For example, if you want to provide spacing or width options in a component to content author, they are not directly editable within experience editor like the images and text. Such fields are usually created using droplinks or check boxes. In such cases, it is desirable to create a custom button that will let you edit such fields. This custom button will be visible in experience editor when user clicks on the rendering. On clicking this custom button, a dialog containing the fields that we want to edit in experience editor will open up.
Steps to create a custom button -
- Switch to the Core database in the content editor.
- In the content tree, navigate to Content>Applications>WebEdit>Custom Experience Buttons.
- Go ahead and make a folder here with a relevant name. In my example, I will call it Image with Content which is also my rendering name.
- Right-click this folder and add a new item using Field Editor Button template. In the “Insert from Template” window, navigate to System>WebEdit>Field Editor Button, and name it after the fields you want to be able to edit in the experience editor. In my example, I’m going to call it “Toggle Settings” because it’s going to let the user change component settings. Click okay.
Adding the fields to be edited on button click
The important part of the custom button created in steps above is the information about the fields it is going to update in the dialog that it will open. To specify which fields this button will allow you to edit, add the field IDs in the field separated by pipes (“|”) as in snapshot below. Also, for the sake of usability, we want to assign this button an icon. We’ll do this in a couple places. There’s an Icon field under the “Data” section, and another under the “Appearance” section. Use the same icon image for both, so it’ll show up in the Experience Editor and in the content tree.
After creating a Custom Experience Button, you simply need to save and add it to your rendering of choice. Navigate to your rendering. In the Editor Options, scroll down to “Experience Editor Buttons.” The button you just created will be there. Select it to show it in the experience editor when user clicks on a component on the page.
 |
I hope this post is helpful in making your components Experience Editor-friendly for your users. This also briefly explains how Sitecore is managing the buttons we see when we click on a component in Experience Editor.
Please like and subscribe for similar posts. Thankyou :)