Sitecore Taglist Field

Recently I had the task to build a Sitecore Content Editor field which will be used for tagging content items.

The requirements for the field were:

  • Easy-to-use
  • Search-friendly (especially when working with large collections of items)
  • Autocomplete support

After certain time spent in research I found a jQuery plugin which pretty much satisfies the requirements: jQuery Chosen

The clients accepted the proposal and I my final task became: Integrate jQuery Chosen into Sitecore Content Editor.

The first thing that I had to do was to include jQuery Chosen source files (JavaScript and CSS) into Sitecore Content Editor.

My original idea was to add the files dynamically while rendering the field itself. Unfortunately this plan failed: The files were added dynamically but I introduced a bug as a side effect: When you click on a content item that has my custom field, the content editor was blinking 2 – 3 times before rendering the fields.

This behavior is unacceptable and I had to switch the strategy.

Then I found a really good blog post by Pavel VellerInjecting Resources into Sitecore Content and Page Editor. This approach was adopted and finally I had the source files included into the content editor without any side effects:

InjectScriptsConfig

The next mission was to write the field`s back-end. I tried to inherit from multilist field but this did not work out well. Finally I used “Sitecore.Web.UI.HtmlControls.Control” as a base class and decided to render the html select element myself. This time the plan succeeded and finally I had everything in place!:

RenderMultilistCode

I don`t like how I have to evaluate HTML/CSS/JavaScript code from the back-end but this is the way to go when building Sitecore Content Editor custom fields.

Now I was almost ready: I had just to add the field in the Core database and register the assembly in the section of Sitecore.config:

CoreDatabase

ControlSourcesConfig

This all story resulted in a multilist-like, good-looking, autocomplete field for Sitecore Content Editor!

The source code is available at GitHub: https://github.com/Bilyukov/SitecoreTaglist
You can find it on Sitecore Marketplace as a module as well:

Enjoy!