Harness and Section forms
Customizing a Signature Capture control
The Cell Properties dialog for the Signature Capture control consists of the following tabs. It is also possible to create or modify CSS base styles for the control and create custom Accept/Clear buttons, as described in the subsequent sections, below. See also Adding a Signature Capture control.
Tab
|
Description
|
| General
|
Displays various configuration settings for how the map is displayed via the following fields:
| Signature name
|
Name of the Signature attachment. |
| Category
|
Attachment category of the Signature attachment (defaults to file). |
| Tooltip
|
Set a tooltip to display on a hover action. |
| Visibility
|
Select from the dropdown the conditions for whether the control appears based on user input. |
| Disable
|
Select from the dropdown the conditions for when to disable this field. |
|
| Presentation
|
Allows you to change the advanced presentation options via the following fields:
| Max width (px)
|
On desktops, defines the maximum width for the Signature Capture canvas in pixels. On mobile devices the canvas takes 100% width available to it. Default value is 700. |
| Min height (px)
|
Defines the height for the Signature Capture canvas in pixels. Default value is 100. |
| Hide default Accept/Clear actions
|
Hides the default Accept/Clear actions in the control. Selecting this option is useful when creating custom Accept/Clear buttons. |
| Include a label
|
Displays a text label for the control. |
| Label name
|
Defines the name for the label. Only visible when the Include a label checkbox is selected. |
| Label format
|
Specifies the format for the label. Only visible when the Include a label checkbox is selected. |
| Cell read-write classes
|
Specifies the cell read-write classes. |
| Cell read-only classes
|
Specifies the cell read-only classes. |
| Cell inline style
|
Specifies the cell inline style. |
|
CSS styling options
This control contains border, background and baseline styles. You can modify them via CSS by overriding the default values. The new style definition is added as a custom style sheet on the Additional CSS tab once you open the application skin - see Skin form - CSS tab, for more information. You can modify the following for the control:
- signature border thickness
- signature border color
- signature background color
- signature baseline thickness
- signature baseline color
An example of a custom style sheet for the Signature Capture control is shown below:
*****************************************
* Base styles for signature pad control *
*****************************************
.signature-pad-style{
border: 3px solid #2DA2CF; /* border of signature capture control */
background-color: #FFFFE6; /* background color of signature canvas */
}
.signature-baseline-style{
border : 1px solid #2DA2CF; /*thickness and color of signature pad baseline */
}
Using custom Accept/Clear buttons
To add your own custom icons for the Accept and Clear actions in the Signature Capture control, leverage a click action with a JavaScript event. Follow the instructions presented below.
- Make sure the Hide default Accept/Clear actions option is selected in the options for the control.
- Add two icons, for instance, within a section containing the Signature Capture control - each representing the Accept and Clear actions.
- Open the Cell Properties dialog for each icon and add an action of the Run Script type.
- Enter the following JavaScript function name in double quotes, for the action representing the Accept icon:
pega.ui.signature.acceptSignature
- Enter the following JavaScript function name in double quotes, for the action representing the Clear icon:
pega.ui.signature.clearSignature
- Make sure that for each function two parameters are defined: signature name and category - to uniquely identify a Signature Capture control on a screen.
Related information
Open topic with navigation