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