I'm trying to create a custom colour picker based on the dojo colour picker widget as i can't find any plugins or out of the box full colour pickers for the CMS. I have my editor descriptor set up and the widget is showing but i'm having trouble where when i set two properties on my page both of them will only edit the first instance of my widget.

From the documentation for dojox/widget/ColorPicker it looks like i need to add in an Id to the div but I'm not too sure where i can pull in a unique id for my custom widget. The styling is also not being pulled in because i haven't referenced the CSS style sheet as i couldn't see any examples of where i would place the import line or do i need to download the css and place it in my ClientResources.

I based my code from the Alloy demo https://github.com/episerver/alloy-mvc-template/blob/master/src/Alloy.Mvc.Template/ClientResources/Scripts/Editors/StringList.js example but i didn't override/include some function that were handling events/data i didn't need.

define([
    "dojo/_base/array",
    "dojo/_base/connect",
    "dojo/_base/declare",
    "dijit/_CssStateMixin",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojox/widget/ColorPicker",
    "epi/epi",
    "epi/shell/widget/_ValueRequiredMixin"],
    function (
        array,
        connect,
        declare,
        _CssStateMixin,
        _Widget,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
        ColorPicker,
        epi,
        _ValueRequiredMixin) {
        return declare("customCms/ColorPickerEditor", [_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\" > \
                    </div></div></div></div>',
                intermediateChanges: false,
                value: null,
                multiple: true,
                onChange: function (value) {
                    // Event
                },

                postCreate: function () {
                    // summary:
                    //    Set the value to the control after the DOM fragment is created.
                    // tags:
                    //    protected   

                    // call base implementation                
                    this.inherited(arguments);

                    // 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) {
                        this._set("value", event.target.value);
                        this.onChange(this.value);
                    }
                },

                _setValueAttr: function (value) {
                    // summary:
                    //    Sets the value of the widget to "value" and updates the value displayed in the textbox.
                    // tags:
                    //    private          
                    this._set("value", value);
                    this.colorPicker.set("value", value);

                    //if (value != null) {
                    //    this._set("value", value);
                    //    this.colorPicker.set("value", value);
                    //}
                },

                _setIntermediateChangesAttr: function (value) {
                    this.colorPicker.set("intermediateChanges", value);
                    this._set("intermediateChanges", value);
                },

                _onColorPickerChanged: function (value) {
                    // summary:                 
                    //    Handles the textbox change event and populates this to the onChange method.                 
                    // tags:                 

                    //    private              

                    this._set("value", value);
                    this.onChange(value);
                }
            });
    });