Creating the Multiple Signatures on a Form
------------------------------------
1. Open a form in Laserfiche Forms.

2. Create a Collection, that will include all of the signature fields. Under the Advanced tab, give it the sigCollection class.
 
3. On the Edit page, add a multi-line field called sig data. In the Advanced tab, give it the sigdata class.

4. Under the collection, add a custom html field. In the advanced tab add the sigGroup class. In the basic tab, ensure that you are looking at the HTML view in the rich-text editor by clicking the HTML button. In the HTML view, you should see HTML tags like <p>.
Paste the following code into the rich-text editor:

<div class="signature"><br><div src="data:image/gif;base64,R0lGODlhtABJAOf/AAABAAACAAEEAAIFAQQHAgUIBAcJBQoJAAgLBwwLAAoMCA0MAA8OAwwPCxMQAA8RDRURABYSARITERMVBBQVExcXABgYAhYYFRkaBBwbABkaGB0cAR4dAhocGRsdGh8fBSIgAB0fHB4gHSAhHyQjBSckACIjISgmASQlIyooBSYnJSwpAC0qAC4rAS8rAikqKCssKjEuBTMvAC0uLDUwAjcyBS8xLzg0Bjs1ATIzMTw3Azk5BDQ2MzY3NTs7Bjw8Bzg5Nz49ADo7OUA/AkJABEJBBTw+O0RCBj5APUVECEdFAUFCQElGAkpIBERGQ0xKBk5LB09MCEdJRlJOAlNPA0pLSVRQBFZSBk1PTFdTB1hUCVtVAE9RTlxXAl5YBFJUUVRVU2BaBmFbCFZXVWJcCVZYVVlbWWZgAmhhBGliBVxeW15gXWxlCW1mC2BiX25nDHBoAXJqA2NlYnRrBmZnZXFu...Blv5BeoRgi3TAJAbUTDeAGxBAglBhnG8EP3LAKdtADscgqMXAGlQAMe3eLliEOmqBnKlIGu9A+qRiMlTiM2mAKdJAD8EYANJAGl6Bz0NgX5vAJTyAhBIAFs0A32vhTw4gNpCAHNgBvBlADbKAJxvCFm8QOqqAF4uEEq6A0kRePPbYR+zANoOBuVIYDbbAJn2Zn7RALYsAZO2EEoICKB4mQeKWQGWd0VJZsy+aPYxIPuMAGRpMDmeCHHemR1GS+ds5QdGuHL/JGb7DXJMBQB7H1ApBwfy8Jkz1kdsiQCWWAAh33cSGHI8fwB3+yEyZgCD9XN0LJHrhXDJYABpjXE0m3dE3HGtIwCKXYgn5waVRZlVwCE/ege7zHdm4Hd5UBaduzExJAB8jwIgmBlggJE/YgDJHABf/HExGgeaigDJVgW7yoBsKQIXrZmNuoEfvnCFigARZlAGCQC9jomJppcRshD72gCFXQAVUAC/C4maaZaUWSl6e5mgkZlBYREAA7" alt=""></div></div>

5. Add another custom HTML field. In the advanced tab, add the sigGroup class. In the
basic tab, ensure that you are looking at the HTML view in the rich-text editor and paste the following: <p><input class="donebutton" value="Done" type="button"> <input class="clearbutton" value="Clear" type="button"></p>

6. Add another custom HTML field. In the
basic tab, ensure that you are looking at the HTML view in the rich-text editor and paste the following: <div class="sigimage"></div>

7. Add another Custom HTML field. In the
basic tab, ensure that you are looking at the HTML view in the rich-text editor and paste the following: <p class="sigwarning">You must sign this form before submitting.</p>


8. On the CSS and JavaScript page, paste the following code in the JavaScript section:

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}
 
function htmlDecode(value) {
    return $('<div/>').html(value).text();
}
 
$.getScript('https://prodocs4530/jSignature.min.js', function () {
    $('.signature').jSignature();
});
 
/**When the page loads, check if the sig data (hidden) field has a value.
   If it has a value, decode it and put it in the image, and remove the
   signature pad and its buttons.**/
 
$('.sigCollection').each(function () {
    var sigvalue = $(this).find('.sigdata textarea').text();
    var sigrovalue = $(this).find('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
        var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo($(this).find('.sigimage'));
        $(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        $(this).find('.sigwarning').hide();
    }
});
 
$('.donebutton').click(function () {
    var section = $(this).closest('.sigCollection');
    var sigdata = section.find('.signature').jSignature('getData');
    section.find('.sigdata textarea').val(htmlEncode(sigdata));
    var $img = $('<img class=imported></img>');
    $img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
    section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
});
 
$('.clearbutton').click(function () {
    var section = $(this).closest('.sigCollection');
    section.find('.signature').jSignature('clear');
});


9. In the line that starts "$.getScript..." replace formsServerURL with the name of the Forms Server machine.

10. In the CSS section of the CSS and JavaScript page, add the following rule: .sigdata{display:none;}