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.

---

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.
• 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.
• Read Only — the canvas is visible but not interactive.
• Disabled — greys out the component and prevents interaction.
• Field Level Help — optional tooltip text shown next to the label.

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.

---

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

Size

Label

Flow Dialog

Output Variables

The Avonni Input Pen exposes two output variables you can use downstream in your flow.

Output	Type	Description
Value	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	String	The Id of the ContentDocument created by the component when Save as Content Document is enabled. Empty otherwise.