Populate form fields based on dropdown selection

[Learning4me]

I have a requirement, There are multiple vendors ( around 100 and its increasing ) and each vendors a unique  combinations of form fields should populate.

Basically  in the dispatcher  the vendors are getting selected from dropdown and then based on each vendor the form fields will vary . These data (Vendor information and related information ) should get from backend while selecting from the dropdown (the dropdown of vendor selection).

My concern is how can I map the response from the backend to the component for different combination of form fields based on the selected dropdown (Vendor). The order of the form fields may vary based on the selected vendor. So its dynamic

Instance :AEMasCS , Not Using adaptive forms only core component forms .

Thanks,

[ruchim71073425 · Accepted solution]

You could have vendor specific forms created using selectors that are displayed when the dropdown values change. This method might mean less calls to Publisher but you would need a service that could generate those forms and then cache.

Implementation would vary on how complex your forms are and how much variation in forms is needed per request. If there are several updates based on a request, could be a servlet call on dropdown value change, that accesses a service that would return the vendor specific fields. You can save them in a config with a vendor mapping of fields with name, label, type etc. This obviously means more publisher calls, so the best way to go about is think how static or dynamic these forms are and then look for a solution.

[Madhur-Madan]

Hi @Learning4me ,
You can try the following approach

Backend Integration:

• In AEM, you’ll need to set up a backend service (e.g., a servlet, OSGi service, or REST API) that handles the vendor data retrieval.
• When a user selects a vendor from the dropdown, make an AJAX call to this backend service to fetch the relevant data (field definitions) for the selected vendor.
• The backend service should return the data in a structured format (e.g., JSON).

Frontend Component Mapping in AEM:

• AEM uses components for rendering content. You can create a custom AEM component to handle the dynamic form.
• Define a dialog for your custom component where you can configure the vendor dropdown and associated fields.
• In the dialog, create a dropdown field for vendor selection. When the user selects a vendor, use AJAX to fetch the corresponding field definitions from the backend.
• Map the fetched field definitions to the appropriate AEM form components (e.g., text fields, dropdowns, etc.).

You can also use Content Fragment Model for creating the dynamic form structures. CFMs allow you to define structured content types (similar to field definitions) and reuse them across different components. You can create a CFM for each vendor type and associate it with your custom component.

Thanks,

Madhur