Input Pen

The Avonni Input Pen provides a digital canvas experience on touchscreens with customizable pen styles, colors, and zoom functionality.

Overview

The Input Pen provides a digital drawing and signature canvas with customizable pen modes, colors, and toolbar controls. Drawings can be captured as a base64-encoded image or saved directly as Salesforce Files attached to a record.

---

See it in a real project

Customer sign-off inside a flow: A customer signature on the last screen of a flow.

Tutorials

Name	Description	Image
Add the custom toolbar	This guide will show you how to add a custom toolbar to the signature pad screen.
How to Store Input Pen Drawings as Attachments in Salesforce	This tutorial will guide you through saving the signature as a file.

---

Configuration

To configure it, click the component on the Flow screen. The Edit Pen Input Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Properties

• Label — text label displayed above the canvas.
• Field Level Help — optional tooltip text shown next to the label.
• Value — the drawing's value as a base64-encoded PNG. Usually left empty and read back as an output, but you can bind it to pre-load an existing drawing.
• Mode — the default drawing tool loaded when the component opens:

Mode	Description
Draw	Fine-tipped pen style, ideal for detailed sketches or handwriting.
Paint	Broad brush stroke, simulating painting on a canvas.
Ink	Smooth and flowing writing experience, suitable for regular handwriting or calligraphic styles.
Erase	Removes specific parts of the drawing or text.

• Toolbar Position — whether the drawing toolbar appears at the Bottom or Top of the canvas.
• Color — the default pen color when the component loads.
• Background Color — the background color of the drawing canvas.
• Show Signature Pad — when enabled, a signature line is added at the bottom of the drawing area, transforming the canvas into a signature pad.

• Hide Controls — hides the toolbar, giving the user more drawing space. The toolbar contains tools like pen styles, colors, and erasers.
• Required — marks the field as mandatory.
• Message When Value Missing — the error message shown when the field is left empty. Requires Required to be enabled.
• Disabled — greys out the component and prevents interaction.

Save As Content Document

Control whether and how the drawing is saved as a Salesforce File (ContentDocument).

How to access the Save as content settings

Setting	Function
Save as Content Document	If enabled, saves the drawing as a ContentDocument in Salesforce when the user clicks the Save As button (or automatically if Auto Save is on).
Auto Save Content Document	Automatically saves the drawing as a ContentDocument without requiring the user to click a button.
Content Document Id	Existing Content Document ID to load. Use this to edit a previously saved drawing.
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.

Permissions required

Save as Content Document performs the file insert as the running user. The user must have Create access to both ContentVersion and ContentDocumentLink. Authenticated Salesforce users typically have these permissions; guest users on Experience Sites do not. See Using the Input Pen with guest users below.

Advanced Options

• Hidden Buttons — select which toolbar buttons to hide from the canvas UI (Pen, Paintbrush, Ink, Eraser, Size, Color, Background, Download, Undo, Redo, Clear). Simplifies the toolbar for focused use cases.
• Size — the default pen size (in pixels) when the component loads: 1px through 36px.
• Read Only — the canvas is visible but cannot be edited by users.

---

Using the Input Pen with guest users

When the Input Pen is used within an Experience Site for unauthenticated (guest) users, the built-in Save as Content Document feature fails. Salesforce's default security posture prevents guest users from creating ContentVersion and ContentDocumentLink records, and the component's user-mode insert is blocked before the file is created.

To capture signatures from guest users, handle the file creation yourself in system context:

1. On the Input Pen, turn off Save as Content Document and Auto-save Content Document.
2. In your flow, read the component's Value output — the base64 PNG of the signature. It's populated regardless of the Save As settings.
3. Pass Value into a custom Apex-invocable action declared as without sharing. That action inserts the ContentVersion (and, optionally, a ContentDocumentLink if you want to attach it to a record) on behalf of the guest. Running in system context bypasses the guest profile restrictions.

Granting guest users Create on ContentVersion / ContentDocumentLink directly on the profile is technically possible but not recommended. Salesforce's Secure Guest User hardening rules push against it, widening your site's attack surface. A without sharing invocable is the cleaner path.

---

Interactions

Interactions define what happens when users interact with the Pen Input. Configure them from the Interactions tab of the Edit Pen Input panel.

Save As Button Click

Fires when the user clicks the Save As button. Use this to save the drawing as an image, attach it to a record, or trigger any downstream flow logic. This interaction is only available when Auto Save Content Document is disabled — enabling auto-save hides the button.

---

Styling

The Style tab gives you fine-grained control over the Input Pen's appearance. Configure it from the Style tab of the Edit Input Pen panel.

Margin

Controls outer spacing.

• Top: Space above the component.
• Right: Space to the right of the component.
• Bottom: Space below the component.
• Left: Space to the left of the component.

Padding

Controls inner spacing.

• Top: Space between the top edge and inner content.
• Right: Space between the right edge and inner content.
• Bottom: Space between the bottom edge and inner content.
• Left: Space between the left edge and inner content.

Size

Controls dimensions.

• Height: Sets the height of the drawing canvas body.

Label

Styles the label displayed above the canvas.

• Color: Text color of the label.
• Font Size: Size of the label text.
• Font Style: Style of the label text (e.g., normal, italic).
• Font Weight: Weight of the label text (e.g., normal, bold).

Flow Dialog

Adjusts display when opened as a modal dialog inside a Flow screen.

• Width: Width of the dialog.
• Height: Height of the dialog.
• Background Color: Background color of the dialog.

Output Variables

The Avonni Input Pen exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Input Pen component, and pick the output variable you need.

Output variable	Type	What it returns
Value	Text (String)	The base64-encoded PNG of the drawing. Always populated as soon as the user draws, regardless of the Save As Content Document settings. Use it when you want to handle persistence yourself.
Content Document Id	Text (String)	The Id of the ContentDocument created by the component when Save as Content Document is enabled. Empty otherwise.

Flow Interaction Output Variables

Like all interactive Flow components, the Input Pen exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.