Nested dropdowns

[#1]

I am trying to implement Nested drop down for one of the drop downs we have. The options are around 250 so it would be a bad user experience for the user to look through it. Look for the picture below for a reference

When the user hovers or clicks on "Accommodation and Food Services" I want the sub-category to pop up beside it so that it is easier for the user to navigate.

Can someone please help me out with how to implement this? Thank you so much.

[#2 · Accepted solution]

deepakt84913413

You can create any aem forms component you need. I struggled to find a decent article on the subject, but hopefully a reply to a question I wrote will help :

Re: Auto suggest feature in AEM 6.3 adaptive forms

smacdonald2008 I think there is lack of good documentation for custom widgets, which is a fantastic feature of forms. Do you think a helpx could be created for this? I would be happy to provide input

[#3]

So are you telling me I should be able to add custom components in my form? As in not in the form template but the actual form itself? If yes, could you please guide me through, how I would be able to achieve it? Its just that there is no design mode for an adaptive form and hence I am not able to look at my custom components in the side bar to include them.

[#4]

Hideepakt84913413

Why are you restricted to out of the box components? I would challenge that if that is what your employer /client says.

If you can't add custom components,  then you can't build the component to that design.

You would need multiple drop downs instead.

The component in your design doesn't exist out of the box in aem, the facility to create it (as Scott suggests) does.

Thanks,

James

[#5]

True. But I am able to include only out of the box components in an adaptive form. I am able to include custom components in the template of the form, but not the form by itself. So even if I am able to create a custom component, I am not able to include it in a specific form.

[#6]

When community members mention drop-down - they are typically referring to a Select field in a component dialog or a drop-down component in a web page. AEM offers the data type to use for a component dialog - which is: granite/ui/components/coral/foundation/form/select.

However - if you want to display a drop-down in a web page, then its a matter of what JS API you are using in your component. As an AEM Developer - you are free to use any JS Lib that meets your requirements.

Typically JQeury Plug-in are a really good choice to start with. There are many rich JQuery plug-ins. For example --

Tryit Editor v3.5

Hope this helps...