Text Area

The Avonni Text Area component provides a multi-line text input field, allowing users to enter longer blocks of text, comments, descriptions, or other free-form text data. It's a fundamental component for capturing text input within your Dynamic Components.

Overview

The Text Area component is a larger text input field than the single-line "Text" component.

Key features

• Multi-Line Input: Allows users to enter multiple lines of text, with automatic word wrapping.

• Resizable (Often): Many Text Area implementations allow users to resize the input area by dragging a corner handle.

• Character Limits: You can set minimum and maximum length restrictions.

• Character Count Display (Optional): Display a live count of the characters entered.

• Data Binding: The entered text is stored in a Text Variable resource, making it available for use in other parts of your component.

• Plain and Formatted Text: Supports different input mode.

• Placeholder: set a hint text.

Adding the Text Area Component

Drag and Drop

From the Component Library (left panel), find the "Text Area" component and drag it onto your canvas.

Configuring the Text Area Component

Select the Text Area component on the canvas to access its properties in the Properties Panel (right panel).

Basic Properties

These properties control the fundamental data and labeling of the Text Area.

• API Name: (Text) A unique identifier for this component instance (e.g., CaseDescriptionTextArea, FeedbackTextArea).

• Label: (Text) The text label displayed above or next to the text area. Example: "Description:", "Comments:", "Additional Notes:". Be clear and concise.

• Field Level Help: (Text, Optional) Help text displayed next to the label.

• Value: (Text - Crucially Important) This property holds the text entered by the user.

  • Data Binding: You should bind this property to a Text Variable resource. This variable will:

    • Store the user's input.

    • Allow you to use the entered text in other parts of your component (e.g., saving it to a Salesforce record, displaying it in another component, using it in a formula).

    • Allow you to set a default value by initializing the Text variable.

• Placeholder: (Text, Optional) Placeholder text displayed inside the text area before the user enters any text. This provides a hint or example of the expected input. Example: "Enter a detailed description...", "Type your comments here...".

Text Input and Formatting

These properties relate to the text input itself and formatting.

• Font: (Text) Set a font for the value.

• Font Size: (Number) Set a font size for the value.

• Max Length: (Number, Optional) The maximum number of characters the user can enter. Leave blank for no limit.

• Min Length: (Number, Optional) The minimum number of characters the user must enter.

• Show Character Count: (Boolean - Checkbox) If enabled, displays a live character count below the text area (e.g., "25/200 characters"). This is very helpful when you have a Max Length.

• Mode: (Text - Select from options) Choose the text editing mode:

  • Plain: Standard multi-line text input (no formatting).

  • Rich: Rich text editor with formatting options (bold, italics, lists, etc.)

Behavior Properties

These properties control how the user interacts with the Text Area component and its overall behavior on the page.

• Required: (Boolean - Checkbox) If enabled, the user must enter text into the text area. You'd typically use this with validation logic to prevent form submission if the field is empty.

• Disabled: (Boolean - Checkbox) Completely disables the Text Area (cannot be interacted with).

• Read Only: (Boolean - Checkbox) Allows the user to see and copy text, but not change it.

When the Mode property is set to Rich, the Text Area becomes a rich text editor, providing users with a range of formatting options. These options are typically accessed through a toolbar or menu within the Text Area component itself. Here's a breakdown of the common options:

• Header: Apply heading styles (e.g., Heading 1, Heading 2, Heading 3) to selected text. This structures the content and is important for accessibility.

• Color: Change the text color of the selected text.

• Highlight Color: Change the background color of the selected text.

• Code: Format selected text as a code snippet (often using a monospaced font and specific styling). This is useful for displaying code examples.

• Font: Change the font family of the selected text

• And more.

Example: Case Description Input

• Create a Text Variable resource named caseDescription.

• Add a Text Area component.

• Set its API Name to CaseDescriptionTextArea.

• Set its Label to "Case Description:".

• Set its Placeholder to "Enter a detailed description of the case...".

• Set its Max Length to 1000.

• Enable Show Character Count.

Now, the caseDescription variable will store the text entered by the user in the Text Area. You can then use this variable (e.g., in an "Update from Record Variable" interaction) to save the description to a Salesforce record.

Key Considerations

• Data Binding: Always bind the Value property to a Text Variable.

• Max Length/Min Length: Use these to enforce input limits and improve data quality.

• Show Character Count: Enable this when you have a Max Length to provide user feedback.

• Required/Read Only/Disabled: Use these properties to control the input state based on your application logic.

In Summary

The Text Area Component is a way to get a multi line text from users