capture-signature
Overview
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
bindbind
label
labellabel
required
requiredrequired
Advanced Attributes
align-content
align-contentalign-content
align-controls
align-controlsalign-controls
align-label
align-labelalign-label
control-order
control-ordercontrol-order
dialog-title
dialog-title
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.
<capture-signature label="Add a signature" bind="my_signature" dialog-title="Custodian signature" required="true" />
disabled
disableddisabled
fullwidth
fullwidth
Optional
Type: boolean
Default: false
Specify whether the signature preview should span the full width of the available screen space.
<capture-signature bind="authorization_sig" label="Authorized" fullwith="true"/>
icon-position
icon-positionicon-position
id
idid
label-case
label-caselabel-case
label-color
label-colorlabel-color
on-change
on-changeon-change
orientation
orientation
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-ifshow-if
and hide-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
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
closeMedia
Programmatically close the signature preview.
try {
component.captureSignature({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
deleteMedia
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
openMedia
Programmatically open the signature preview.
try {
component.captureSignature({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
scrollIntoView
scrollIntoView
Programmatically scroll until the capture-signature
/ display-signature
component is visible in the view.
try {
component.captureSignature({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}
Last updated