Create custom AEM component for Adaptive Form

Create custom component with custom name :
Goto http://ec2-34-209-2-18.us-west-2.compute.amazonaws.com:4502/crx/de/index.jsp
Now Create Custom folder inside /apps
Custom folder : customComponent

Copy guidetextbox node from /libs/fd/af/components and paste it to /apps/customComponent

Now rename guidetextbox to customtextboxcomponent and rename properties
componentGroup : Adaptive Form
jcr:description : Text Box Component Custom
jcr:title : Custom Text Box Component

Now navigate to:
http://ec2-34-209-2-18.us-west-2.compute.amazonaws.com:4502/aem/forms.html/content/dam/formsanddocuments

Now open form and goto open form through Classic UI

Now screen will appear like this
All component are showing on right side inside one pop
Custom Text Box Component is showing : our custom created component
Drag and drop that component

Run form through:
http://ec2-34-209-2-18.us-west-2.compute.amazonaws.com:4502/aem/forms.html/content/dam/formsanddocuments

1) Steps to add event on tag
Text box is working normal, now we need to apply onkeypress event to accept only numbers, brackets and comma

For adding event, navigate to:
http://ec2-34-209-2-18.us-west-2.compute.amazonaws.com:4502/crx/de/index.jsp#/apps/customComponent/customtextboxcomponent/widget.jsp

Now open widget.jsp file and add onkeypress event inside input tag, write our code
onkeypress=”return (event.charCode == 44 || event.charCode == 40 || event.charCode == 41 ) ? null : event.charCode >= 48 && event.charCode <= 57″
Save file

Next open form and textbox is accepting only numbers, brackets and comma http://ec2-34-209-2-18.us-west-2.compute.amazonaws.com:4502/editor.html/content/forms/af/demo.html

2) Steps to customize label of custom created Textbox Component

Goto http://ec2-34-209-2-18.us-west-2.compute.amazonaws.com:4502/crx/de/index.jsp
Now navigate to custom created component
/apps/customComponent/customtextboxcomponent
Select cq:template and see properties section , rename jcr:title and save all changes
jcr:title : Standard Numeric Text box

Now open form and drag & drop our custom component
See the label is changed with custom name

Leave a Reply

Your email address will not be published. Required fields are marked *