Best practices to implement Editable components in Experience Editor


In this post I am going to share some useful tips while creating static components in Sitecore what are the recommended configurations we need to do to make a component completely editable from Experience Editor.

This topic may be old but still I can see many of us doesn’t follow the ways to make a component editable from Experience Editor  and sometime after implementation we need to do many things which we haven’t think.

We all are already familiar with creating data templates and renderings (Controller and View Renderings). In this post will only learn some of the points which we need to follow while building a component in Sitecore which is Editable from Experience Editor.

Follow the below steps to make your components better –

Go to Rendering Item and –

 

  1. Update the Datasource Location field with the location where you want to create the datasource item.
  2. Update Datasource Template field with the Datasource template item so that when you are adding the Rendering on item either from Content Editor or Experience Editor it will automatically create item by added Datasource Template.
  3. Update Experience Editor Buttons if you need to insert the items or want more functionality from Experience Editor.
  4. Add the Thumbnail image in Appearance section field called Thumbnail. It will help you to get the understanding of component that what type of component it is by seeing the Image.

These are the few basic steps we can follow to make our component more easy for content editors.

These small steps you can simply follow in Sitecore but also we need to be more careful while adding code in .cshtml file.

We need to use the Code which make field Editable not just render the value. As in current version of Sitecore we are using

@Html.Sitecore().Field(Xcentium.Foundation.Items.Templates.Title.Fields.Title, item)

This will help to make content editable in Experience Editor also this is only for Text fields there are more HTML Helper extension for Link, Image and Date fields are available out of the box.

We also need to create Placeholder Settings under /sitecore/layout/Placeholder Settings location for our placeholders which we have added on layout as well as on container components.

To get more details about Power of Placeholder Settings read this post.

So after creating the placeholder setting update the Placeholder Key field by the key you added in .cshtml file for placeholder. This field value should exactly same what you have defined in your layout or container cshtml file.

Few points for placeholder settings –

  1. Editable checkbox should checked.
  2. Set the rendering which you want to add on this placeholder in Allowed Controls field. Advantage of this field is when you click on add button of placeholder it will show a list of components which we can add to this placeholder with the thumbnail image if  we have added the thumbnail image on rendering as I discussed in step 4 above.

It will restrict content editor to choose the component which actually we want to add on the specific placeholder.

These are the small set of steps we can follow and make our component more easy to add/update.

In my next post will share some examples of add Edit Frames to edit fields which we can’t directly edit from Experience Editor for example Multilist, Treelist, Checkbox etc. from Experience Editor.

 

Please share if I am missing anything or you have something to add here in comments below I’ll add your points to this post and we can make it more better for developers.

Happy Editing 🙂

 

This entry was posted in Sitecore, Sitecore Experience Editor, Uncategorized and tagged . Bookmark the permalink.

1 Response to Best practices to implement Editable components in Experience Editor

  1. Pingback: Edit Frame Implementation for Sitecore Experience Editor | Sitecore Tweaks

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