SaaS CMS has officially launched! Learn more now.

ColorPicker attached to property?



Is there a built-in ColorPicker in EPiServer 7?

What I want to achieve is this: instead of manually typing a string like '#112233' you get to pick a color and the corresponding hex-value is written.

If there is no ColorPicker available (which I'm starting to suspect), should one write or download a custom property?



Dec 17, 2013 9:37

I guess you have to add a custom Tiny MCE plug-in. There seems to be one built into Tiny MCE 4 ( but I'm not sure how much work it is getting it to work in Tiny MCE 3.5 which is the current version used in EPiServer. Check the Tiny MCE developers guide on how to plug-in a Tiny MCE plug-in into EPiServer.

Dec 17, 2013 10:32

Yes, it's worth looking into if you want a color picker in Tiny MCE. I would like a color picker attached to a string property, somewhat like this:

// Start dummy code

public virtual string HeadingBackground { get; set; }

// End dummy code

Dec 17, 2013 11:28

Tiny MCE settings are stored using something called property settings. These can be defined either for a specific property or as a global setting that can be reused for some or all properties. There is currently no built in support to define property settings for a specific property through code. So you will have to create a Tiny MCE plug-in as described in the documentation and add that setting using the administrative interface (it's possible to automatically configure this in an initialization module. Here is an example of that).

Dec 17, 2013 11:35

Ok. The thing is I don't want the color picker inside the Tiny MCE Editor. I want it attached to a simple textbox so that when you set focus on the textbox a color picker shows up.

There's a Logica Color Picker available on EPiServer NUGET, but for various reasons I want to avoid 3rd party solutions.

Thanks anyway for the information!

Dec 18, 2013 8:03
Dec 18, 2013 8:28

You could use the dojox.widget.ColorPicker.


Jan 03, 2014 17:22

I probably could use the dojox.widget.ColorPicker, however wouldn't that require me to use a custom property? Or could I use UIHint or such? We're running EPiServer 7.0.

Jan 08, 2014 8:51

In general, you should be able to just define the widget directly, for instance by using the uihint/editordescriptor pattern or by defining the clienteditor attribute ([ClientEditor(ClientEditingClass = "dojox/widget/ColorPicker")]). For the ColorPicker however, is seems like it throws an exception if the value is null so you have to create a wrapping widget. See the StringList editor in the Alloy sample packages for an example (though you can probably simplify your widget quite a lot).

Jan 08, 2014 9:32

Linus, thanks,

I did the same.

But I have a small question with css file for dojox.widget.ColorPicker. I copied it to the project, but how to define usage of the standard css file from dojo library in the wrapping widget? 


Jan 08, 2014 9:48

The dojox-color picker seems very experimental and non-AMD. You can probably add the link to the template of your wrapping widget. There seems to be a somewhat simpler widget in the supported dijit namespace:

Jan 08, 2014 10:15

Please, check (I used Alloy mvc as an example)

1. Use the UIHint or ClientEditor for property.

[ClientEditor(ClientEditingClass = "alloy.editors.ColorPicker")]

public virtual string ColorPicker { get; set; }

2. add to the project ClientResources\Scripts\Editors\ColorPicker.js











function (









 ) {

    return declare("alloy.editors.ColorPicker", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin],


            templateString: "<div class=\"dijitInline\"><div class=\"colorPickerContainer\">" +

                "<div data-dojo-attach-point=\"stateNode, tooltipNode\">" +

                "<div data-dojo-attach-point=\"colorPicker\" data-dojo-type=\"dojox.widget.ColorPicker\" >" +



            intermediateChanges: false,


            value: null,


            onChange: function (value) {

                // summary:

                //    Called when the value in the widget changes.

                // tags:

                //    public callback



            postCreate: function() {

                // summary:

                //    Set the value to the control after the DOM fragment is created.

                // tags:

                //    protected


                if (this.value != null) {

                    this.set("value", this.value);

                } else {

                    this._set("value", "#ffffff");




                // call base implementation



                // Init widget and bind event

                this.colorPicker.set("intermediateChanges", this.intermediateChanges);

                this.connect(this.colorPicker, "onChange", this._onColorPickerChanged);



            _onIntermediateChange: function(event) {

                // summary:

                //    Handles the color picker key press events event and populates this to the onChange method.

                // tags:

                //    private


                if (this.intermediateChanges) {






            focus: function () {

                // summary:

                //    Put focus on this widget.

                // tags:

                //    public





            isValid: function() {

                // summary:

                //    Check if widget's value is valid.

                // tags:

                //    protected, override


                return !this.required || this.colorPicker.value.length > 0;



            _setValueAttr: function (value) {

                // summary:

                //    Sets the value of the widget to "value" and updates the value displayed in the textbox.

                // tags:

                //    private 

                if (value != null) {

                    this._set("value", value);

                    this.colorPicker.set("value", value);



            _setReadOnlyAttr: function(value) {

                this._set("readOnly", value);

                this.colorPicker.set("readOnly", value);



            // Setter for intermediateChanges

            _setIntermediateChangesAttr: function(value) {

                this.colorPicker.set("intermediateChanges", value);

                this._set("intermediateChanges", value);



            // Event handler for widget

            _onColorPickerChanged: function(value) {

                // summary:

                //    Handles the textbox change event and populates this to the onChange method.

                // tags:

                //    private

                 this._set("value", value);






3. Add to the ClientResources\Styles\

ColorPicker.css (contains the styles for color picker)

Styles.css contains @import url("ColorPicker.css");

4. Add to the project module.config

Jan 08, 2014 18:14
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.