In Sitecore it is very easy to toss in a few renderings on a page, set the renderings flag to “editable”, and voila, the page is editable using the Sitecore Experience Editor.
But that kind of laziness often ends up being a pain for the people using the Experience Editor. Just image that it is you who gets this screen when selecting a rendering:
Select a Rendering – hmm what to choose?
Wouldn’t you prefer a screen like this:
Select a rendering – with images and translated text
Stuff like this takes more time that knowledge to do. So here is a quick guide on how to set up Sitecore so your renderings are presented properly in the experience editor.
SETTING UP YOUR RENDERING OR SUBLAYOUT
I still use sublayouts, the webform (.ascx) based renderings, but the techniques are the same for MVC based renderings. I will use the term “rendering” to cover both technologies.
THE DISPLAY TITLE
First of all, you need to set a display title for your renderings, as this is what Sitecore displays below the image. Remember that the language used for the display title is not the language you are editing, but the language in which Sitecore is running – exactly the opposite of what the Sitecore Shell does.
All renderings with a display title, here in Danish
THE DATASOURCE LOCATION AND DATASOURCE TEMPLATE
In my project I save all data sources in a hidden folder below my item. This means that they are not shareable between items. A small trade off for a better overview of which components are placed on the page (this is only half the truth – some renderings are in fact shared but for the most part they are not. You should carefully decide what content is shareable and what is not). Setting up the data source location is done using a Sitecore query pointing to the folder below the current item:
Datasource Location and Template
When the user is seeing the “Select the Associated Content” window, only the components on the page is displayed. Also note that I have given each of my templates their own icon. This helps also.
Select the Associated Content window
THE IMAGE
The field for the image shown in the “Select a Rendering” window is hidden in the appearance section of Sitecore, so you must enable the “Standard Fields” to find it. It is the field called “Thumbnail“.
Now, I know that the field have a “Take screenshot” function, the thumbnail is only 128×128 pixels, making a screenshot very small. I always make a stylized image, upload it to the media library in my own “System” folder and use that instead.
Thumbnail
When moving the rendering to production you must remember to include the image in your package.
SETTING UP YOUR TEMPLATE
The template needs to be user friendly too. Here is what you can do:
THE ICON
Sitecore contains 16.000+ icons, and yes, none of these match your needs. However, spend a few minutes to see if you can find an icon that matches as close as possible. The icon is presented in the “Select the Associated Content” window so although it is not the most important part of your user experience, it is cheap to implement.
Templates with icons
THE FIELD TITLE
Remember to set a title for your field. My field names are namespaced and rather technical. The user should not be aware of my strange naming. Use the field “Title” and again, remember that it is the language of the Sitecore instance that is displayed, not the language of your content – the exact opposite of what the Sitecore Shell does.
Editing the title – here with a translated text for the field
SUMMARY
Setting up the renderings for the experience editor requires more time than knowledge. Be lazy and the end user will have you. Be thorough and your end user will love you.
