SignatureCapture Widget
A SignatureCapture widget enables you to capture a signature on a form, and save it as an image for easy uploading.
SignatureCapture widget can be used only in Windows platform.
To use a SignatureCapture widget, follow these steps:
- From the Project explorer, navigate to the Forms of desired channel type.
- From the platform selection drop-down, select Windows 8: Native or Windows 8: Web or Desktop: Windows, as required.
- In the Default Library, click on the search icon. In the search bar, enter SignatureCapture.
- From the result, drag and drop the SignatureCapture widget onto the form in the canvas.
Following are the real-time use cases of SignatureCapture widget:
-
SignatureCapture widget is widely used in uploading signatures while filling job applications.
-
To apply for finance to buy a car or a house, you need to fill the loan application, submit the documents of proof, and upload your signature.
-
While applying for a Life Insurance policy, you need to upload your signature along with a few documents of proof.
-
SignatureCapture widget could be used as a proof of courier delivery.
The SignatureCapture widget capabilities can be broadly categorized into the following:
- Layout
- Animations
- Data Management
- 3D Touch
- User Input
- Enabling RTL
- Miscellaneous
- Configurations Common To All Widgets
Layout
| Events | Description |
|---|---|
| doLayout | Invoked for every widget when the widget position and dimensions are computed. |
| Properties | Description |
|---|---|
| anchorPoint | Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space. |
| penWidth | Specifies the width of the stroke lines of a signature. You can enter a value between 1-10 inclusive. |
| bottom | Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container. |
| centerX | Determines the center of a widget measured from the left bounds of the parent container. |
| centerY | Determines the center of a widget measured from the top bounds of the parent container. |
| height | Determines the height of the widget and measured along the y-axis. |
| left | Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container. |
| maxHeight | Specifies the maximum height of the widget and is applicable only when the height property is not specified. |
| maxWidth | Specifies the maximum width of the widget and is applicable only when the width property is not specified. |
| minHeight | Specifies the minimum height of the widget and is applicable only when the height property is not specified. |
| minWidth | Specifies the minimum width of the widget and is applicable only when the width property is not specified. |
| right | Determines the lower right corner of the widget and is measured from the right bounds of the parent container. |
| skin | Specifies a background and pen color skin for SignatureCapture widget. |
| top | Determines the top edge of the widget and measured from the top bounds of the parent container. |
| width | Determines the width of the widget and is measured along the x-axis. |
| zIndex | Specifies the stack order of a widget. |
Animations
| Methods | Description |
|---|---|
| animate | Applies an animation to the widget. |
| Properties | Description |
|---|---|
| transform | Contains an animation transformation that can be used to animate the widget. |
Data Management
| Methods | Description |
|---|---|
| clear | Enables you to clear the area where a signature is captured. |
| When this method is used on a container widget, then all the widgets inside the container are cloned. | |
| save | Saves the signature as an image and executes onCapture callback. |
| Events | Description |
|---|---|
| onCapture | Invoked when the user captures the signature and clicks on a button or image where the save method is called. |
3D Touch
| Methods | Description |
|---|---|
| registerForPeekandPop | Registers a widget to enable 3D Touch peek and pop gestures. |
| setOnPeek | Sets and overrides the existing onPeekCallback for the widget. |
| setOnPop | Overrides the existing onPopCallback for the widget. |
| unregisterForPeekandPop | Unregisters a widget from 3D Touch peek and pop gestures. |
User Input Handling
| Events | Description |
|---|---|
| onTouchEnd | Invoked by the platform when the user touch is released from the touch surface. |
| onTouchMove | Invoked by the platform when the touch moves on the touch surface continuously until movement ends. |
| onTouchStart | Invoked by the platform when the user touches the touch surface. |
| Methods | Description |
|---|---|
| removeGestureRecognizer | Allows you to remove the specified gesture recognizer for the specified widget. |
| setGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
Enabling RTL
| Properties | Description |
|---|---|
| retainContentAlignment | Helps to retain the content alignment of the widget while applying RTL. |
| retainFlexPositionProperties | Helps to retain the left, right and padding properties while applying RTL. |
| retainFlowHorizontalAlignment | Enables you to change the horizontal flow of the widget from left to right. |
Miscellaneous
| Methods | Description |
|---|---|
| getBadge | Enables you to read the badge value (if any) attached to the specified widget. |
| setBadge | Enables you to set the badge value to the given widget at the upper, right corner of the widget. |
| Properties | Description |
|---|---|
| accessMode | Specifies how the captured image must be stored. |
| rawBytes | Specifies the rawbytes representing an Image that is returned from SignatureCapture. |
Configurations Common To All Widgets
| Methods | Description |
|---|---|
| convertPointFromWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| convertPointToWidget | Allows you to convert the coordinate system from a point (receiver's coordinate system) to a widget. |
| removeFromParent | Allows you to remove a child widget from a parent widget. |
| setEnabled | Specifies the widget that must be enabled or disabled. |
| setFocus | Specifies the widget on which there must be focus. |
| setVisibility | Use this method to set the visibility of the widget. |
| Properties | Description |
|---|---|
| enableCache | Enables you to improve the performance of Positional Dimension Animations. |
| id | A unique identifier of SignatureCapture consisting of alpha numeric characters. |
| info | A custom JSObject with the key value pairs that a developer can use to store the context with the widget. |
| isVisible | Controls the visibility of a widget on the form. |
| parent | Helps you access the parent of the widget. |
SignatureCapture Widget Basics
NOTE: This widget is only supported on Windows platform.
Creating a Signature Using a Constructor: kony.ui.SignatureCapture
var mysignature = new kony.ui.SignatureCapture(basicConf, layoutConf, pspConf);
- basicConf is an object with basic properties.
- layoutConf is an object with layout properties.
- pspConf is an object with platform specific properties.
NOTE: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.
Example
//Defining the properties for a SignatureCapture.
var signatureBasic = {
id: "signature",
info: {
key: "signature"
},
skin: "signatureSkin",
isVisible: true,
penWidth: 3
};
var signatureLayout = {
hExpand: false,
vExpand: true,
widgetAlignment: constants.WIDGET_ALIGN_TOP_LEFT,
containerWeight: 100
};
//Creating the SignatureCapture.
var signature = new kony.ui.SignatureCapture(signatureBasic, signatureLayout, {});
//signature clear method call.
signature.clear();Customizing Appearance
You can customize the appearance of the SignatureCapture widget using the following properties:
- widgetAlignment: Specifies the alignment of the widget.
- skin: Specify the skin to be applied to the SignatureCapture widget.
Important Considerations
The following are the important considerations for SignatureCapture:
- The padding and margin properties are not applicable for this widget.