Signature Pad

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

Maestro comes with the Signature Pad component enabling a form user to sign an application form digitally. This component allows the user to create a signature by drawing it on the pad, saving it, clearing the pad to redraw the signature, or canceling it. The image below shows how the Signature Pad component appears on a rendered form.

Maestro signature pad component

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Signature Pad component within the Business Data folder.
  3. Drag the component into the View pane or the Wireframe.
    Maestro signature pad component
  4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Signature Pad component:

Sign Text
Text
signText

The text used for empty signature box

Sign Icon
Icon
signIcon

The icon used for empty signature box

Signature Name
Field Ref Map
signatureNameRef

Map form's field references for first, middle and last names that is displayed in the rendered Signature Pad component.

  1. Click 3 Field References to map up-to 3 field references in the Signature Name for Signature Pad window.
  2. Drag and drop a field from the Navigation bar to the Field Reference column against a Key you want to map. Repeat it for other references if needed.
  3. Click Save to update the mapping.
  4. Preview the form and Click to Sign to test the Signature Pad.
    You can now see the first and last names appear at the bottom left corner of the component.
Include Date
Boolean
includeDate

Select the Include Date checkbox to show the date when the user signs the form at the bottom left corner of the component, as shown above.

Note

Every time the user updates a signature, the signature timestamp (data.signaturePad.signatureDate) is updated. You can reference this value in other JavaScript code by right-clicking the Signature Pad component in Code View and selecting Signature Date.

Date Format
Date
dateFormat

Enter the date format that is used to render the date and time when the form is signed, for example dd/MM/yyyy HH:mm. The default is dd/MM/yyyy.

Help Text

Popover Help Text
Help Text
helpText

Popout Config

Dialog Title
Text
dialogTitle

The title to display on the signature pad dialog

Cancel Button Label
Text
cancelButtonLabel

The cancel button label

Cancel Button Icon
Icon
cancelButtonIcon

The icon used for the cancel button.

Clear Button Label
Text
clearButtonLabel

The clear button label

Clear Button Icon
Icon
clearButtonIcon

The icon used for the clear button.

Save Button Label
Text
saveButtonLabel

The save button label

Save Button Icon
Icon
saveButtonIcon

The icon used for the save button.

Next, learn about the Button component.