You are here: User interface > User interface rules > Harness and section forms > Customizing a Signature Capture control

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 Signature Capture control 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.
Identifiers
Tour ID	Optional: Provide an ID for use in a guided tour. Use a combination of numbers, letters, and underscores. Pega Platform uses the Tour ID when it finds an anchor button during a tour stop anchor point.
Test ID	Optional. If authorized, you can provide a unique Test ID for use in your test suite in order to support better automated testing against any Pega application. When creating a control that supports Test ID, the Test ID field is initially blank. Use a combination of numbers, letters, and underscores, or click the Generate ID button to create a time stamp as a unique ID. The attribute data-test-id is then generated for the selected element. When you save an existing section, any supported controls that do not have a Test ID will have one automatically generated. You can override these with a custom ID at a later time. Once generated, you can view your Test ID in HTML or display it in the Live UI panel. You also have the option to have all controls that support Test IDs in a ruleset updated in bulk. A standard, out-of-the-box developer role, PegaRULES:SysAdm4, includes the privilege for Test ID. To disable Test ID for this role, modify the pxTestID privilege.

Presentation

Allows you to change the advanced presentation options via the following fields:

Edit options	Selects the edit options for the Signature Capture control: Auto - whether the control is read-only or can be edited is inherited from the parent section it appears in. It will be read-only if it is placed in a read-only section. It will be editable if placed in a section that can also be edited. Read-only (expression) - the control will be read-only only if a defined expression holds true. Read-only (when rule) - the control will be read-only only if a defined when rule holds true. Editable - the control is always editable - including when it is placed in a read-only section.
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 action	Hides the default Accept action in the control. Selecting this option is useful when creating a custom Accept button.
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 check box is selected.
Label format	Specifies the format for the label. Only visible when the Include a label check box is selected.

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.

For more information, see CSS helper classes.

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

An example of a custom style sheet for the Signature Capture control is shown below:

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

Open topic with navigation