Signature

Signature allows users to put their signature on the screen using a touchscreen or a mouse.

Signature comes with appearance and behavior configuration options.

Configuration properties

Set or modify configuration properties for the control, such as behavior and appearance properties, in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Signature control are shown in the following table:

Table 1. Appearance configuration properties for the Signature control
Appearance configuration property	Description	Data type
Color style	Specifies a color style for the signature box. The colors correspond to variables in the specified theme.	`String`
Border width	Specifies the thickness of the signature box border in pixels.	`String`
Border radius	Specifies the roundness of the signature box corners in pixels.	`String`
Box shadow	When selected, adds a background shadow to the signature box.	`Boolean`
Width	Specifies the width of the signature box in pixels, percents, or em units. For example: `400px` or `50%` or `30em`. If only a number is specified without any unit, the number is interpreted as the number of pixels.	`String`
Height	Specifies the height of the signature box in pixels or em units. For example: `150px` or `20em`. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no height is specified.	`String`

The behavior configuration properties for the Signature control are shown in the following table:

Table 2. Behavior configuration properties for the Signature control
Behavior configuration property	Description	Data type
Ink color	Specifies the color of the signature in color names, hexadecimal codes, or RGB values. It must be a valid CSS color.	`String`

Example

In this example, the following behavior and appearance configuration properties are set for the Signature control:

Ink color is set to Green.
Color style is set to Default.
Border width is set to 5px.
Border radius is set to 5px.
Box shadow is selected.
Width is set to 300px.
Height is set to 75px.

These properties and their values result in a signature box that looks like the following figure:

Image of a signature box

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events.

The Signature control has the following types of event handlers:

On load: Activated when the page loads.
On change: Activated when there is a change in the signature control.

Methods

For detailed information on the available methods for the Signature control, see the Signature JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.