Mike Robbins

Sitecore Developer Blog

Follow me on GitHub

Sitecore Content Editor Tabs In SPEAK

Within the Sitecore Content Editor, the editor section can change context based on the type of Item you are editing. For example when a media folder item is selected, the view allows you to upload media files, a template item allow you to add fields etc. These areas are called editors.

Media Editor

Media Editor

You can define and create your own custom editors within the Content Editor and specify the type of items it is applicable to.

Creating the Editor

To create the logic for the custom editor you can either create a single page SPEAK application or a ASPX page or similar. The single page application is then Iframed into the Content Editor by Sitecore.

As the custom editor will be displayed when you have chosen a Sitecore Item, you will want to know the context item that has been selected. Sitecore handles this for you, The Item id, context database, language and version number are passed to your Editor application as query string parameters.

E.g. /sitecore/client/Robbins/Tabs/AdvancedUserTab?id=%7B03481639-AE05-4C9B-9540-2A05D0C36214%7D
&la=en&language=en&vs=1&version=1&database=master&readonly=0&db=master

Query String Parameters

Query String Parameters

You can also get access to the JavaScript of the Content Editor from within the IFramed Editor (using "parent.scForm" to get access to the parent window). This can be handy for refreshing the Content Editor or opening up new tabs.

For example this code allows to trigger a new tab from within a Editor Iframe

Edit Definitions

Editors are defined within the Core database within the following folder"/sitecore/content/Applications/Content Editor/Editors". Here we can create additional editor definitions, its recommended practice to create a new folder to hold your custom editors not to clash with Sitecore in future upgrades.

A Editor item is made up of a few fields:

  • Header: This is the text thats displayed in the tab in the UI
  • Icon:  Doesn't appear to be used.
  • Url: This is the URL of the application you want to Iframe as a Editor. This can be a SPEAK application, ASPX file or similar. For a SPEAK application in the following location in the Core database "/sitecore/client/Robbins/Tabs/AdvancedUserTab" the URL would be the same "/sitecore/client/Robbins/Tabs/AdvancedUserTab"
  • Refresh On Show: This checkbox causes the Iframed page to be refreshed every time its tab is selected.

Custom Editor Definition

Custom Editor Definition

Applying A Custom Tab

The last step is to apply the Editor to the required item templates that will display the custom Editor.

Within the standard values of the template(s) you want to add the Editor too, update the Editors field within the Appearance tab to add in your custom editor.

Add Custom Editor

Add Custom Editor

Whenever you select an item of this template type the Custom Editor will be loaded and displayed. As this is a Sitecore Item in the Core database you can also add security to lock access to the custom Editor if required.

Custom Editor Item Editting

Custom Editor Item Editting

Example Module

I have an example Custom Tab I have created with Jon Robbins on GitHub and Sitecore Marketplace.