all things Sitecore related

Creating a Item Editor

By on August 19, 2009 in Sitecore with 7 Comments

For a blog module that I am developing I wanted to create an custom item editor. As you might know those are the “tabs” in the Content Editor.

1. Create a aspx file for the item editor user interface.
2. Select the core database in the desktop mode
3. Open the Content Editor and go to the following path /Sitecore/Content/Applications/Content Editor/Editors/Items.
4. You can create an item editor using the /Sitecore Client/Content Editor/Editor data template.
5. You can give your item editor a name using the header field in the data section.
6. In the icon field you can enter a path to the icon.
7. In the url field you need to fill in the url to the aspx file created in step 1
8. Save the item.
9. Switch back to the master database.

Now we have created the item and the user-interface for the Item Editor. The next step is to assign the item editor to a template.

10. You can do this by setting it on the standard values or a individual item. Open the item in the content editor or template manager.
11 . Click on the configure tab, go to the appearance group and click the editor command. A dialog will appear.
12. In this dialog you can select the item editor you want to use, using the arrows you can sort.
13. Finally close the dialog and save and publish.

Now when you select a item based on this template you see a item editor in the content editor with the title you filled in. You can edit the item editor using normal ASP.Net controls. This is a great solution for creating custom reports. But when you want to create an real custom editor functionality, you would like to use the default save button of the content editor. I might be confusing for a end-user to have two save button in one screen.

Unfortunately, Sitecore provides no default solution for capturing that event. Thanks to Eugene Omelnitsky from Sitecore Support (for pointing me in the right direction) I found a solution. You can adapt to the Save event using javascript. I then used JQuery to do an ajax call to the server and execute my save method.

This is the Javascript function which captures the save event and triggers an ajax call to my page method.


<script type="text/javascript">
function scGetFrameValue(value, request)
{
if (request.parameters == "contenteditor:save" || request.parameters == "item:save")
{
$.ajax({
type: "POST",
url: "EntryEditor.aspx/SaveItem",
data: "{ e: '" + $('#EditorIntroduction').val() + "', title: '" + $('#tbTitle').val() + "', content: '" + $('#EditorContent').val() + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("succes!");
}
});
}
}
</script>

And this is the method that I use server side


[System.Web.Services.WebMethod]
public static void SaveItem(string entryid, string introduction, string content, string title)
{
Database master = Factory.GetDatabase("master");

Item currentItem = ItemManager.GetItem(new ID(entryid), Sitecore.Context.Language, Sitecore.Data.Version.Latest, master);
Entry currentEntry = new Entry(currentItem);

currentEntry.BeginEdit();
currentEntry.Title = title;
currentEntry.Introduction = introduction;
currentEntry.Text = content;
currentEntry.EndEdit();
}

The code above is not perfect, it needs a bit more flexibility but for testing purposes it works.

Tags: , ,

About the Author

About the Author: Mark van Aalst is a Solution Architect for Sitecore Netherlands. Prior to working for Sitecore he has worked with the Sitecore CMS for more than 6 years and was a Sitecore MVP. Mark is also the initiator of the populair Sitecore Shared Source WeBlog module which he develops together with Nick Wesselman and Alistair Deneys. You can follow Mark on Twitter @markvanaalst or Google+ .

Subscribe

If you enjoyed this article, subscribe now to receive more just like it.

There Are 7 Brilliant Comments

Trackback URL | Comments RSS Feed

  1. commodore73 says:

    The Client Configuration Cookbook provides additional information about item editors:

    http://sdn.sitecore.net/Reference/Sitecore%206/Client%20Configuration%20Cookbook.aspx

  2. Mark says:

    Yes it does, but I doesn’t say how you can use the Save button in the Content Editor

  3. techphoria414 says:

    Mark did this actually work out for you in the end? I have it mostly working, but have a problem that the field values I save are overridden by the values that Sitecore saves in the Content tab. Very frustrating, it seems like Sitecore should make this easier.

  4. Vipul Panchal says:

    Hey Mark,
    Your post helped me lot.
    Now I am at the stage where I can see my field with Iframe loaded into that. Actually, I have a Telerik color picker loaded into Iframe. And I need to supply 7 fields like that. Now my question is, Will the same Iframe work for all seven fields? And how will I be able to retrieve the selected color value?
    I saw your jscript code but I am not sure How I can utilize that? I mean where should I put that?

    Can u send me any code sample or something?

  5. Arden Mclean says:

    hi there admin. i have to say that you have a really nice blog(Creating a Item Editor |) and i was actually impressed with it.i am new to blogs and i would love to know other blog writers and learn from their website. My blog(http://www.reddit.com/r/reddit.com/comments/g84j2/quantum_fishing_catalyst_pt_7bb_71_right_hand/) is quite new and i’m still learning to work with it. i hope i will get to know a lot from blog writers like you. cheers for this well-written post.

Post a Comment

Your email address will not be published. Required fields are marked *

Top