Input Pen (Signature)
The Avonni Pen Input is a drawing and signature pad that lets users sketch, annotate, or sign directly on screen. Use it to capture handwritten signatures, freehand drawings, or quick visual notes, with optional saving to a Salesforce Content Document.
Overview
The Pen Input gives users a canvas to draw on with the mouse, trackpad, or touch screen. It ships with several pen modes — draw, paint, ink, and erase — and a built-in toolbar that lets users change the pen size, pick a stroke color, set a canvas background color, undo and redo, clear the canvas, and download the result.
You control the starting tool, size, and colors, decide where the toolbar sits and which buttons appear, and choose whether the component is read-only or required. When you enable saving, the drawing can be stored as a Salesforce Content Document — optionally linked to a record and saved automatically — so signatures and sketches become part of your Salesforce data.
Why Use the Pen Input Component?
Capture Signatures: Collect handwritten signatures on agreements, approvals, and forms.
Freehand Drawing: Let users sketch, annotate, or mark up content.
Salesforce Storage: Save the drawing as a Content Document, optionally linked to a record.
Flexible Toolbar: Show only the tools your use case needs.
Configuration
To configure the Pen Input, select it on the canvas. The Edit Pen Input panel opens on the right. The sections below mirror the configuration panel.
Properties
Label
The text shown above the pen canvas. Use it to tell the user what the drawing is for — for example, "Signature" or "Sketch your design."
Field Level Help
Optional helper text shown next to the label to give users extra guidance about what to draw.
Value
The serialized value representing the drawing content. Bind it to a variable or field to pre-load an existing drawing or to read back what the user has drawn.
Mode
The default tool mode used when the component loads. Options are Draw (default), Paint, Ink, and Erase. Users can switch between modes from the toolbar unless those buttons are hidden.
Toolbar Position
Where the toolbar appears relative to the canvas. Choose Bottom (bottom-toolbar, default) or Top (top-toolbar).
Color
The default stroke color used to draw. Defaults to black (#000000).
Background Color
The canvas background color. Defaults to transparent (#ffffff00).
Show Signature Pad
When enabled, the canvas is presented as a signature pad, optimized for capturing a signature rather than freeform drawing.
Hide Controls
When enabled, the toolbar controls are hidden entirely. Use this for a clean, display-only canvas or when you want to lock the drawing tools.
Required
When enabled, the user must provide a drawing before the value is considered valid.
Message When Value Missing
The error message shown when Required is on and no drawing has been provided.
Hidden Buttons
Hide individual toolbar buttons while keeping the rest of the toolbar visible. You can hide any of: pen, paintbrush, ink, eraser, size, color, background, download, undo, redo, and clear.
Size
The default pen size, in pixels. The default is 3. Available sizes are 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 18, 24, 30, and 36.
Disabled
When enabled, the component is shown but cannot be interacted with.
Read Only
When enabled, an existing drawing is displayed but the user cannot modify it.
Save As Content Document
These settings control whether and how the drawing is stored as a Salesforce Content Document.
Save as Content Document
When enabled, the drawing can be saved as a Salesforce Content Document. Turning this on reveals the remaining save settings below.
The following settings are available only when Save as Content Document is enabled:
Auto Save Content Document
Automatically save the drawing as a Content Document, without requiring the user to click the save button.
Save As Button Label
The label of the save button. Defaults to Save.
Content Document Title
The title used when creating the Content Document. Defaults to Avonni Input Pen Document.
Content Document Id
An existing Content Document Id to load or use when saving is enabled.
Content Document Linked Entity Id
The record Id that the Content Document should be linked to.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Pen Input. Configure them from the Interactions tab of the Edit Pen Input panel.
Change
Fires when the user modifies the drawing on the canvas. Use this to read back the updated drawing value, store it in a variable, or trigger downstream flow logic whenever the canvas content changes.
Save As Button Click
Fires when the user clicks the save button. Use this to trigger custom save logic, show a confirmation message, or chain additional actions after the drawing is saved.
Styling
The Style tab gives you fine-grained control over the Pen Input's appearance. Configure it from the Style tab of the Edit Pen Input panel.
Controls the outer spacing around the component, creating space between it and other elements on the page.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's border and its content.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Controls the component's dimensions, including the drawing canvas height.
Width: Set a fixed width for the component.
Min Width / Max Width: Constrain the width within bounds.
Height: Set the height of the drawing canvas.
Styles the header (label) text shown above the canvas.
Color: Set the label color.
Font Size / Font Style / Font Weight: Control the label typography.
Troubleshooting Common Issues
Can't Draw on the Canvas — Confirm the component isn't set to Read Only or Disabled.
No Tools Showing — Check that Hide Controls is off and that the tools you expect aren't listed under Hidden Buttons.
Strokes Are Invisible — Make sure the Color isn't the same as the Background Color — for example, a white stroke on a white background.
Drawing Not Saved — Saving only works when Save as Content Document is enabled. If you expect it to save without a button click, also enable Auto Save Content Document.
Document Not Linked to a Record — Set the Content Document Linked Entity Id to the record Id you want the saved document attached to.
Required Drawing Not Enforced — Enable Required and provide a Message When Value Missing so users see the error.
Last updated
Was this helpful?