Edit Frame Implementation for Sitecore Experience Editor


As I mentioned in my last post in this post we will learn how we can make field editable which are not editable from Experience Editor for example treelist, multilist, checkbox etc.

Sometime we make everything as per the recommended way in experience editor but some of the fields which we can’t edit directly from Experience editor as there is no specific view for them so Sitecore provided a nice way to handle this.

To handle these types of requirements we need to create EditFrames.  EditFrames in the Experience Editor is a feature that you can use to give users front-end access to fields that are not directly accessible, either because they are not visible or they are of a type that are not directly front-end editable.

To start with it first identify the field on components which you want to make editable and follow the below steps  –

  1. Go to Core Database and navigate to /sitecore/content/Applications/WebEdit/Edit Frame Buttons location.
  2. Create a Folder with /sitecore/templates/System/WebEdit/Edit Frame Button Folder  folder data template. (On the above given location this folder is already part of insert option)
  3. Add item with Field Editor Button data template from /sitecore/templates/System/WebEdit/Field Editor Button template location. (This is also part of insert option so you will get suggestion while adding the item.)
  4. This item has 4 fields as below –
    1. Header – It is just for to show the name
    2. Icon – If you want to add any icon to show on Experience Editor you can add here.
    3. Fields  – Pipe-separated list of field names to be edited by the Field Editor.
    4. Tooltip – If you want to add any.
  5. After making the updates in Core Db we need to make some updates in our code file (.cshtml) also as below –

We need to Surround the section to show the button with a using block as follows:

@using (Html.BeginEditFrame(Model.Item.ID.Guid.ToString(), “Xcentium/Link CTA”)) { // HTML here }
Now once you are running this into Experience Editor it will show you a toolbar appearing on Editor as below –
ee_1

Clicking on the icon will open a modal window with all the fields which we defined in Fields field in step 3rd as below –

ee_2
So the use of this functionality is content editor don’t need to go to Content Editor area or Item directly to update the field which is not editable from Experience editor but they can edit field from Experience editor it self and it makes them easy to understand that these fields are also in use for the component.

 

I found it useful when your content editor’s are not much trained in Sitecore Content Editor area but more familiar with Experience editor.

 

Stay tuned for new post ……

 

This entry was posted in Sitecore, Sitecore Experience Editor, Uncategorized 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