How can we organize dropdown values into groups within an AEM dialog?

[Mario248]

I want to create a dropdown in an AEM component dialog with grouped options. For example, Theropods containing three items and Sauropods containing three items. I tried using granite/ui/components/coral/foundation/form/select/optgroup, but it didn’t work. Is this poiible  in an AEM component dialog?

Example 

Dialog

Dialog output

[SantoshSai]

Hi @Mario248,

I don't think so you can use <optgroup> inside an AEM Granite UI dialog the same way you would in plain HTML. The granite/ui/components/coral/foundation/form/select resource type does not support the optgroup element.

Rather do you think these might helpful as an alternateive options?

1. Prefix the options with a "group label"
   Example:

   Theropods - T-Rex

   Theropods - Velociraptor

   Theropods - Allosaurus

   Sauropods - Brachiosaurus

   Sauropods - Diplodocus

   Sauropods - Apatosaurus

   (Simple, but not visually grouped)

2. Use a custom Granite UI widget

   • Extend the Coral Select widget by overlaying or creating a custom rendercondition/datasource that outputs real <optgroup> markup.

   • This requires a clientlib override and isn’t OOTB.

3. Use checkboxes/radio groups inside a fieldset

   • If the UX requires groups, you can switch to a fieldset with multiple checkbox or radio items. That way you get the visual grouping.

Example (what you can do OOTB with checkboxes)

<dinosaurs
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
    jcr:title="Dinosaurs">
    <theropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Theropods">
        <trex
            jcr:primaryType="nt:unstructured"
            text="T-Rex"
            value="trex"/>
        <raptor
            jcr:primaryType="nt:unstructured"
            text="Velociraptor"
            value="velociraptor"/>
    </theropods>
    <sauropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Sauropods">
        <brachiosaurus
            jcr:primaryType="nt:unstructured"
            text="Brachiosaurus"
            value="brachiosaurus"/>
        <diplodocus
            jcr:primaryType="nt:unstructured"
            text="Diplodocus"
            value="diplodocus"/>
    </sauropods>
</dinosaurs><dinosaurs
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
    jcr:title="Dinosaurs">
    <theropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Theropods">
        <trex
            jcr:primaryType="nt:unstructured"
            text="T-Rex"
            value="trex"/>
        <raptor
            jcr:primaryType="nt:unstructured"
            text="Velociraptor"
            value="velociraptor"/>
    </theropods>
    <sauropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Sauropods">
        <brachiosaurus
            jcr:primaryType="nt:unstructured"
            text="Brachiosaurus"
            value="brachiosaurus"/>
        <diplodocus
            jcr:primaryType="nt:unstructured"
            text="Diplodocus"
            value="diplodocus"/>
    </sauropods>
</dinosaurs>

[arunpatidar · Accepted solution]

Hi @Mario248 

Its not possible to create dropdown with groups for AEM dialog. However you can use CSS to style your dropdown option like a groups.

you may need additional data attribute which contains the group titles.

https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html 

[Mario248]

Thank you Arun for sharing your input. Can you tell the steps to create this ? I use ACS common generic list to main the value but your screenshot contain a json. Also the link you shared is for RTE, is it work on regular component dialog ?

[arunpatidar]

Hi @Mario248 

The dialog is granite nt the RTE but used inside RTE plugin but its the same. I used json to create Granite Dropdown options because I wan to add custom attribute. I am not sure if you can achieve same with ACS common Generic list.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/acs-aem-commons-generic-li...