AEM Adaptive Forms - Best approach to create custom composite address component

[MohanJo]

I'm working on AEMaaCS and have a task to create a composite address component within AEM adaptive forms. This component should include an address dropdown, two street address text boxes, one postal code text box, and a dropdown for state selection. What's the easiest way to get this done in AEM adaptive forms? I've considered two options:

1. Can we handle this directly through the authoring interface?
2. Do we need to develop a custom component? If so, how can we make use of the form's out-of-the-box (OOTB) textbox and dropdown components? I've identified the following components, but I'm unsure if we can include them directly in HTL or if we need to create HTML or JSP files since most form components are in JSP:
   • /libs/fd/af/components/guidetextbox
   • /libs/fd/af/components/guidedropdownlist
   • /libs/fd/af/components/guidedateinput

[Shubham_borole]

Hello @MohanJo ,

Not done this before, have you tried exploring form fragments and within that for address and state dropdown try this link - Adaptive Forms Core Component - Drop-down list | Adobe Experience Manager

What are Adaptive Form fragments? | Adobe Experience Manager - the form fragments can be used in multiple forms

Hope it works out fine.

[workflowuser · Accepted solution]

I am creating an addressblock component. All you have to do is create node called addressbloc as shown below with the following properties

Next under the address block component node create a node called cq template with the elements of your address block . For example, you can create streetaddress,zip, city, state etc  as per your needs.

The properties of cq template node

Then select streetaddress node and specify the following properties as shown

notice the fieldType is text-input and the resource type

for dropdown field the field type will be dropdown and the resource will point to dropdown component

Then add addressblock.hrml  with the following code

<div class="cmp-adaptiveform-addressblock__zip" data-sly-resource="${'zip'}">

</div>

<div class="cmp-adaptiveform-addressblock__streetaddress" data-sly-resource="${'streetaddress'}">

</div>

Thats it. You now have an addressblock component ready to be used

if you are using CRX to make these nodes/set properties etc, please make sure to sync your project and then deploy the project