An HTML content command that, when evaluated, becomes a canvas input primarily intended for capturing signature images. Signature can be drawn, typed with keyboard or uploaded from local device.
Signature command produces a File value that is the user-created image.
Attributes
|
name |
|
|
|---|---|---|
|
Required |
Value type |
EL-evaluated |
|
No |
String |
Yes |
|
Defines the name of the variable that will hold the File value produced by the input. |
||
Styles
|
Class |
Description |
Default value |
|---|---|---|
|
group |
Parent element for all signature elements. |
text-align:center |
|
dynScreenSignature |
Div element into which the signature canvas is rendered. |
text-align:center |
|
jSignature |
Canvas on which the signature is drawn. "!important" property is required for custom styles to take effect. |
border: 1px solid lightgray !important |
|
dyn-signature-tab-container |
Div that serves as a container for draw, type and upload signature tabs. |
display: flex
|
|
dyn-signature-tab |
General class that applies to all three of the tabs. |
background-color: #f4f6f9
|
|
dyn-signature-tab-active |
Class that is applied to currently selected tab. |
background-color: #DCDCDC |
|
ID |
Description |
Default value |
|---|---|---|
|
dyn-typed-signature-style |
ID for the typed signature. Can receive values for font, font-size and font color. Custom fonts must be imported to the template before use. |
font-family: 'Yellowtail'
|
|
sig-tab-draw |
ID for the draw signature tab. |
|
|
sig-tab-type |
ID for the type signature tab. |
|
|
sig-tab-upload |
ID for the upload signature tab |
|
|
sig-button-reset |
ID for the reset drawn signature button. |
|
|
dyn-signature-input |
ID for the typed signature input field. |
margin: auto |
Examples
The signature input is very simple to set up. Just give it a name and its ready to accept users' signatures or other drawings.
<dyn-signature name="sig">Signature Canvas</dyn-signature>
To get default look apply these styles to the signature elements.
.dynScreenSignature {text-align:center;}.jSignature {border:1px solid lightgray !important;}.dyn-signature-tab-container {display: flex;justify-content: center;}.dyn-signature-tab {background-color: #f4f6f9;border: 1px solid grey;border-radius: 5px;cursor: pointer;display: inline-block;padding: 0.6em 3em;text-align: center;}.dyn-signature-tab-active {background-color: #DCDCDC;}#dyn-typed-signature-style {font-family: 'Yellowtail';font-size: 50px;color: black;}#sig-tab-draw {}#sig-tab-type {}#sig-tab-upload {}#sig-button-reset {}#dyn-signature-input {margin: auto;}