Field for electronic signature

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
Yilmaz
Posts: 25
Joined: 2013-01-24 16:58

Field for electronic signature

Post by Yilmaz » 2014-02-21 15:02

Dear all,

I would like to add into my database table an additional field which will allow to sign (web, ipad, iphone etc.) the signature of the user.

For that purpose I prepared a very simple website with a signature area (http://www.planetnikon.de/sign) at the very bottom. If you click on this field a little popup window apperars and you can sign with your fingers (mobile device) or your mouse (pc).

This princip is clear (HTML5 --> canvas).

My question is: How can I store this grafic as a jpg file and send it (over an hidden HTML field) to the database record in my appgini application?

Any ideas?

KR
Yilmaz

benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

Re: Field for electronic signature

Post by benzoD » 2014-02-21 22:01

This may help. You should be able to do this in the tablename_before_insert hook.

KSan
AppGini Super Hero
AppGini Super Hero
Posts: 252
Joined: 2013-01-08 20:17

Re: Field for electronic signature

Post by KSan » 2014-02-25 00:10

Wow! This is amazing. Great work with that signature area page. I would love to learn how you did that and the final AppGini integration when you get it to work. Amazing!!!

Asawyer13
Posts: 4
Joined: 2016-08-28 22:40

Re: Field for electronic signature

Post by Asawyer13 » 2017-07-27 12:55

The URL is dead so I can't see that part.
Did anyone ever get it working in AppGini that can show someone how it was done?

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: Field for electronic signature

Post by DevGiu » 2017-07-29 14:55

Asawyer13 wrote:
2017-07-27 12:55
The URL is dead so I can't see that part.
Did anyone ever get it working in AppGini that can show someone how it was done?
I don't know how it's done in this post, I had to do something similar, and used Signature Pad. On save just do an ajax request passing the signature, it's a dataurl you can convert to png from server side
/Giuseppe
Professional Outsourcing Services

vmehta
Posts: 1
Joined: 2018-06-09 11:08

Re: Field for electronic signature

Post by vmehta » 2018-06-10 02:47

I do want to capture digital signature with the records into my table. please help me with it.

Yilmaz
Posts: 25
Joined: 2013-01-24 16:58

Re: Field for electronic signature

Post by Yilmaz » 2019-04-10 12:46

Dear all,

Did anyone implement in the meanwhile "signature pad" library to use it within Appgini as a field for electronic signature to save it into mySQL?

Kind regards,
Yilmaz

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 632
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Field for electronic signature

Post by jsetzer » 2019-04-11 09:08

Stand by, I will have a look today.

Kind regards,
Jan

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 632
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Field for electronic signature

Post by jsetzer » 2019-04-11 14:06

It's tricky, but finally I have managed to turn AppGini text-fields into Signature Pad areas:

ezgif.com-optimize (1).gif
ezgif.com-optimize (1).gif (253.31 KiB) Viewed 2290 times

  • Create a field (datatype = Text) in your TABLENAME
  • Publish your app and ensure all fields have been rebuilt
  • Include the JavaScript library from their CDN:
    https://www.jsdelivr.com/package/npm/signature_pad
    I am using 2.3.2 which is latest stable version today.
  • In your TABLENAME_dv append a <canvas> to your $html variable
  • Create a TABLENAME-dv.js file in your hooks folder
  • I am hiding the field using .hide() function and only show the drawing-canvas
  • Find the canvas, create a SignaturePad object, pass the canvas and some options (see below)

    Code: Select all

    var elem = document.getElementById(canvas_id);
    var signaturePad = new SignaturePad(elem, {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(0, 0, 128)',
            });
    
  • Now in your JavaScript on change of Signature Pad get the data usign .ToData() function. There is an onEnd() event which can be used for detecting every end of a stroke
  • I am converting the raw data into Json using JSON.stringify, but there are other alternatives like converting the image into a Base64 string
  • Store the json in your field:

    Code: Select all

    var field = jQuery('#' + fieldname);
    signaturePad.onEnd = function () {
      var data = this.toData();
      field.val(JSON.stringify(data));
    };
    
  • On load of your form, get the data (which comes as text from database) and convert it into json:

    Code: Select all

    var data = field.val();
    if (data) {
      data = JSON.parse(data);
    }
    
  • Pass your json object to the Signature Pad object:

    Code: Select all

    var signaturePad = new SignaturePad(elem, {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      penColor: 'rgb(0, 0, 128)',
    });
    
    if (data) {
      signaturePad.fromData(data);
    }
    
    ---

    This is quite complex for non-programmers. If there is enough interest, I can continue working on a plugin library which will reduce coding to a few lines of code, only:

    Changes in hooks\TABLENAME.php:
    Init my helper class; 1st arg: columnname; 2nd arg: editable { true | false }

    Code: Select all

    function ratings_dv($selectedID, $memberInfo, &$html, &$args){
        $signature = new \AppGiniHelper\SignaturePad("signature", true);
        $html .= $signature;
    }
    
    Changes in hooks\footer-extras.php

    Code: Select all

    \AppGiniHelper\SignaturePad::finalize();
    
    ---

    ;) It's a lot of work to get this running. If you are interested in buying the code and/or in me supporting your project, please send me a PM or contact me: https://www.bizzworxx.de/en/appgini-improvements/

    Kind Regards,
    Jan

Yilmaz
Posts: 25
Joined: 2013-01-24 16:58

Re: Field for electronic signature

Post by Yilmaz » 2019-05-03 07:15

Hallo Jan,

habe Dir eine PN verschickt!

Viele Grüße
Yilmaz

Yilmaz
Posts: 25
Joined: 2013-01-24 16:58

Re: Field for electronic signature

Post by Yilmaz » 2020-05-07 08:01

Dear all,

during these crazy times of Corona and especially HomeOffice it's getting more and more important that most of company related workflows are digital.

So electronic signing of forms and approvements is a MUST HAVE! Is there any near future plan to integrate this functionaly (like https://github.com/szimek/signature_pad) in AppGini as a standard "esign field".

I had also contact last year to Jan for individual developement of this topic but it was for me as only 1 interested person to high costs. May be there are in the meanwhile some other AppGini users we can ask Jan to implement this and we all can divide the costs among us?

Kind regards,
Yilmaz

G Scott
Posts: 4
Joined: 2018-02-25 00:02

Re: Field for electronic signature

Post by G Scott » 2020-05-31 22:42

Hi Jan,

I've recently purchased your AppGini Helper library.
It would be great if you could incorporate adding Signature Pad objects in your library.
I think this would be useful for many people.

In the next few days, I'm going to try and add a Signature Pad object based on the help you've provided above. *Fingers Crossed*

Kind regards,
Grant

Post Reply