Skip to main content
Version: 8.1

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.

NameDescriptionProperty Type
enabledEnables the canvas, clear button, and submit button. When enabled, component scripting functions for clearSignature and submitSignature are also enabled.value: boolean
padSettings 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
    actionBarSettings 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
    statusSettings for the status of the component.
  • touched: True when the signature pad contains a signature. Value is boolean.
  • object
    styleSets 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

    See the Perspective - Signature Pad Scripting page for the full list of scripting functions available for this component.

    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.

    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.fontFamilyMerriweather
    props.actionBar.clearButton.textClear
    props.actionBar.clearButton.enabledtrue
    props.actionBar.clearButton.primarytrue
    props.actionBar.clearButton.style.fontFamilyMerriweather
    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 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: