(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Text area

The Dynamic Textarea component is a multi-line text input field that allows users to enter and edit longer text content. This component is ideal for collecting detailed information such as comments, descriptions, feedback, or any other content that may span multiple lines. It provides various configuration options to control appearance, behavior, and validation rules.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Customer Feedback" allows for easy identification of the textarea's purpose in the component structure.

Visual Properties

• labelTranslations - Sets the field label with support for multiple languages. For example, {"en-US": "Your Comments", "de-DE": "Ihre Kommentare"} ensures proper localization of the field label.

• rows - Determines the visible height of the textarea in number of text lines. For example, setting to "5" creates a textarea that shows five lines of text without scrolling, appropriate for medium-length responses.

• counterVisible - Controls whether a character counter is displayed below the textarea. When enabled, users can see how many characters they've typed, which is helpful when there are length limitations.

• value - Sets the initial text content displayed in the textarea. For example, pre-filling with "Please describe your experience…" provides users with context for what to enter.

• placeholder - Sets the placeholder text shown when the textarea is empty. For example, "Enter your detailed comments here…" provides guidance to users about what information is expected.

• saveInLocalStorage -  (Remember value) Determines whether the textarea's content is preserved in local storage. When enabled, user input persists between page reloads or browser sessions, improving user experience for lengthy forms.

• defaultValue - Defines the initial value for the textarea that is used when the form is reset. For example, setting to an empty string ensures the field clears properly when the form is reset.

• readonly - Controls whether the textarea content can be edited by users. When set to true, the content is displayed but cannot be modified, useful for displaying pre-filled information that shouldn't be changed.

Non-Visual Properties

• dataField - Defines the field name used when submitting form data. For example, setting dataField to "customerFeedback" ensures the textarea value is submitted with this specific field name in the data object.
• controlsRequestType - Specifies how the field data is sent in HTTP requests: 'BODY', 'URL', or 'HEADERS'. For example, setting to "BODY" includes the field in the request body, which is standard for most form submissions.

Validation Properties

• validation - Configures validation rules for the textarea, including:
  • required - When set to true, the field must contain a value before the form can be submitted.
  • maxlength - Defines the maximum allowed character count. For example, setting to "500" limits responses to 500 characters.
  • validated - Controls whether validation rules should be actively applied to user input.

Authorization Properties

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "registeredUsersOnly" restricts the textarea to authenticated users only.

Event Actions

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the textarea component is initialized. Can be used to perform setup operations like loading initial data.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.
  • ON_VALUE_CHANGE: Triggered when the user modifies the content of the textarea. Can be used to perform immediate validation or dynamic responses to user input.
  • ON_INIT_BASED_ON_USER_VIEW: Triggered specifically when the component initializes in user view mode rather than edit mode.

Testing Hooks

• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "customer-feedback-textarea" allows test scripts to reliably locate this component.