Customizing a Signature capture control
The Cell Properties dialog for the Signature capture control consists of the following tabs. You can 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 Signature capture control is displayed via the following fields:
| ||||||||||||||||
| Presentation | Allows you to change the advanced presentation options via the following fields:
|
Advanced Presentation Options
Instead of creating a new custom format in the skin, you can adjust elements in a cell by applying Cascading Style Sheet (CSS) helper classes. For example, you can use a CSS helper class to center an element in a cell or to double the standard right margin for the element.
- Cell read-write classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-write mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.
- Cell read-only classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-only mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.
- Inline style (not for production use) – You can use this field to define an inline style by entering CSS code. However, entering an inline style results in a guardrail warning. For maintainability and reuse, the recommended approach is to use read-write or read-only classes.
CSS styling options
This control contains border, background and base 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 - Included Styles 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
The following example shows a custom style sheet for the Signature capture control:
*****************************************
* Base styles for signature pad control *
*****************************************
.signature-da-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.
- Keystores
A keystore is a file that contains keys and certificates that you use for encryption, authentication, and serving content over HTTPS. In Pega Platform, you create a keystore data instance that points to a keystore file.
- harnesses
Organize the content and structure of a portal by defining harnesses. By populating harnesses with sections, you can build a modular interface that promotes reuse and maintainability.
- Sections
Sections are the building blocks of your user interface. You can populate a section with components, such as fields and controls, to create a functional chunk of user interface that can be reused in different contexts for improved consistency and efficient development.
- Adding a Signature capture control
You can add the Signature capture control to a cell, enabling users to capture a user signature, either through a mouse input or through a touch interaction on a mobile device. This control works when used in the context of a work object. Interacting with this control in an application occurs by displaying a field inline where a signature can be s
Previous topic Adding a Signature capture control Next topic Adding a Tooltip