Perspective - Signature Pad

Component Palette Icon:

Description

The Signature Pad component enables users to draw a signature and submit it. Submitting a signature triggers a component event, enabling Ignition to do something with the signature.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
enabled	Enables the canvas, clear button, and submit button. When enabled, component scripting functions for clearSignature and submitSignature are also enabled.	value: boolean
pad	Settings for the pad. pen: Settings for the pen. color: Color used to draw the lines with the pen. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference. width: Width (in pixels) of the line drawn by the pen. Value is numeric. canvas: Settings for the canvas. clearColor: Color used to paint over the signature pad when cleared. Default is transparent. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference. style: Sets a style for this property. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	value: object
actionBar	Settings for the actionBar. position: Action bar position relative to the canvas. Options are top, bottom, left, or right. Default is bottom. Value is string. submitButton: Settings for the submit button. text: Text to display on the button. Default is submit. Value is string. enabled: Enables submit button interaction. This does not affect the submitSignature component scripting function. Value is boolean. primary: Toggle between the default primary and secondary button style. Value is boolean. style: Sets a style for this property. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. clearButton: Settings for the clear button. text: Text to display on the button. Default is clear. Value is string. enabled: Enables clear button interaction. This does not affect the submitSignature component scripting function. Value is boolean. primary: Toggle between the default primary and secondary button style. Value is boolean. style: Sets a style for this property. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. style: Sets a style for this property. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	value: object
status	Settings for the status of the component. touched: True when the signature pad contains a signature. Value is boolean.	object
style	Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

The Signature Pad component also has Component Events and Functions associated with it. See the Perspective - Signature Pad Scripting page for more information.

Examples

Example 1

In this example we set a few properties to customize the look of the Signature Pad. The buttons are on the left. The blue background is set with the prop.canvas.clearColor property, which enables the color to show up in our project but not get saved as part of the signature. Lastly, we put two Label components above and below the Signature Pad with signing instructions.

Property	Value
props.enabled	true
props.canvas.clearColor	#DAF9FF
props.actionBar.position	left
props.actionBar.submitButton.text	Submit
props.actionBar.submitButton.enabled	true
props.actionBar.submitButton.primary	true
props.actionBar.submitButton.style.fontFamily	Merriweather
props.actionBar.clearButton.text	Clear
props.actionBar.clearButton.enabled	true
props.actionBar.clearButton.primary	true
props.actionBar.clearButton.style.fontFamily	Merriweather
props.style.borderStyle	dashed
props.style.borderwidth	1pt

Example 2

The following example downloads the signature image when a user clicks the Submit button on the component.

To set this up, do the following:

1. Drag a Signature component onto a Perspective view. Make sure it's a view that has a URL.

2. Right-click on the component and select Configure Events.

   

3. Select the OnSignatureSubmitted event.

4. Click the Add icon and select Script.

5. In the Configure Script Action box, add the following script:

   #Downloads a signature file.
   
   image = event.signatureFile.getBytes()
   system.perspective.download("Signature.PNG", image)

   

6. Click OK to save the script.

7. Save your project.

8. Open a Perspective Session with the view that has the Signature Pad component.

9. Sign the component and click Submit.

   

10. An image file is saved to your computer. In this example, we're running Ignition on Windows. The file Signature.PNG appears in our Downloads folder: