Years ago I faced to the same challenge. It was very hard work to finished it.
My way was as follow:
- I created a custom dialog means using own html, css and javascript and of course slighty. The drop down lists, for me there were three depending lists, are type of AEM component
<coral-select></coral-select>
The code wich controls the behaviour is written in client side javascript -currently still in jquery.
- On serverside there is a model class that does provide only the content for the lists. He is represented by created pages. The linked templates containing only necassary information, keeping complexity low.
- Slighty transfers the content from backend to frontend. For this I have created three html elements whose are hidden by using css attribute "display:none;".
- Client side javascript does the rest. Means creates the drop down items, fill them from hidden elements above and controls the behavior.
It might be not the best way to solve it, but it works for years and allows the authors to fill the content by thier own.
