»

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.

?Download PropertyColorPicker.cs
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.

This entry was posted on Monday, October 11th, 2010 and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “ColorPicker – EPiServer custom property”

  1. Martin S. says:
    2010-10-14 at 20:35

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

    Reply
  2. Shahin Alborz says:
    2010-10-14 at 23:55

    Thanks Martin, nice to meet you guys too!

    Reply

Leave a Reply