Signature Pad Mobile Documentation

The Signature Pad Mobile is a simple component that allows you to capture a signature while using a touch device.

This component provides you with a block that has several input parameters such as:

• Height - Here you can set the height of the signature, in pixels;

• BackgroundColor - Here you can set the BackgroundColor that you want. By default, the value is #FFFFFF;

• BorderColor - This is the input parameter that defines the border color of the signature pad. By default, the value is #C2C2C2

• ShowClear - Variable the validates if it’s to show the Clear Link. If set to true you can see a Clear Link to clear the signature link. By default the value is True.

• ShowDone - Variable the validates if it’s to show the Done Link. If set to true you can see a Done Link to done the signature link. By default the value is True.
  
  

Besides this input parameters also has events:

• Clear - This event allows you to clear the Signature Pad;

• Done - This is event is triggered when you click on the Done Link;

• StrokeFinished - This event is used to obtain the Binary Data from the Signature Pad.
  
  

How to use 

In order to use Signature Pad on your mobile application follow the next steps:

Step 1 - On your application, go to Manage Dependencies to import the SIgnature Pad Mobile plugin.

Step 2 - On your screen drag the Block provided by Signature Pad plugin. this block can be customized in terms of heigh or background color.

Step 3 - After that, add two local variables: “IsDone” (type Boolean with the Default Value False) to manage the lifecycle of the signature - get to know when is done; And “Signature”(type BinaryData) to store the signature itself. These two variables.

Step 4 - As it was described above this block has three events: Clear, Done and StrokeFinished. To handle those events create three actions with the names: SignaturePadClear, SignaturePadDone, and SignaturePadStrokeFinished as you can see above.

1. Because this is a simple sample, in the SignaturePadDone has only one assign to change the value of the local variable IsDone to True.

2. The SignaturePadStrokeFinished is where the signature is obtained so first it’s necessary to verify is the User clicked done. To do this drag an If and set the condition to IsDone (the local variable created in the beginning).
   a) Below the If drag an Assign the add the following assignment Signature = SignatureBase64. Connect the True branch of the If to this Assign.
   b) On the right of the If drag an End Statement and connect the False branch of the If.

The SignaturePadDone and the SignatureStrokeFinished actions should look like this.