Color picker property plus plus

Have you ever used the Dijit ColorPalette to create a color picker property? You probably have.
It’s pretty simple as you can read here.

However, this ColorPalette has some disadvantages.
You can’t change the colors, only switch between 2 predefined palettes.
You can’t clear your selection. Once you have chosen a color you can never unselect it, only select another one.

So let’s extend the ColorPalette. We want to chose the colors ourself and also the number of colors. We also want a reset button to clear the selection.

Let’s start with the reset button. Make a copy of the original ColorPalette.html file and add the button. (Copy it for example to \ClientResources\Scripts\Editors\Templates)

The data-dojo-props attribute sets some properties for the button: display an icon on the button and hide the label.
The data-dojo-type attribute tells Dojo this is a Button widget.
The data-dojo-attach-event will attach the function clearSelection to the onClick event.

Next we will extend the ColorPalette to use this button. (Put it for example in \ClientResources\Scripts\Editors)

As you can see this is pretty simple. We override the templateString for the ColorPalette. Since our template contains a button widget we have to use the _WidgetsInTemplateMixin and set the widgetsInTemplate property to true.  The function clearSection simply sets the value to null.

To use our new ColorPalette we need an editor descriptor

You can now decorate you properties with a [UIHint(“ColorPicker”)]

ColorPaletteWithResetButton

If you only wanted a reset button on the ColorPalette, you’re done. If you want to configure your own colors, keep on reading.

We can pass values to our ColorPalette by using the EditorConfiguration dictionary.  We will set a value for the property ‘colors’ with a 2 dimensional array of colors.

As you can see we can use named string, hex strings of the build in Color objects.
Normally you would not hard code this array in your editor descriptor, but for the simplicity of the example I did.

Now we have to modify the ColorPalette to use our custom colors.

For this code I made a copy of the original ColorPalette.js and stripped out all the hard coded palette info. Then I replaced the palette properties in the function buildRendering with the colors property we created in the editor descriptor. (this.colors)
I’ve also added some inline styling to make the color areas a little larger.

CustomColorPaletteWithResetButton

By copying and modifying the original ColorPalette we do have some duplicate code. I tried inheriting from the ColorPalette and override some functions, but couldn’t get it to work. If you know a better solution, leave a comment.