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¶

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.

Background¶

The string value is a style class name of Background.

• Background style class

Caption¶

The string value is a style class name of 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

Validation¶

The validation view properties.

• type: Validation

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.

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:

"Control.Type.FormCell.InlineSignatureCapture"

validationProperties¶

Deprecated. Please use Validation property. 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.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",
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "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;
}

/* Validation view */
.ValidationView {
  background-color: #83AF9B;
  border-top-color: #ff00ee;
}

/* Validation message */
.ValidationMessage {
  font-size: 16;
  font-color: #0000ff;
}