Skip to main content

Signature (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Signature widget gives users a pad to draw a signature. It saves the drawing as a PNG data URI. Use it for approvals, consent forms, and delivery confirmations.

Widget type: WDS_SIGNATURE_WIDGET

Signature widget in a Responsive app
Signature widget

Content properties​

These properties appear in the Content tab of the property pane.

Label​

Text string​

Sets the label of the widget. Default: Label.

Validations​

Required boolean​

Makes a signature required. When it is on and the pad is empty, isValid is false. Default: off.

General​

Tooltip string​

Shows help text or details next to the label.

Pen color string​

Sets the color of the pen as a hex string, such as #2E3D49. Takes #rrggbb or #rrggbbaa. Leave it empty to use the theme's text color.

Background color string​

Sets the background of the pad as a hex string, such as #FFFFFF. Takes #rrggbb or #rrggbbaa. The saved PNG includes this background. Leave it empty for a transparent background.

Visible boolean​

Controls whether the widget is visible. Default: on.

Disabled boolean​

Stops users from drawing on the pad. Default: off.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Events​

onSignatureChange​

Sets the action that runs when the signature changes. See Events.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{Signature1.isVisible}}. You cannot set them directly.

value string​

Holds the signature as a PNG data URI. It is empty when the pad is empty.

Example:

{{Signature1.value}}

isValid boolean​

Shows whether the widget is valid. If Required is on, it is true only when the pad has a signature. If Required is off, it is always true.

Example:

{{Signature1.isValid}}

isVisible boolean​

Shows whether the widget is visible.

Example:

{{Signature1.isVisible}}

isDisabled boolean​

Shows whether the widget is disabled.

Example:

{{Signature1.isDisabled}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

You cannot set a signature from code. Only a user can draw one. To clear the pad, use resetWidget("Signature1").

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

Signature1.setVisibility(false)

setDisabled (param: boolean): Promise​

Turns the widget on or off.

Example:

Signature1.setDisabled(true)

Events​

onSignatureChange​

Runs when a user finishes a stroke or clears the signature. Read the new value in {{Signature1.value}}.