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 signature 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

bind

label

label

required

required

Advanced Attributes

align-content

align-content

align-controls

align-controls

align-label

align-label

control-order

control-order

dialog-title

Version compatibility

dialog-title was introduced in version 4.88.0 of the JourneyApps Runtime.

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

Default: "Sign here"

Override the title that is displayed at the top of the dialog when capturing a signature.

main.view.xml

<capture-signature label="Add a signature" bind="my_signature" dialog-title="Custodian signature" required="true" />   

disabled

disabled

fullwidth

Optional

Type: boolean

Default: false

Specify whether the signature preview should span the full width of the available screen space.

capture-signature

<capture-signature bind="authorization_sig" label="Authorized" fullwith="true"/>

display-signature

<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.

icon-position

id

id

label-case

Version compatibility

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

label-case

label-color

label-color

on-change

on-change

orientation

Version compatibility

• orientation was introduced in version 4.88.0 of the JourneyApps Runtime and is supported on mobile platforms: Android and iOS.

• Container version 23.5.1 or later is required for this feature on iOS, and is recommended for Android.

Optional

Type: auto | landscape | portrait

Default: auto

Lock the orientation of the draw-pad for capturing a signature.

When orientation is set to landscape or portrait, the draw-pad will always display in the specified orientation, regardless of the orientation of the device. When orientation is set to auto, or not specified, the orientation of the draw-pad mirrors the orientation of the device.

show-if and hide-if

show-ifhide-if

Component Methods

The following component methods are available when an id is assigned to the component and component.captureSignature({id:'my-id'}) / component.displaySignature({id:'my-id'}) is called from JS/TS:

captureMedia

Programmatically open the signature dialog that allows the user to sign.

try {
    component.captureSignature({id: 'my-id'}).captureMedia();
} catch (e) {
    // handle exception here
}

closeMedia

Programmatically close the signature preview.

capture-signature

try {
    component.captureSignature({id: 'my-id'}).closeMedia();
} catch (e) {
    // handle exception here
}

display-signature

try {
    component.displaySignature({id: 'my-id'}).closeMedia();
} 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.

openMedia

Programmatically open the signature preview.

capture-signature

try {
    component.captureSignature({id: 'my-id'}).openMedia();
} catch (e) {
    // handle exception here
}

display-signature

try {
    component.displaySignature({id: 'my-id'}).openMedia();
} catch (e) {
    // handle exception here
}

scrollIntoView

Programmatically scroll until the capture-signature / display-signature component is visible in the view.

capture-signature

try {
    component.captureSignature({id: 'my-id'}).scrollIntoView();
} catch (e) {
    // handle exception here
}

display-signature

try {
    component.displaySignature({id: 'my-id'}).scrollIntoView();
} catch (e) {
    // handle exception here
}