Links

capture-signature

Overview

Version compatibility
The capture-signature component was visually updated in version 4.74.0 of the JourneyApps Runtime.
Allows users to capture a signature digitally.

Using signatures

Signatures are captured as SVG's with a path that describes it. That path can be accessed using toText():
// Get the SVG text of the signature as XML
// Assuming the name of the singature is `captured_sig`
var signatureSVG = view.captured_sig.toText();
Signatures can also be printed using a Zebra bluetooth printer (see docs) directly from version 4.34.4 of the JourneyApps container. The Zebra printer uses a language called ZPL, so we can convert the signature to ZPL by using:
// Get the SVG text of the signature as ZPL
// Assuming the name of the signature is `captured_sig`
var signatureSVG = view.captured_sig.toZPL();

Basic Example

<var name="my_signature" type="signature" />
<capture-signature label="Add a signature" bind="my_signature" required="true" />

Standard Attributes

bind

label

required

Advanced Attributes

align-content

align-controls

align-label

control-order

disabled

fullwidth

Optional
Type: boolean
Default: false
Specify whether the signature preview should span the full width of the available screen space.
capture-signature
display-signature
<capture-signature bind="authorization_sig" label="Authorized" fullwith="true"/>
<capture-signature bind="authorization_sig" label="Authorized" fullwith="true"/>

icon-position

Version compatibility
icon-position was introduced in version 4.86.1 of the JourneyApps Runtime.

label-case

Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

label-color

on-change

show-if and hide-if

Component Methods

The following component methods are available when assigning an id to the component and evoking using component.captureSignature({id:'my-id'}).

captureMedia

Programmatically open a signature dialog that enables the user to sign, and the signature stored to the variable the component is bound to.
try{
component.captureSignature({id: 'my-id'}).captureMedia();
}catch (e) {
// handle exception here
}

deleteMedia

Programmatically clear a captured signature.
try{
component.captureSignature({id: 'my-id'}).deleteMedia();
}catch (e) {
// handle exception here
}
deleteMedia will trigger an on-change if a function is assigned to it.
Last modified 1mo ago