Textarea: multiline values and editing
Collect multiline plain text and bind its current value.
Collect multiline plain text and bind its current value.
Before you begin
Section titled “Before you begin”- An App Connect page; a named form when the values will be submitted.
Use a textarea for multiline text
Section titled “Use a textarea for multiline text”Textarea extends the same form-element behavior as Text Input. Its value is text, not rendered HTML. Use a rich-text editor only when formatting is part of the required result.
Configure text and presentation
Section titled “Configure text and presentation”ID is the page binding name; Name is the submitted field name. Static Value supplies initial content, with existing textarea text used when no value is supplied. Dynamic Value can replace it later. Placeholder is a hint; Rows and Cols describe visible dimensions, not limits on the amount of accepted text. Required, Disabled and Read Only have their normal form roles.
Enable Medium Editor changes the component
Section titled “Enable Medium Editor changes the component”Enable Medium Editor changes the is attribute to dmx-medium-editor and includes its scripts/styles. Continue with that editor’s reference for its HTML value and toolbar behavior; this action is not just a larger textarea.
Read and change a form control
Section titled “Read and change a form control”Form-control data is directly under its component name, for example titleInput.value. It is not titleInput.data.value.
| Control or value | Meaning and use |
|---|---|
| Set Value | Changes the current control value. A later change to its bound Value can replace it and also change the form-reset default. Set Value emits Updated when the value changes; it does not simulate a user Changed event. |
| Disable | Pass true to disable and false to enable. Disabled controls are omitted from normal form submission. Read Only, where the input type supports it, prevents editing while leaving the value eligible for submission. |
| Focus | Moves keyboard focus to the control. Give the field a visible label and a useful place in the form’s focus order. |
| Validate | Invokes the App Connect validation helper. Load the validation extension for this action; client validation does not replace the endpoint’s validation. |
| value / disabled / focused | Current value and UI state. Text-based controls expose strings, including most number-input reads. Convert intentionally before arithmetic. |
| invalid / validationMessage | Client validation state/message. Render a useful field error when invalid, and handle server field errors on the form too. |
| Changed / Updated | Changed accompanies user input/change handling when the value changes. Updated also accompanies programmatic value updates. Do not make an Updated handler unconditionally write a different value back into the same field. |
Example: preview a short description
Section titled “Example: preview a short description”Add descriptionInput with Name description and a visible label. Enter two lines and bind a text preview to descriptionInput.value. Submit with a matching server field and verify the stored value retains the intended line breaks. Escape plain text when displaying it as page content; do not automatically treat user text as trusted HTML.
Continue with a complete form workflow
Section titled “Continue with a complete form workflow”Use the related workflow to connect these controls to data and a verified submit result.
Check your result
Section titled “Check your result”You can configure the control, use its actual value shape and verify the example without confusing page state with a submitted or saved value.