Custom Color picker Editor Descriptor

Vote:
 


I have used optimizely's default dijit/ColorPalatte to add a color picker property.This works just fine but only shows limited colors.
I have tried adding a custom Editor to add custom colors but it does not work.
Here's my complete block and editor descriptor.

using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.Shell.ObjectEditing;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;
using System.ComponentModel.DataAnnotations;
using xxx.EpiServer.DataAbstraction;

namespace xxx.EpiServer.Models.Blocks
{
    [ContentType(DisplayName = "Color Palette Block", GUID = "1b0d0535-e0cb-4fe0-b179-81e72b8ccb6e",
        Description = "Used to create Color Palette block", GroupName = SystemBlockCategoryNames.Widget)]
    [SiteImageUrl]
    public class ColorPaletteBlock : SiteBlockData
    {
        [Display(Name = "Color", Description = "Used to add Color", GroupName = SystemTabNames.Content, Order = 100)]
        [EditorDescriptor(EditorDescriptorType = typeof(ColorPaletteEditorDescriptor))]
        [UIHint("ColorPalette")]
        public virtual string Color { get; set; }
    }

    [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = "ColorPalette")]
    public class ColorPaletteEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            ClientEditingClass = "dijit/ColorPalette";
            metadata.EditorConfiguration["palette"] = new string[]
            {
                "#FF0000", // Red
                "#00FF00", // Green
                "#0000FF", // Blue
                "#FFFF00", // Yellow
                "#FFA500", // Orange
                "#800080", // Purple
                "#000000", // Black
                "#FFFFFF"  // White
            };
            base.ModifyMetadata(metadata, attributes);
        }
    }
}

When i adding this new color palette block,its empty. Is there something that is missing in the editor? I have tried 2dimensional array instead of this single array for colors but none works. Is there a way to customize the color.

Any input is appreciated.

Regards.

 

#338137
May 13, 2025 23:48
Vote:
 

The palette option only controls the size of the color grid:

A string defining the size of the palette. Can only take one of two values, 7x10 or 3x4. The default value is 7x10.

Source: https://dojotoolkit.org/reference-guide/1.8/dijit/ColorPalette.html#widget-construction-parameters

However, you can create your own widget inheriting dijit/ColorPalette and override the _palettes property.

Excerpt from the widget source code:

	// palette: [const] String
	//		Size of grid, either "7x10" or "3x4".
	palette: "7x10",

	// _palettes: [protected] Map
	//		This represents the value of the colors.
	//		The first level is a hashmap of the different palettes available.
	//		The next two dimensions represent the columns and rows of colors.
	_palettes: {
		"7x10":	[["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan",	"lavender", "plum"],
				["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"],
				["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise", "skyblue", "mediumslateblue","orchid"],
				["gray", "red", "orangered", "darkorange", "yellow", "limegreen", "darkseagreen", "royalblue", "slateblue", "mediumorchid"],
				["dimgray", "crimson",	"chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],
				["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],
				["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo", "purple"]],

		"3x4": [["white", "lime", "green", "blue"],
			["silver", "yellow", "fuchsia", "navy"],
			["gray", "red", "purple", "black"]]
	},
#338138
Edited, May 14, 2025 6:40
* 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.