Skip to content

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
_cq_design_dialog
_cq_dialog
clientlibs
.content.xml
README.md
text.html

README.md

Form Text (v2)

Text form field component written in HTL.

Features

  • Provides the following type of input:
    • text
    • textarea
    • email
    • telephone
    • date
    • number
    • password
  • Custom constraint messages for the above types

Use Object

The Form Text component uses the com.adobe.cq.wcm.core.components.models.form.Text Sling Model for its Use-object.

Edit Dialog Properties

The following properties are written to JCR for this Form Text component and are expected to be available as Resource properties:

  1. ./type - defines the type of text this field provides; possible values: text, textarea, email, tel, date, number, password
  2. ./rows - defines the number of text lines available in this input field
  3. ./jcr:title - defines the label to use for this field
  4. ./hideTitle - if set to true, the label of this field will be hidden
  5. ./name - defines the name of the field, which will be submitted with the form data
  6. ./value - defines the default value of the field
  7. ./helpMessage - defines a help message that can be rendered in the field as a hint for the user
  8. ./usePlaceholder - if set to true, the help message will be displayed inside the form input if the field is empty and not focused
  9. ./constraintMessage - defines the message displayed as tooltip when submitting the form if the value does not validate the chosen type
  10. ./required - if set to true, this field will be marked as required, not allowing the form to be submitted until the field has a value
  11. ./requiredMessage - defines the message displayed as tooltip when submitting the form if the value is left empty
  12. ./readOnly - if set to true, the filed will be read only

Client Libraries

The component provides a core.wcm.components.form.text.v2 client library category that contains a JavaScript component. It should be added to a relevant site client library using the embed property.

It also provides a core.wcm.components.form.text.v2.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit dialog.

BEM Description

BLOCK cmp-form-text
    ELEMENT cmp-form-text__help-block
    ELEMENT cmp-form-text__textarea
    ELEMENT cmp-form-text__text

JavaScript Data Attribute Bindings

Apply a data-cmp-is="formText" attribute to the wrapper block to enable initialization of the JavaScript component.

The following attributes can be added to the same element to provide options:

  1. data-cmp-constraint-message - populated with constraintMessage from the component's edit dialog
  2. data-cmp-required-message - populated with requiredMessage from the component's edit dialog

A data-cmp-hook-form-text="input" attribute should be added to the input field or textarea so that the JavaScript is able to target it.

Information

You can’t perform that action at this time.