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 Optional
CapturedStatusText string Optional
InitialStatusText string Optional
IsVisible boolean Optional true
OnValueChange ActionOrRule Optional
ShowTimestampInImage boolean Optional false
ShowUnderline boolean Optional true
ShowXMark boolean Optional true
Styles object Optional
TimestampFormatter string Optional
Value string Optional
WatermarkText string Optional
WatermarkTextMaxLines integer Optional 1
_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

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.


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

Background

The string value is a style class name for Background.

Value

The string value is a style class name for Value.

Caption

The string value is a style class name for Caption.

SignatureCapture

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

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

SignatureCaptureUnderline

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

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


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. The JavaScript Object contains 2 properties. First property is contentType, its value is always images/png; the second property is content, and its value is binary data of the captured signature image.

  • type: string

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. This property is only applicable to the Android platform.

  • type: integer
  • default: 1

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"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",
        "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: UIFontTextStyleBody;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* SignatureCapture Form Cell - Value */
.SignatureCaptureFormCellValue {
  background-color: #0000FF;
  color: black;
  font-style: UIFontTextStyleBody;  /* 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;
}