Signature Pad - Documentation (O11)

Stable version 2.1.0 (Compatible with OutSystems 11)

Other versions available for 10

Uploaded

on 4 Apr (2 days ago)

4.4

(16 ratings)

Documentation

2.1.0

If you're migrating from v1.x to v2.x and have any doubt or regression, feel free to contact me.

Simple usage:

Place the SignaturePad block in your Widget Tree
Connect an event handler to the 'Initialized' event that stores the 'SignaturePad' object into a local variable.
Create a button that calls an export client action, for example 'Signature_ToDataUrl'
1. Use the variable from step 2 in the input parameters of this action
Optionally create a Clear button that calls 'Signature_Clear'
Add some basic styling to your stylesheet (see next section)

Basic styling:

SignaturePad has no built in styles, it's up to the consumer to choose how to better display the Pad for each use case. The basic recommended styles are:

.signature-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

To style the container you can do something like:

.signature-container {
  border: 1px solid var(--color-neutral-6);
  width: 100%;
  height: 300px; 
}

Advanced use cases:

A demo is being worked on to show some advanced use cases. Thank you for your patience!

Tips and tricks:

To check if the user has signed, use the 'Signature_IsEmpty' client action instead of exporting and checking if the output of the export.
If you're exporting as a DataUrl, you can set choose the format of the image e.g. png or jpeg.
When exporting to jpeg, it's possible to define a `Quality` (0-1).
When exporting to jpeg, you should use a non-transparent color e.g. "rgb(255,255,255)" in `SignatureOptions.BackgroundColor`

2.0.0

If you're migrating from v1.x to v2.x and have any doubt or regression, feel free to contact me.

Simple usage:

Place the SignaturePad block in your Widget Tree
Connect an event handler to the 'Initialized' event that stores the 'SignaturePad' object into a local variable.
Create a button that calls an export client action, for example 'Signature_ToDataUrl'
1. Use the variable from step 2 in the input parameters of this action
Optionally create a Clear button that calls 'Signature_Clear'
Add some basic styling to your stylesheet (see next section)

Basic styling:

SignaturePad has no built in styles, it's up to the consumer to choose how to better display the Pad for each use case. The basic recommended styles are:

.signature-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

To style the container you can do something like:

.signature-container {
  border: 1px solid var(--color-neutral-6);
  width: 100%;
  height: 300px; 
}

Advanced use cases:

A demo is being worked on to show some advanced use cases. Thank you for your patience!

Tips and tricks:

To check if the user has signed, use the 'Signature_IsEmpty' client action instead of exporting and checking if the output of the export.
If you're exporting as a DataUrl, you can set choose the format of the image e.g. png or jpeg.
When exporting to jpeg, it's possible to define a `Quality` (0-1).
When exporting to jpeg, you should use a non-transparent color e.g. "rgb(255,255,255)" in `SignatureOptions.BackgroundColor`

1.1.2

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.

Because this is a simple sample, in the SignaturePadDone has only one assign to change the value of the local variable IsDone to True.
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.