Skip to content

SignatureCapture

Signature Capture control allows app to capture user's signature. The captured signature is kept in png format binary and must be persisted by the apps to their back end system.

Signature Capture does not allow loading or modifying a previously captured signature. Users must always sign a new signature to replace existing one. App should use Image Collection for displaying an existing signature image.

SignatureCapture Properties

Property Type Required Default
Caption string No
CapturedStatusText string No
HelperText string No
InitialStatusText string No
IsVisible boolean No true
OnValueChange ActionOrRule No
Separator boolean No true
ShowTimestampInImage boolean No false
ShowUnderline boolean No true
ShowXMark boolean No true
Styles object No
TimestampFormatter string No
Value object No
WatermarkText string No
WatermarkTextMaxLines integer No 5
_Name string Yes
_Type const Yes
validationProperties ValidationProperties No

Caption

The caption label of this control.

  • type: string

CapturedStatusText

The text will be displayed after the signature is captured.

  • type: string

HelperText

Helper text to be displayed if there is no validation view.

  • type: string

InitialStatusText

The text will be displayed before the signature is captured.

  • type: string

IsVisible

The control will be displayed on the page by default. It will be hidden if set to false.

  • type: boolean
  • default: true

OnValueChange

Action or rule to perform after value changed.


Separator

Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

  • type: boolean
  • default: true

ShowTimestampInImage

The datetime will be displayed in the captured image.

  • type: boolean
  • default: false

ShowUnderline

Show the underline in the Signature Pad.

  • type: boolean
  • default: true

ShowXMark

Show the X Mark on the Signature Pad.

  • type: boolean
  • default: true

Styles

Set styles for Background, Caption and Value.

  • type: object with following properties.
Property Type Required Default
Background string No
Value string No
Caption string No
SignatureCapture string No
SignatureCaptureUnderline string No

Background

The string value is a style class name of Background.

Value

The string value is a style class name of Value.

Caption

The string value is a style class name of Caption.

SignatureCapture

The style class name defined in a less file for configuring signature pad's properties.

SignatureCaptureUnderline

The stye class name defined in a less file for configuring the underline of signature pad.


TimestampFormatter

Set DateTime format pattern string for the timestamp on the captured image, it takes effect only when ShowTimestampInImage is set to true. Example: yyyy-MM-dd. It must follow the date and time formatter pattern. For the iOS platform, please refer to the Date_Format_Patterns; for the Android platform, please refer to the Date Time Pattern.

  • type: string

Value

This is a read-only property that contains the captured signature value. It contains undefined if no signature is captured; otherwise it contains a JavaScript Object.

  • type: object

WatermarkText

The watermark text will be displayed in the captured image.

  • type: string

WatermarkTextMaxLines

The maximum lines of watermark text will be displayed in the captured image.

  • type: integer
  • default: 5

_Name

  • type: string

_Type

  • type: const

The value of this property must be:

"Control.Type.FormCell.SignatureCapture"

validationProperties

The validation view properties.


Examples

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.SignatureCapture",
        "_Name": "SignatureCaptureFormCell",
        "Caption": "Add Signature",
        "InitialStatusText": "Please capture a signature",
        "CapturedLabel":"Signture is Captured!",
        "ShowTimestampInImage": false,
        "ShowXMark": true,
        "ShowUnderline": true,
        "WatermarkText": "This is watermark text",
        "WatermarkTextMaxLines": 3,
        "TimestampFormatter": "yyyy-MM-dd",
        "HelperText": "This is helper text",
        "OnValueChange": "/MyMDKApp/Actions/ShowMessage.action",
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        },
        "Styles": {
          "Background": "SignatureCaptureFormCellBackground",
          "Caption": "SignatureCaptureFormCellCaption",
          "Value": "SignatureCaptureFormCellValue",
          "SignatureCapture": "MySignatureCaptureClass",
          "SignatureCaptureUnderline": "MySignatureCaptureUnderlineClass"
        },
      }]
    }]
  }]
}

See the examples in ODataService CreateMedia and ODataService UploadStream for how to upload the captured signature to your OData Service.

Style Classes Definition

/* SignatureCapture Form Cell - Background */
.SignatureCaptureFormCellBackground {
  background-color: yellow;
}

/* SignatureCapture Form Cell - Caption */
.SignatureCaptureFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* SignatureCapture Form Cell - Value */
.SignatureCaptureFormCellValue {
  background-color: #0000FF;  /* iOS Only */
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

.MySignatureCaptureClass {
  background-color: #ff0000;
  stroke: #00ff00;
  stroke-width: 12;
}

.MySignatureCaptureUnderlineClass {
  stroke: #0000ff;
  stroke-width: 3;
}