Adding a Signature Pad

In this recipe we’ll add a feature to capture a signature using the Signature Pad library by szimek. Signature Pad is a small independent JavaScript library that uses the HTML5 canvas element.

This recipe will be based upon our Ionic powered Time and Expenses seed application, but could be applied to most JavaScript projects in a similar fashion. The seed application mentioned uses as a backend and the MobileCaddy libraries to interact with it, but the principals below could be used within most projects.

Install and Integrate with Codeflow

As per our instructions on adding a dependency library add the package and add the appropriate Grunt task and Start Page references. In the case of the Signature Pad we have used npm to install it into our project like this;

The Code

In order to capture a signature we’ll add a simple modal form to our existing data input process. In our case we have an input form for capturing expense details, this is the flow in which we will add our signature pad.

  • Add a signature capture modal form
  • Update our existing New Expense form to open the modal
  • Add controller code to manage the signature capture functionality
  • Add controller code to save the signature to the database

Add the signature capture modal form

Create a new file called signature.html (within your templates folder) and add the following code:

Update our input form to show the modal

Add the following code to the input form where you want to capture the signature. In our example project we modify the projectTimeExpNew.html file (just above the </ion-content> tag). This code will currently only be displayed for an Expense type record (not Time):

Our new Capture Signature button on our input form.

Add controller code to manage the signature capture

Within your contoller that handles the input form data (in our case the ‘ProjectExpNewCtrl’ controller), add the following code.

More code examples can be found within the installed NPM package ‘node_modules\signature_pad\example’:

Our Signature Pad in action

Add controller code to save signature

In the above code, signaturePad.toDataURL() will return a string in the format data:image/png;base64,iVBORw0KGg… – so can be easily displayed in signature.html using this template markup;

However, it might be more useful to save just the base64 data to the database so it can be more easily manipulated outside of our app.

In the controller that handles the submitted input form data (in our case the ProjectExpNewCtrl controller), add the following code within the ‘$scope.submitForm’ method (just after the creation of variable ‘varNewExp’):

This will save the signature’s base64 data to Salesforce.  mobilecaddy1__Expense_Signature__c is a ‘Rich Text Area (32768)’ field on object MC_Object_002 within the MobileCaddy package.

You can watch our short quick bite video on adding a new field to a table if you need more information on how to do this.

To display the above field in HTML, use code similar to the following: