Editors Signature Editor using SignaturePad

(by Wesley Huang)

How to add a Signature Editor using SignaturePad

1. Open a command prompt in the project folder, and run

npm install --save signature_pad

2. In ScriptBundles.json, add

"~/node_modules/signature_pad/dist/signature_pad.umd.js"

3. Create a TypeScript file called SignatureEditor.ts

namespace YourProjectName {

    @Serenity.Decorators.element('<div />')
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class SignatureEditor extends Serenity.Widget<SignatureEditorOptions>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue
    {

        private signaturePad: any;

        constructor(div: JQuery, options: SignatureEditorOptions) {
            super(div, options);

            let canvas = $('<canvas />').attr('id', 'sign_' + this.uniqueName);
            this.element.append(canvas);
            
            this.signaturePad = new SignaturePad(canvas[0]);

            let clearButton = $('<button />').attr('id', 'clearsign_' + this.uniqueName).html('<i class="fa fa-eraser"></i>');
            clearButton.on('click', (e) => {
                e.preventDefault();
                this.signaturePad.clear();
            });
            this.element.append(clearButton);
        }

        public get value(): string {
            return this.get_value();
        }

        protected get_value(): string {
            return this.signaturePad.toDataURL();
        }

        public set value(value: string) {
            this.set_value(value);
        }

        protected set_value(value: string): void {
            this.signaturePad.fromDataURL(value);
        }

        setEditValue(source: any, property: Serenity.PropertyItem): void {
            this.value = source[property.name];
        }
        getEditValue(property: Serenity.PropertyItem, target: any): void {
            target[property.name] = this.value;
        }

    }

    export interface SignatureEditorOptions {
    }
}

BTW, Does any one know how to get rid of red tilde under SignaturePad? Please let me know. Thanks

4. run T4 template.

Usage

1. Add a column in table with data type NVARCHAR(MAX)
2. Add the column in your Row.cs file
3. Add the column in your Form.cs file as below (assume your column is called 'Signature')

[SignatureEditor]
public String Signature { get; set; }

That's all.

https://github.com/volkanceylan/Serenity/issues/4533