CODEWITHSUNDEEP
aem
user2581831
user2581831

Reputation: 117

AEM 6.2 - Set value in one dropdown based on selection of another dropdown value

In AEM 6.2, I have the first drop-down which has three values [x, y, z] and the second drop-down with these values [abc, def, ghk]. My requirement is that when I select the value [y] in the first drop-down, I want to disable the second drop-down and set the value as [def]. The author should not be able to change the value of the second drop-down when [y] is selected in the first down (it should be defaulted to [def]).

Upvotes: 1

Views: 5828

Answers (1)

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

Disclaimer: This solution is not meant to be perfect, I tested it and it works on a vanilla installation of AEM 6.2 (no CFP or SP installed). The javascript API's may change with CFP's and SP's. However, the solution below should serve as a good foundation and with a bit of debugging you can make it work with your environment.

It seems like there was no good resources on the web, at-least not ones that do what you're asking properly, so I wrote a solution:

I created the following component:

HTML:

<h1> dropdown test placeholder</h1>
<h4>first: ${properties.first}</h4>
<h4>second: ${properties.second}</h4>

cq:dialog

Please note the following:

  1. The root node of the dialog has extraClientlibs="[dropdown-author-clientlib]" this is our clientlib category where we will add the custom code
  2. The dropdown nodes have id's id="first-dropdown" and id="first-dropdown" so we can easily select them in our code
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    xmlns:cq="http://www.day.com/jcr/cq/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="Example Dialog"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[dropdown-author-clientlib]">
    <content jcr:primaryType="nt:unstructured"sling:resourceType="granite/ui/components/foundation/container">
        <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" />
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <first jcr:primaryType="nt:unstructured" fieldLabel="First" id="first-dropdown" name="./first" sling:resourceType="granite/ui/components/foundation/form/select">
                        <items jcr:primaryType="nt:unstructured">
                            <default jcr:primaryType="nt:unstructured" text="(default)" value="" />
                            <x jcr:primaryType="nt:unstructured" text="x" value="x" />
                            <y jcr:primaryType="nt:unstructured" text="y" value="y" />
                            <z jcr:primaryType="nt:unstructured" text="z" value="z" />
                        </items>
                    </first>
                    <second jcr:primaryType="nt:unstructured" fieldLabel="second" id="second-dropdown" name="./second" sling:resourceType="granite/ui/components/foundation/form/select">
                        <items jcr:primaryType="nt:unstructured">
                            <def jcr:primaryType="nt:unstructured" text="def" value="def" />
                            <ghi jcr:primaryType="nt:unstructured" text="ghi" value="ghi" />
                            <abc jcr:primaryType="nt:unstructured" text="abc" value="abc" />
                            <default jcr:primaryType="nt:unstructured" text="(default)" value="" />
                        </items>
                    </second>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

The clientlib: Under the component, I created this clientlib:

categories="[dropdown-author-clientlib]"

I wont get into creating a clientlib, it's simple enough.

in the clientlib, I added the following script.js file:

(function(){
  var $doc = $(document);
  var $first, $second;
  $doc.on('foundation-contentloaded', function(e) { // 'foundation-contentloaded' triggered when dialog is ready
    $dialog = $(e.target); 
    // get "Coral UI 2" select instance reference: https://helpx.adobe.com/experience-manager/6-2/sites/developing/using/reference-materials/coral-ui/components/Coral.Select.html#
    firstSelect = $dialog.find('#first-dropdown').data('select'); // coral ui select instance
    secondSelect = $dialog.find('#second-dropdown').data('select'); // coral ui select instance

    // enables/disables the second select based on value provided
    function toggleSecond(firstVal){
      if(firstVal === 'y'){
        secondSelect._select('def', 'def'); // first is the value, second is the display text
        secondSelect.set('disabled', true)
        // we need to remove 'disabled' attr from the actul select inorder for it to be submitted with form submit
        secondSelect.$element.find('select').removeAttr('disabled');
      }
      else {
        secondSelect.set('disabled', false)
      }
    }

    // run when dialog opens
    toggleSecond(firstSelect.getValue());

    // 'selected' is not in the documentation, change does not work, found this by looking into the js code
    firstSelect.on('selected', function(e){
      toggleSecond(e.selected);
    })
  });
})();

Now when you select y in the first dropdown, the second one will be set to 'def' and disabled.

The code above should be simple enough to follow, I added comments to make it even easier to follow. Let me know if you have any questions.

Upvotes: 2

Related Questions