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`	Optional
CapturedStatusText	`string`	Optional
HelperText	`string`	Optional
InitialStatusText	`string`	Optional
IsVisible	`boolean`	Optional	`true`
OnValueChange	ActionOrRule	Optional
Separator	`boolean`	Optional	`true`
ShowTimestampInImage	`boolean`	Optional	`false`
ShowUnderline	`boolean`	Optional	`true`
ShowXMark	`boolean`	Optional	`true`
Styles	`object`	Optional
TimestampFormatter	`string`	Optional
Value	`object`	Optional
WatermarkText	`string`	Optional
WatermarkTextMaxLines	`integer`	Optional	`5`
_Name	`string`	Required
_Type	`const`	Required
validationProperties	ValidationProperties	Optional

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.

type: ActionOrRule
Formatter and Binding are not supported

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
Background	string	Optional
Value	string	Optional
Caption	string	Optional
SignatureCapture	string	Optional
SignatureCaptureUnderline	string	Optional

Background¶

The string value is a style class name for Background.

Background style class

Value¶

The string value is a style class name for Value.

ValueInput style class

Caption¶

The string value is a style class name for Caption.

Caption style class

SignatureCapture¶

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

SignatureCapture style class

SignatureCaptureUnderline¶

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

SignatureCaptureUnderline style class

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 equal to:

"Control.Type.FormCell.SignatureCapture"

validationProperties¶

The validation view properties.

type: ValidationProperties

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