Skip to content
main
Switch branches/tags
aem-core-wcm-components/content/src/content/jcr_root/apps/core/wcm/components/form/text/v2/text/
Go to file
aem-core-wcm-components/content/src/content/jcr_root/apps/core/wcm/components/form/text/v2/text/

Latest commit

@vijaymnnit06
vijaymnnit06 Add validation in order to prevent same HTML-ID on page (#2278)
571416a Sep 15, 2022
Add validation in order to prevent same HTML-ID on page (#2278) 
* Added HTML ID validation logic to avoid duplicate HTML ID on the page
* Added validations for page properties dialog
* Added the workspace filter to include clientlibs
* Review comment incorporated. Moved the location of clientlibs
571416a

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
. .
_cq_design_dialog
 
 
_cq_dialog
 
 
clientlibs
 
 
.content.xml
 
 
README.md
 
 
text.html
 
 
Form Text (v2) Features Use Object Edit Dialog Properties Client Libraries BEM Description JavaScript Data Attribute Bindings Information

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
  13. ./id - defines the component HTML ID attribute.

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