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

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.

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 SignatureCapture and SignatureCaptureUnderline.

type: object with following properties.

Property	Type	Required
Background	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

Caption¶

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

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

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.InlineSignatureCapture"

validationProperties¶

The validation view properties. (iOS Only)

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.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: body;  /* 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;
}