Skip to end of metadata
Go to start of metadata



General

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.

NameDescriptionProperty Type
enabledEnables 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.

 Click here to see the pad properties
NameDescriptionProperty Type
pen

Settings for the pen.

NameDescriptionProperty Type
colorColor 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.value: color
widthWidth (in pixels) of the line drawn by the pen.value: numeric
value: object
canvas

Settings for the canvas.

NameDescriptionProperty Type
clearColorColor 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.value: color
styleSets 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 classobject
value: object
value: object
actionBar

Settings for the actionBar.

 Click here to see the actionBar settings.
NameDescriptionProperty Type
positionAction bar position relative to the canvas. Options are top, bottom, left, or right. Default is bottom.value: sting
submitButton

Settings for the submit button.

NameDescriptionProperty Type
textText to display on the button. Default is submit.value: string
enabledEnables submit button interaction. This does not affect the submitSignature component scripting function.value: boolean
primaryToggle between the default primary and secondary button style.value: boolean
styleSets 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.object
object
clearButton

Settings for the clear button.

NameDescriptionProperty Type
textText to display on the button. Default is clear.value: string
enabledEnables clear button interaction. This does not affect the submitSignature component scripting function.value: boolean
primaryToggle between the default primary and secondary button style.value: boolean
styleSets 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.object
object
styleSets 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.object
value: numeric
status

Settings for the status of the component.

NameDescriptionProperty Type
touchedTrue when the signature pad contains a signature.value: 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
Scripting Functions
 .clearSignature()
  • Description

Clears the current signature on the component

  • Parameters

None

  •  Return

Nothing

  • Scope

Session

 .submitSignature()
  • Description

Submits the signature, triggering the onSignatureSubmitted component event.

  • Parameters

None

  •  Return

Nothing

  • Scope

Session

Perspective Component Events
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Component Events
 onSignatureSubmitted

Event is fired after the Gateway has received a submitted signature. 

Note: This component event is designed to be used in tandem with a run action script. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

 event.signature
  • Object Path

event.signature

  • Type

String  

  • Description

Base64-encoded PNG DataURL of the submitted signature. 

 event.signatureFile.name
  • Object Path

event.signatureFile.name

  • Type

String

  • Description

A name for the signature file.

 event.signatureFile.size
  • Object Path

event.signatureFile.size

  • Type

Integer

  • Description

The size of the signature image file in bytes.

 event.signatureFile.copyTo(filePath)
  • Object Path

event.signatureFile.copyTo()

  • Description

Saves the uploaded signature file at a location accessible to the Gateway.

  • Parameters

String filePath - The path to where the file should be saved on the Gateway.

  • Return

none

 event.signatureFile.getBytes()
  • Object Path

event.signatureFile.getBytes()

  • Description

Returns a bytearray of the image, allowing the signature file to be saved from the session (with system.perspective.download()). 

  • Parameters

none

  • Return

byteArray - The raw data of the incoming file.

 event.signatureFile.getString()
  • Object Path

event.file.getString()

  • Description

Fetches the incoming file data and attempts to parse it as a string via UTF-8 (Eight-bit UCS Transformation Format) encoding. Defaults to UTF-8 (super common), but can use other character sets. Passed as a string, for example getString("UTF_16BE).

  • Parameters

none

  • Return

byteArray - The raw data of the incoming signature file.

 onSignatureCleared

This event is fired when the Gateway has received a signal that the signature has been cleared.

Note: This component event is designed to be used in tandem with a run action script. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

 event
  • Object Path

event

  • Type

Null

  • Description

An empty event object.

Example



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. 

PropertyValue
props.enabledtrue
props.canvas.clearColor#DAF9FF
props.actionBar.positionleft
props.actionBar.submitButton.textSubmit 
props.actionBar.submitButton.enabledtrue
props.actionBar.submitButton.primarytrue
props.actionBar.submitButton.style.fontFamily

Merriweather 

props.actionBar.clearButton.textClear
props.actionBar.clearButton.enabledtrue
props.actionBar.clearButton.primarytrue
props.actionBar.clearButton.style.fontFamily

Merriweather 

props.style.borderStyledashed
props.style.borderwidth1pt
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 OnSinatureSubmitted 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: