Håkon Nordli
Sep 23, 2015
  5905
(14 votes)

Dojo – a color picker widget

Now and then, a web editor needs to pick a color either in a block or a page. There are several ways to pick colors, for instance you can use the built in dijit widget for picking colors, http://dojotoolkit.org/reference-guide/1.10/dijit/ColorPalette.html, or just add a dropdown.

In my opinion, I think the built-in ColorPalette from Dojo is too difficult and not as extendable. That is why I have created my own color picker. I have refactored the code and shared the property on github.

Here is a screen dump from editmode:

clip_image001

This is a lightweight widget where you as a developer can decide which colors that will be available. In the templateString all the colors are visible through the A-tag.

<div class=\"dijitInline\">\
<ul data-dojo-attach-point=\"colorPickerList\" class=\"colorPickerList\">\
<li><a href=\"#\" data-color=\"#7cb5ec\" style=\"background-color:#7cb5ec;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#434348\" style=\"background-color:#434348;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#90ed7d\" style=\"background-color:#90ed7d;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#f7a35c\" style=\"background-color:#f7a35c;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#8085e9\" style=\"background-color:#8085e9;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#f15c80\" style=\"background-color:#f15c80;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#e4d354\" style=\"background-color:#e4d354;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#8085e8\" style=\"background-color:#8085e8;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#8d4653\" style=\"background-color:#8d4653;\"><span>Color name 1</span></a></li>\
<li><a href=\"#\" data-color=\"#91e8e1\" style=\"background-color:#91e8e1;\"><span>Color name 1</span></a></li>\
</ul>\
</div>

As you can see, the data-color attribute holds the color, and the style attribute is for showing the color. Notice the span-tag which holds the color name. This way it is more accessible.

If you are going to use this in a project, I suggest that you to put the colors in the CSS and SASS/LESS variables, which may be used several places in your project. If you are not using SASS, LESS or other style preprocessors, I recommend you to have a look at it.

To add the color picker to a project just add the descriptor file, css file and the dojo javascript file to the project code. Then you can start using it by adding the UIHint ColorPickerEditor. Also notice that I use string as a property. There is no need for a custom property in this case.

[UIHint("ColorPickerEditor")]
[Display(GroupName = SystemTabNames.Content, Order = 25)]
public virtual string ColorPicker { get; set; }

There is a more detailed description on git on how to add the widget. Please have a look!

The widget is tested for EPiServer 8 and 9.

The property is available on Github and is open for everyone to use. Please give me feedback if you find any bugs.

Sep 23, 2015

Comments

Sep 24, 2015 07:44 AM

Thanks Håkon!

This is much desired. Dojo palette lacks documentation and gives you a headache.

Please login to comment.
Latest blogs
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog