You are viewing limited content. For full access, please sign in.

Question

Question

Pre-populate Signature Field from BPM251 conference course demo

asked on May 29, 2014

We have a Forms Process that will gather the signature from a student and their parent using the signature JavaScript that was shown at the 2014 conference in the BPM251 course. The forms in their paper form already have a principals signature on them so they can just be filed away once the student and parent sign them. Considering the amount of submissions collected for this form (500+ 3 times per year), we would like to some how replicate that functionality.

 

I am wanting to create a second form in the same process that would apply the signature of the correct principal depending on the building the form is coming from. Is there any way to do that by pre-populating one of the JavaScript values for the signature? Or would a better route be to create an image of each signature and have it applied using a custom HTML field instead?

1 0

Answer

APPROVED ANSWER
replied on May 30, 2014 Show version history

In the original JavaScript for this, we're HTML encoding the signature image and placing it in a custom HTML field. Because we want to grab this image on a different form, and because custom HTML fields don't have variables, you'll need to slightly modify the JavaScript on the form where you're capturing the signature so the HTML encoded version gets stored in a field.

 

So, add a single line field to the form (there are a couple versions of the original JavaScript floating around. If you're using the one where signatures are within a collection, you'll add the field to the collection) and give it the image CSS class.
 

Now modify the JavaScript a little bit. Find this function (again, depending on whether you're using signatures in collections this might look slightly different).

 

$('.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.
    section.find('.sigwarning').hide();
});

 

On the line that starts with section.find, update the selector so the line looks like this:

 

    section.find('.sigdata textarea, .image input').val(htmlEncode(sigdata));

This is putting the HTML encoded version of the image into the field you're going to reference on your second form.

 

Create the second form and add the field variable for the single line field you just created to it. In addition, create a custom HTML field with <div class="sigimage"></div> as its HTML content. On the CSS and JavaScript page, add the following code:

 

function htmlDecode(value) {
    return $('<div/>').html(value).text();
}
 
$(document).ready(function(){

    var sigvalue = $(this).find('.image input').val();
    var decoded = htmlDecode(sigvalue);
    var $img = $('<img class=imported></img>');
    $img.attr("src", decoded).appendTo($(this).find('.sigimage'));

});

That should do it. As a note, this doesn't work if the single line field is read-only, but you should be able to get that working with a little tinkering.

0 0

Replies

replied on May 29, 2014

You just want the image of the signature, right? The HTML encoded value for the signature image should be stored in a field variable, so I think the new form would only need a small amount of code from the original form (the HTML decoding part) and the field variable. I'll try it out and update this post.

0 0
replied on May 29, 2014

That is correct, just the image of the signature. Thanks Eric.

1 0
replied on October 7, 2014 Show version history

Forms 9.2 supports out-of-box signature feature on Forms.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.