# Input Pen

*** ## Tutorials | Name | Description | Image | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [**Add the custom toolbar**](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen/add-the-custom-toolbar) | This guide will show you how to add a custom toolbar to the signature pad screen. | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FTMxSsnIYRIyawreVQdrn%2Ftoolbar.png?alt=media\&token=eb103a8d-d1c2-4049-86b7-408dc3e5bdf7) | | [**How to Store Input Pen Drawings as Attachments in Salesforce**](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen/how-to-store-input-pen-drawings-as-attachments-in-salesforce) | This tutorial will guide you through saving the signature as a file. | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FTMxSsnIYRIyawreVQdrn%2Ftoolbar.png?alt=media\&token=eb103a8d-d1c2-4049-86b7-408dc3e5bdf7) | *** ## 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 lets you adjust the pen size to accommodate 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 retaining signatures on the correct documents. {% hint style="info" %} View the [**Save the Input Pen drawing attached to a record**](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen/how-to-store-input-pen-drawings-as-attachments-in-salesforce) tutorial**.** {% endhint %}

how to access the Save as content settings

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.

{% hint style="warning" %} #### **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](#using-the-input-pen-with-guest-users) {% endhint %} *** ## 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. {% hint style="info" %} #### Info 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, thereby widening your site's attack surface. A `without sharing` invocable is the cleaner path {% endhint %} *** ## 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. *** ## Outputs 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. |