Update the options of a Granite Touch UI Select according to the value of another Select

[boser87]

Hi,

I'm trying to understand how to update the options of a TouchUI Select (/libs/granite/ui/components/foundation/form/select) according to the value chosen from another TouchUI Select. The value of the first select are dynamically populate trought a datasource. I guess I have to write some handler to attach to some JS event. Do you have any example?

Thank you!

[smacdonald2008]

I know that we are thin on examples on Touch UI. This is a focus of the community team right now. We will also write some community articles. I want to get this use case captured in an AEM community article. 

I am looking for some examples right now to point you to.  I will post back my findings. 

As i mentioned - we will be conducting AEM Ask the Experts around Touch UI. Keep a look out for registration - maybe posted tomorrow or early next week on this forum. 

[smacdonald2008]

We have this exact use case documented in a community article:

Dynamically updating AEM custom xtype fields

However - this is for a custom xtype - not implemented in Granite UI APIs. 

We are looking to see if there is an article or example for Touch UI. 

One option that you do have is to write this as a custom xtype. A custom xtype does work in Touch UI:

Using custom xtypes in Adobe Experience Manager 6 Touch UI

One thing to also keep in mind is we are doing AEM Ask the Community Experts around Touch UI. We will look at getting this use case into that webinar.

[smacdonald2008 · Accepted solution]

Here is an update from internal Adobe community:

*************************

The trick for triggering JS methods is to add a unique class on your specific field.

<sample

    jcr:primaryType="nt:unstructured"

    sling:resourceType="granite/ui/components/foundation/form/select"

    class="cq-dialog-asset-path"

    name="./sample"/>

Similarly on target field add class=”cq-dialog-dropdown-onchange-target"

I'm using Adobe Send & Track.
You can view "sample.js" at: https://files.acrobat.com/a/preview/68504f73-1ba4-42b7-804a-baea97cb9214

Add create a  clientlib with this JS that has  

categories="[cq.authoring.dialog]"

dependencies="[granite.jquery]"

Update:

More information:

The code below basically gets the value for the asset_type property that I defined in the dialog. That is just something we are using to determine what ID to get. Notice the listener.

$( ASSET_ID_CLASS ).on('change:value', function(event, payload) {         var url = "/bin/freestyle-cms/wcm/getassetpath?type=" + assetType + "&id=" + payload.value;         updateAssetPath( url );         // executing autopopulateonchange method after Asset path value is set.         freestyle_ns.autoPopulateOnChange($(this));     });

<assetpath     jcr:primaryType="nt:unstructured"     sling:resourceType="granite/ui/components/foundation/form/hidden"     assettype=“base_page” —> asset type.    class="cq-dialog-asset-path"     name="./ko:assetPath”/>

[boser87]

Thank you very much for your help! I will definitely try your solution!