Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

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

Avatar

Level 4

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!

1 Accepted Solution

Avatar

Correct answer by
Level 10

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/>

View solution in original post

4 Replies

Avatar

Level 10

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. 

Avatar

Level 10

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.

Avatar

Correct answer by
Level 10

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/>

Avatar

Level 4

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