UI ColorPickerEditor by Estrusco - serenity-is/Serenity GitHub Wiki

Code for integrate Bootstrap Color Picker in Serenity field.

It's necessary to include stylesheet and javascript for colorpicker in the CSHTML file for your entity type:

<link href="~/Scripts/colorpicker/bootstrap-colorpicker.min.css" rel="stylesheet" />
<script src="~/Scripts/colorpicker/bootstrap-colorpicker.min.js"></script>

Then make your ColorPickerEditor.ts with this code.

namespace YourNamespace {
    @Serenity.Decorators.element("<div style='display: flex' />")
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class ColorPickerEditor extends Serenity.Widget<any>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue {
        constructor(container: JQuery) {
            super(container);

            this.updateElementContent();
        }

        private updateElementContent() {
            var divID = this.element.attr('id');
            var inputID = 'clpkr' + this.uniqueName;

            this.element.append('<input type="text" class="editor flexify" id="' + inputID + '" /><span class="inplace-button input-group-addon" style="padding-top: 5px; padding-left: 3px; border-radius: 4px"><i></i></span>');

            this.element.append(
                "<script>" +
                    "$('#" + divID + "').colorpicker({" +
                        "autoInputFallback: false" +
                    "});" +
                "</script>"
            );
        }

        public get value(): string {
            return $('#clpkr' + this.uniqueName).val();
        }

        public set value(value: string) {
            if (value != undefined) {
                var pick = this.element.data('colorpicker');
                pick.color.setColor(value);
                $('#clpkr' + this.uniqueName).val(pick.update());
            }
        }

        public getEditValue(property, target) {
            target[property.name] = this.value;
        }

        public setEditValue(source, property) {
            this.value = source[property.name];
        }
    }
}

Make T4 transformation to obtain the ColorPickerEditorAttribute and use it on string field.

        [ColorPickerEditor]
        public String Color { get; set; }

Enjoy :)

UI ColorPickerEditor by Estrusco - serenity-is/Serenity GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️