Adaptive Form Telephone Input (v1)

Adaptive Form Telephone input field component written in HTL.

Features

Provides the following type of input:
- telephone
Custom constraint messages for the above types
Styles
Allows replacing this component with other component (as mentioned below).

Use Object

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

Edit Dialog Properties

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

./jcr:title - defines the label to use for this field
./hideTitle - if set to true, the label of this field will be hidden
./name - defines the name of the field, which will be submitted with the form data
./default - defines the default value of the field
./description - defines a help message that can be rendered in the field as a hint for the user
./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
./requiredMessage - defines the message displayed as tooltip when submitting the form if the value is left empty
./readOnly - if set to true, the filed will be read only

Client Libraries

The component provides a core.forms.components.textinput.v1.runtime client library category that contains the Javascript runtime for the component. It should be added to a relevant site client library using the embed property.

It also provides a core.forms.components.textinput.v1.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit dialog.

Replace feature:

We support replace feature that allows replacing Reset Button component to any of the below components:

Button
Date Picker
Email Input
Number Input
Reset Button
Submit Button
Text Box
Text Input

BEM Description

BLOCK cmp-adaptiveform-telephoneinput
    ELEMENT cmp-adaptiveform-telephoneinput__label
    ELEMENT cmp-adaptiveform-telephoneinput__label-container
    ELEMENT cmp-adaptiveform-telephoneinput__widget
    ELEMENT cmp-adaptiveform-telephoneinput__questionmark
    ELEMENT cmp-adaptiveform-telephoneinput__shortdescription
    ELEMENT cmp-adaptiveform-telephoneinput__longdescription
    ELEMENT cmp-adaptiveform-telephoneinput__errormessage

Note

By placing the class names cmp-adaptiveform-telephoneinput__label and cmp-adaptiveform-telephoneinput__questionmark within the cmp-adaptiveform-telephoneinput__label-container class, you create a logical grouping of the label and question mark elements. This approach simplifies the process of maintaining a consistent styling for both elements.

The following attributes must be added for the initialization of the telephone input component in the form view:

data-cmp-is="adaptiveFormTelephoneInput"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"

The following are optional attributes that can be added to the component in the form view:

data-cmp-valid having a boolean value to indicate whether the field is currently valid or not
data-cmp-required having a boolean value to indicate whether the field is currently required or not
data-cmp-readonly having a boolean value to indicate whether the field is currently readonly or not
data-cmp-active having a boolean value to indicate whether the field is currently active or not
data-cmp-visible having a boolean value to indicate whether the field is currently visible or not
data-cmp-enabled having a boolean value to indicate whether the field is currently enabled or not