Form - Text

Component Information

Component Title Form Text
Description Form Text component allows the entry of form text for submission.
Features
  • Provides the following type of input:
    • text
    • textarea
    • email
    • telephone
    • date
    • number
    • password
  • Custom constraint messages for the above types
Location /apps/ehi-core/aem65/components/form/text/v1/text
sling:resourceSuperType core/wcm/components/form/text/v2/text
Supported AEM Versions 6.5
Editing Mode inPlaceEdit
Component Group Cheerios Experience
Use Object The Form Text component uses the com.adobe.cq.wcm.core.components.models.form.Text Sling Model for its Use-object.

 

Use Object

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

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.

Extending the Components

Extending the components can be done in multiple ways depending on the needs of the brand component.

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Configuration Properties

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

Edit Dialog Visual

Component Demo

Complete by clicking in the box below

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        E524Z2
    
    3. 

  3. 
        jcr:title:
        Label of the field
    
    4. 

  4. 
        jcr:lastModifiedBy:
        E524Z2
    
    5. 

  5. 
        jcr:created:
        
    
    6. 

  6. 
        name:
        Element Name
    
    7. 

  7. 
        rows:
        2
    
    8. 

  8. 
        type:
        text
    
    9. 

  9. 
        value:
        Enter your text here
    
    10. 

  10. 
        jcr:lastModified:
        
    
    11. 

  11. 
        sling:resourceType:
        ehi-core/aem65/components/form/text/v1/text
    
    12. 

  12. 
        helpMessage:
        Complete by clicking in the box below
    
    13. 




    
        

    
    
    



        
        
Complete by clicking in the box below

        

        

        

        

    


    
    



    

    


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.