Update the options of a Granite Touch UI Select according to the value of another Select | Adobe Higher Education
Skip to main content
B
boser87
Level 4
October 16, 2015
해결됨

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

  • October 16, 2015
  • 4 답변들
  • 3161 조회

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

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

4 답변

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

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
smacdonald2008
Level 10
October 16, 2015

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
smacdonald2008답변
Level 10
October 16, 2015

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”/>
B
boser87작성자
Level 4
October 16, 2015

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

약관 및 조건Accessibility statement

Loading footer...