Sitecore from Rendering to Experience Editor

In Sitecore, how do you set up a template  and a rendering that works in the Experience editor? Here is the checklist:

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.

Template

Template

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:

Custom Experience Buttons

Custom Experience Buttons

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.

Sublayout

Sublayout

Select the custom experience button you created in STEP 2 in the “Experience Editor Buttons” field.

Sublayout

Sublayout

The field “Thumbnail” (found when selecting “Standard Fields”, under “Appearance”) is used for the 128×128 pixel image you created earlier.

Sublayout

Sublayout

Finally, use “Display Name” to give the rendering/sublayout a user friendly name. Remember to set a display name for all languages.

Sublayout

Sublayout

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.

Placeholder Settings

Placeholder Settings

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:

Select a Rendering

Select a Rendering

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.

Select the Associated Content

Select the Associated Content

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.

Editing fields

Editing fields

MORE TO READ:

Advertisements

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in General .NET, Sitecore 7, Sitecore 8, Sitecore 9 and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.