How to using dropdown element change option in cq dialog dynamically?

Question

I want to wrote an AEM component where I would like to add some elements to my side. In one component I want to add three difference option, and I would like to change this option dynamically.

Actually I try to add some part of code to my cq_dilog.xml, but the problem is that I have an three dropdown options to chose but I can't change trigger element.

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          jcr:primaryType="nt:unstructured" jcr:title="Text"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured"
             sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title jcr:primaryType="nt:unstructured"
                           fieldLabel="Trigger"
                           sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                           filedDescription="URL to the page you will linked to."
                            name="./title"/>
                    <type
                            sling:resourceType="granite/ui/components/foundation/form/select"
                            fieldLabel="Type" name="./type"
                            jcr:primaryType="nt:unstructured">
                        <items jcr:primaryType="nt:unstructured">
                            <option1 jcr:primaryType="nt:unstructured" text="Download" />
                            <option2 jcr:primaryType="nt:unstructured" text="Link" />
                            <option3 jcr:primaryType="nt:unstructured" text="Add" />
                        </items>
                    </type>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Answer 1

I see in your example that you are mixing older Coral2 widgets (granite/ui/components/foundation/..) with newer Coral3 widgets (granite/ui/components/coral/foundation/..).

The article provided by Oliver is useful if you're using Coral2 but consider migrating completely to Coral3 (more info here), in which case there is a different but in my opinion better and clearer system. The concept is the same but the implementation has changed.

Here is the implementation in XML:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                    <dropdown
                        granite:class="cq-dialog-dropdown-showhide"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                        fieldLabel="Dropdown"
                        name="./dropdown">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-dialog-dropdown-showhide-target=".option-showhide-target"/>
                        <items jcr:primaryType="nt:unstructured">
                            <no-option
                                jcr:primaryType="nt:unstructured"
                                text="No option"
                                value="no-option"/>
                            <option
                                jcr:primaryType="nt:unstructured"
                                text="Option"
                                value="option"/>
                        </items>
                    </dropdown>
                    <dynamic-option
                        granite:class="hide option-showhide-target"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                        text="Dynamic option">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            showhidetargetvalue="option"/>
                    </dynamic-option>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Here are the important parts:

1. The granite:class property of the dropdown node enables the dynmic show/hide functionality
2. The cq-dialog-dropdown-showhide-target property of the granite:data node under the dropdown node defines the custom class responsible for toggling the dynamic fields (here I used .option-showhide-target, but you could call it anything you want)
3. The granite:class of the target node (dynamic-option in our case) tells our field what class (the custom class from step 2) to bind its show/hide behaviour to.
4. The showhidetargetvalue property of the granite:data node under our target node defines which item in the dropdown (based on the value property) will toggle the show/hide behaviour.

Here is a screenshot of the structure in CRXDE:

And here is a GIF of the result: