Custom Item Editors in Sitecore

I know, I know; this post was supposed to be a post about the solution to recurring events but alas, the holidays and other priorities led me to push off that solution until January.  I also know that Sitecore is going the way of the page editor as of late, but say you have a complex third party database holding information that you don’t want to sync into your Sitecore install as items to be manipulated in the page editor.  These items may be too complex and require a small .Net app to manipulate.  In this case, a custom Sitecore editor is your answer.

I realize that making custom item editors is old hat for many developers, but was shocked on how hard it was to find a full walktrough on how to create and install one.  If you come across a spot in a solution where a custom editor is necessary, do the following three steps

• create an aspx page with the desired functionality
• create an application item in the core database for it under /sitecore/content/Applications/Content Editor/Editors
• set the editor in the standard values of the template you would like to manipulate

Here’s a slightly more in-depth version:

Creating the .aspx page

When creating the .aspx page, remember that just like in a layout page your Sitecore.Context is completely intact, accept for the current item.  To get the current item, use the Sitecore ID that comes in as a query string parameter “id”.  The code looks something like

Sitecore.Context.Database.GetItem(Request.QueryString["id"]);

Version (“vs”) and language (“la”) are also in the query string for more in-depth multi-language sites with workflow.

Once you have the item(s) you want to work with you can feel free to use whatever .Net controls you would like to display, edit, delete, whatever them.  Keep in mind this page is going to show inside of Sitecore, so CSS appropriately.  Hint (selected from the Sitecore stylesheet and slightly modified):

BODY
{
  margin: 0px;
  padding: 0px;
}
H1
{
  font-size: 14pt;
  color: #072D6B;
  font-family: Franklin Gothic Medium;
  margin: 5px;
  padding: 0px;
}
H2
{
  display: block;
  background-color: #D9D9D9;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid white;
  color: #555555;
  font-family: tahoma;
  font-size: 8pt;
  padding: 1px 5px;
  margin: 0px;
}

Creating the editor item

To create the application item in Sitecore to back this .aspx page we just created, login to the Sitecore desktop and select the core database.  Inside the core database’s Content Editor, go to /sitecore/content/Applications/Content Editor/Editors

Inside the Editors folder, create a folder to hold your cutsom editors.  I called mine “DHS Custom” in the above image.  In your custom editors folder, insert an item of template /sitecore/templates/Sitecore Client/Content Editor/Editor.

In this item the only required field is the Url, which will point to the .aspx page you have created in the previous step.  You might also want to change the icon, and check the “Refresh on Show” checkbox that will force a refresh of the .aspx page every time it is shown.

Setting the Standard Values

Now we are ready to install the editor on the item we would like to edit.  Navigate to the Standard Values of the template of the item you would like to install the editor on and find the “Editors” field.  If you cannot find the “Editors” field, make sure you have “Standard Fields” checked under the “View” ribbon menu.  Click the “Edit” button above the field and select your newly installed editor.

That’s it.  You’re done!  Notice that the editor will show up as a tab in the Standard Values and every item of that template type now.

NOTE: the save button will obviously not work in the new tab with your custom item editor unless you capture the save button press event.  Capturing the Save button press is an ambitious task and not documented by Sitecore, but I’ve recently found a blog post that describes this (thanks to Mark van Aalst!) http://www.markvanaalst.net/2009/08/19/creating-a-item-editor/

Feedback

Please hit me with some feedback.  I need to know if this is the type of stuff you want to hear.  Too much detail or too little?  Too easy a task?  Please take a second and click the poll below.

Thanks for reading