Optimizely CMS 12: color picker and its limitations

Optimizely controls: going beyond basics

Optimizely CMS 12 comes with support for a few basic controls rendered for built-in property types, like a text input field or a date-time picker.

Built-in property types are documented, e.g., in the official documentation. For developers’ convenience, I also wrote a blog post about basic CMS 12 controls, providing a single list that shows code snippets and screenshots of rendered controls.

However, sometimes we need to go beyond basic controls and render more fancy controls.

Optimizely’s “native” color picker

I recently searched for how to display a color picker control for CMS users. I found some forum threads mentioning importing a widget from dijit, a UI library used by Optimizely. Here are two examples:

[Display(Name = "Text Color", Order = 10)]
[ClientEditor(ClientEditingClass = "dijit/ColorPalette")]
public virtual string TextColor { get; set; }

[Display(Name = "Accent Color")]
[ClientEditor(ClientEditingClass = "dijit/ColorPalette", EditorConfiguration = "{ \"palette\": \"3x4\" }")]
public virtual string BackgroundColor { get; set; }
Code language: C# (cs)

They render like this:

Dijit color picker limitations

Dijit’s Color Palette widget documentation clearly states that this widget has only one parameter, allowing the size to be changed between 7×10 and 3×4 grid sizes. And that’s it.

There is no way to change the set of colors displayed on the palette, adjust the size of color sample squares, or tailor the palette to include only your brand colors. So, it’s pretty cool, but not very useful in the real world.

Alternative: a custom color picker

Hopefully, we can also write custom UI controls in Optimizely. And 10 years ago, someone did just that!
Håkon Nordli published a post on Optimizely forums, sharing his basic color picker for Optimizely (back then named EPiServer) versions 8 and 9.

The code is still available as an archive in the GitHub repository knowit/ColorPickerEditor. I tested that it still works fine without any adjustments needed in CMS 12 🎉

// You need to clone the control's code to your project for it to work
[UIHint("ColorPickerEditor")]
[Display(GroupName = SystemTabNames.Content, Order = 10)]
public virtual string ColorPickerEditor { get; set; }
Code language: C# (cs)

Note that it is still a color picker with a predefined set of colors rather than free choice of any color you like. But you can also use it as a neat starting point to develop a more complex color picker if needed. Good luck! 🙂