Skip to content

InlineSignatureCapture

Inline 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.

Inline 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.

InlineSignatureCapture Properties

Property Type Required Default
Caption string Optional
HelperText 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 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. (Android Only)

  • type: string

HelperText

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

  • 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. (Android Only)

  • type: boolean
  • default: false

ShowUnderline

Show the underline in the Signature Pad. (Android Only)

  • type: boolean
  • default: true

ShowXMark

Show the X Mark on the Signature Pad. (Android Only)

  • type: boolean
  • default: true

Styles

Set styles for Background, Caption and SignatureCapture and SignatureCaptureUnderline.

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

Background

The string value is a style class name for Background.

Caption

The string value is a style class name for Caption. (Android Only)

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. (Android Only)

  • 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 with following properties.
Property Type Required Default
contentType string Required
content string Required

contentType

Content type of the captured signature image, its value is always image/png.

content

Binary data of the captured signature image.


WatermarkText

The watermark text will be displayed in the captured image. (Android Only)

  • type: string

WatermarkTextMaxLines

The maximum lines of watermark text will be displayed in the captured image. (Android Only)

  • type: integer
  • default: 5

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.FormCell.InlineSignatureCapture"

validationProperties

The validation view properties. (iOS Only)


Examples

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.InlineSignatureCapture",
        "_Name": "InlineSignatureCaptureFormCell",
        "Caption": "Add Inline Signature",
        "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": "InlineSignatureCaptureFormCellBackground",
          "Caption": "InlineSignatureCaptureFormCellCaption",
          "SignatureCapture": "MyInlineSignatureCaptureClass",
          "SignatureCaptureUnderline": "MyInlineSignatureCaptureUnderlineClass"
        },
      }]
    }]
  }]
}

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

Style Classes Definition

/* InlineSignatureCapture Form Cell - Background */
.InlineSignatureCaptureFormCellBackground {
  background-color: yellow;
}

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

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

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