Using the signature input for electronic signature
Last updated
Last updated
Airkit makes it possible to collect a user's signature with the Signature Input. These signatures can be used where a user's signature is required, such as legal documents. For example, signing a housing lease contract or a work order.
The Signature input is under the Input section in the Add Control Dialog:
The signature input is a complex control that contains a place to draw the signature, clear the box, and save the drawn signature. By default, it is set up only for drawing a signature, but there is an option to set up a typed signature as well.
On the page with the signature control, add an Asset Variable named signature, a text variable named typed_signature, and another text variable named mode. Select the Signature control, click the + button to the right to add a Text Input. This will be for the text option.
In the Inspector, set the value to signature. This is an asset variable where the saved image of the drawn signature will be stored. Set the Init Mode to draw. This tells the control to start out expecting to received drawn input. The user can switch to text. Set the Signature value to typed_signature. This is the text variable where the typed value will be stored.
Under the style section, expand the Signature Input Variant to see the stylable parts of the component. Selecting pad, for example, style the actual drawing surface.
Select the Actions Tab in the Inspector. Add a Set Variable action and set the value of activity.modeto event.mode. This is setting the mode value to either "draw" or "type." Select the typed_signature input and under the Advanced Tab in the inspector, set the Is Visible value to:
This checks the current value of the mode for the signature mode and only displays the text input if the value is set to type.
Once the user clicks Save on the signature in draw mode, the signature is saved to the asset associated with the value of the signature pad. The save is not instantaneous but occurs pretty quickly. Once the save has been made, the asset will hold a pointer to the asset that is associated with the signed signature. See the Asset Documentation for information about each of the properties on the asset object.
To create a confirmation page on the lease signing, let's create another card. Copy the contract from the signature page and include an image web control. In the inspector set the URL to:
ASSET_TO_URI() gives an accessible URI for the asset provided. This will set the image URL to a valid URI that can be rendered on the web page. In addition to being rendered on screen, signatures can be attached to PDFs in Data Flows, or used anywhere else an asset may be used.
The Asset Data Type has more information on the properties of an asset.
Introduction to Data Flows has information on how to remit information like signatures.
