-
Notifications
You must be signed in to change notification settings - Fork 795
UI ColorPickerEditor by Estrusco
Victor Tomaili edited this page May 3, 2021
·
1 revision
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 :)
Copyright © Serenity Platform 2017-present. All rights reserved.
Documentation | Serene Template | Live Demo | Premium Support | Issues | Discussions