Input Pen
An input field to capture a signature and save it as an image.
Overview
The Avonni Input Pen transforms your touchscreen device into a digital canvas. Write, draw, or sketch with customizable pen styles, colors, and eraser tools. Zoom in and out as needed, and easily integrate your creations into other digital documents.
Tutorials
| Name | Description | Image |
|---|---|---|
This guide will show you how to add a custom toolbar to the signature pad screen. | ||
This tutorial will guide you through saving the signature as a file. |
Configuring the Input Pen
Choosing Mode
The Avonni Input Pen component's Input Pen Mode attribute offers several options to accommodate user needs and preferences.
| Mode | Description |
|---|---|
Drawn | This mode is tailored for precision drawing. It provides a fine-tipped pen style, ideal for detailed sketches or handwriting. Users can create intricate designs or write in a natural, hand-drawn style. |
Paint | Designed for a broader stroke, the Paint mode simulates a paintbrush effect. It is perfect for users looking to create artistic and expressive strokes, similar to painting on a canvas. |
Ink | Ink mode replicates the feel of an ink pen. It offers a smooth and flowing writing experience, suitable for regular handwriting or calligraphic styles. This mode is ideal for users who prefer a classic pen-and-ink feel. |
Erase | The Erase mode is essential for corrections and modifications. It allows users to remove specific parts of their drawing or text, providing a straightforward way to rectify mistakes or change the created content. |
Show signature Pad
When the Show Signature Pad is activated, a signature line is added at the bottom of the drawing area. This is helpful if you need to transform your drawing area into a signature pad.
Hide Controls
The 'Hide Controls' toggle in the Avonni Input Pen gives you more space to work. It temporarily hides the toolbar, usually containing tools like pen styles, colors, and erasers.
Advanced Options
The Advanced Options in the Avonni Input Pen component enhance user control through three key features:
Toolbar Customization: Users can simplify their toolbar by disabling selected buttons, creating a more streamlined and focused interface.
Pen Size Adjustment: This option allows you to modify the pen size, accommodating various drawing styles and detail levels.
Interaction Disablement: Users can temporarily turn off pen interactions, preventing accidental marks and preserving the current state of their work
Save As Content Document
The Avonni Input Pen saves handwritten notes or drawings directly into your Salesforce records. This is perfect for capturing and keeping signatures attached to the correct documents.
View the Save the Input Pen drawing attached to a record tutorial.
Here's a breakdown of the Save As Content Document Settings:
| Setting | Function |
|---|---|
Save as Content Document | If enabled, saves the input as a ContentDocument in Salesforce. |
Auto-save Content | Automatically saves the drawing as a ContentDocument. |
Content Document Title | Sets a title for the ContentDocument. |
Content Document Linked Entity ID | Links the ContentDocument to a specific Salesforce record ID (by using a variable). |
Save as Button Label | Customizes the text on the 'Save As' button. |
Interactions
The Avonni Input Pen component includes a "Save As" button that lets you customize what happens when users click it. To use this feature, make sure you haven't enabled the "Auto-save content" setting in the properties panel (otherwise, the button won't be shown).
Here's what you can do:
Define custom interactions: Decide what happens when a user clicks the "Save As" button. For example, you could save the drawing as an image, attach it to a record, or send it in an email.
Learn about available actions: For the full range of possible actions you can use with this interaction, check out our interaction guide page [Insert link to the interaction guide page here].
Last updated
