AEM 6.4 - How to Read and Set the select dropdown value in Javascript in Coral3

[karanmahi]

I have a dropdown in touch ui dialog. My requirement is to read the select value in javascript(clientlib) and based on that value I want to set the value in second dropdown and disable second dropdown so that author cannot select any other value. Somebody, provide any reference to make it work in coral-3.

<first jcr:primaryType="nt:unstructured" fieldLabel="First" name="./first" 
         sling:resourceType="granite/ui/components/coral/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> 

[arunpatidar · Accepted solution]

Hi,

I had created similar js to load dropdown based on page selecting in path browser. You can take reference.

Just set granite:id  to your both dropdown and create one hidden item to store/prepopulate second dropdown value.

aem63app-repo/dynamic-dropdown.js at master · arunpatidar02/aem63app-repo · GitHub

[karanmahi]

@Arun - Can you please share the touch ui dialog content.xml so that I can understand the nodes and granite:class. Or, if you could attach the working package, that would be great.

[smacdonald2008]

In addition to Arun response (which we marked as correct) - we will see if we have other examples too.

We know that working with Granite types is a very popular topic. As a result, we have scheduled our community webinar - Ask the AEM Community Experts - to include this topic in May.

[smacdonald2008]

In addition - team suggested that you look here:

https://experience-aem.blogspot.com/2019/02/aem-6420-adding-composite-multifield-items-based-on-cora...

[arunpatidar]

Please find package at dynamic-dropdown.zip