STEP 1: CREATE A TEMPLATE
Create the template. For each field, use the “Title” field for all of your languages to display a user friendly name.
STEP 2: CREATE CUSTOM EXPERIENCE BUTTONS
In the CORE database, add a Field Editor Button to the /sitecore/content/Applications/WebEdit/Custom Experience Buttons folder.
Add the fields that are not editable directly from the Experience Editor (or add all fields from your template, it is OK that a field can be edited directly and from a custom button). Use the “Fields” field to add a pipe separated list of field names:
STEP 3: CREATE AN 128×128 PIXEL IMAGE OF YOUR CONTROL
Sitecore have a “take screenshot” feature, but a stylized image of your control is often better. Create a 128×128 pixel image (.png or .jpg) and upload it to the media library. The image must depict or represent the component you are about to create.
STEP 4: CREATE A RENDERING OR SUBLAYOUT
MVC project creates renderings, older ASPX project creates sublayouts.
Mark the rendering/sublayout as “Editable”.
Point the “Datasource Location” to where the datasource item should be placed. Use query: to select a dynamic location.
Select the template you created in STEP 1 in the “Datasource Template” field.
Select the custom experience button you created in STEP 2 in the “Experience Editor Buttons” field.
The field “Thumbnail” (found when selecting “Standard Fields”, under “Appearance”) is used for the 128×128 pixel image you created earlier.
Finally, use “Display Name” to give the rendering/sublayout a user friendly name. Remember to set a display name for all languages.
STEP 5: SETUP PLACEHOLDER SETTINGS
Add the rendering/sublayout from STEP 4 to the placeholder settings of the placeholders where you are allowed to add this component.
THE END RESULT:
The Placeholder Settings allows you to see the rendering/sublayout. The Thumbnail gives your control a nice presentation, and the Display Name of the rendering gives your control a user friendly name:
The rendering/sublayout Datasource Location groups the places where the datasource can be created. The Datasource Template locks the sublayout/rendering to one specific template, making it impossible for the editor to select the wrong template.
The Custom Experience Editor Button creates a easy access to edit the content of the rendering/sublayout. And the Title field for the template fields displays a user friendly name.
MORE TO READ:
- Edit a field in the Experience Editor from Sitecore
- Understanding templates in Sitecore from Nonlinear Digital
- Custom Experience Editor Buttons from Sitecore Endeavor
- Thumbnails and Sitecore’s Page Editor – Part 1 (The Hard Way) by Kevin Williams
- The Power of Placeholder Settings by Chris Castle