ColorPicker – EPiServer custom property

October 11th, 2010


Some of the best ideas are not advanced, but very simple. 🙂

My first post is a very simple custom property type (for EpiServer CMS) which enables editors to pick a color instead of typing a hexcolor. Needless to say, setting limited access to such properties are highly recommended.

We implement a standalone javascript based color picker called JSColor, and create a property type to use it in the Edit Mode interface of EPiServer CMS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Web.UI.WebControls;
using EPiServer.Core;
using EPiServer.PlugIn;
using EPiServer.Web.PropertyControls;
using EPiServer.ClientScript;
 
namespace Ottoboni.SpecializedProperties
{
    ///
    /// ColorPicker Custom Property for EpiServer CMS 6
    /// License: Released under GNU Lesser General Public License (*) http://www.gnu.org/copyleft/lesser.html
    /// * License exception: Permission granted to include this plugin with non-free applications.
    /// Author: Shahin Alborz, http://www.ottoboni.se
    ///
    [Serializable]
    [PageDefinitionTypePlugIn]
    public class PropertyColorPicker : PropertyString
    {
        private const string jsColorPath = "/JS/JSColor/jscolor.js"; // Your path to jscolor.js
 
        public override IPropertyControl CreatePropertyControl()
        {
            return new ColorPickerPropertyType();
        }
 
        public class ColorPickerPropertyType : PropertyStringControl
        {
            public override bool SupportsOnPageEdit
            {
                get { return false; }
            }
 
            protected override void SetupEditControls()
            {
                base.SetupEditControls();
 
                ClientScriptUtility.RegisterClientScriptFile(this.Page, jsColorPath);
 
                Label colorLabel = new Label();
                colorLabel.Text = "#";
                this.EditControl.Parent.Controls.Add(colorLabel);
 
                TextBox colorTextbox = this.EditControl;
                colorTextbox.CssClass = "color {required:false,pickerPosition:'right'}";
                this.EditControl.Parent.Controls.Add(colorTextbox);
            }
        }
    }
}

Download the javascript package here: JSColor 1.3.1

Tested on EPiServer CMS 6. Source code donated by Ottoboni.

2 Responses to “ColorPicker – EPiServer custom property”

  1. Martin S. says:

    Sweet solution. Nice to meet you at EPiServer HQ tonight!

  2. Thanks Martin, nice to meet you guys too!

Leave a Reply to Martin S.