Skip to main content
herr_lange
herr_lange
Nov 13, 2015 12:48 PM UTC
Solved

Add an eventhandler to a select filed in options dialog

Hi,

I'm developing a component for AEM 6, now I'm stuck. I need to change the shown tabs in the options dialog, on an onChange event (or something similar) hopefully thrown by the select field I'm using.

Here is the code for my select field:

<graphtype jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" emptyText="Please select a charttype." fieldLabel="Charttype" name="./chartType"> <items jcr:primaryType="nt:unstructured"> <chart1 jcr:primaryType="nt:unstructured" value="line" text="Line Chart" selected="{Boolean}true"/> <chart2 jcr:primaryType="nt:unstructured" value="bar" text="Bar Chart"/> </items> </graphtype>

And the tabs in need to switch:

<diagramm jcr:primaryType="nt:unstructured" jcr:title="Chart" sling:resourceType="granite/ui/components/foundation/section"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" margin="{Boolean}false"/> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> ... here some options ... </items> </column> </items> </diagramm>

These tabs all have a similar structure, but important divergences between their content.

My Questions:
Is there a way to activate one of these tabs an hide the other, depending on the selected item in the select field shown above?
How to implement this solution?

Thanks for your help.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
herr_lange
herr_langeAccepted solution
Nov 17, 2015 10:07 AM UTC

Found it. I had the wrong clientlib directory. It works fine now.

View in thread

3 replies

edubey
edubey
Level 10
Nov 14, 2015 10:07 AM UTC

Take a look at OOTB List components, it does same where tabs are hidden / shown based on item in select field.

You can see the listeners which does this in list component @ /libs/foundation/components/list/dialog

Translate
herr_lange
herr_langeAuthor
Nov 16, 2015 12:52 PM UTC

Thanks for your answer. But I need an implementation example for the Touch UI and their is this way not suported. I tried the way using jQuery from here: https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html.

I tested with this code:

(function($) { "use strict"; $(document).on('dialog-ready', function(){ alert('dialog opened'); }); $(document).ready(function(){ alert('Document ready\nTest'); // this is the only event I got }); })(jQuery);

But it seems to me that the dialog didn't throw any event.

Translate
herr_lange
herr_langeAuthorAccepted solution
Nov 17, 2015 10:07 AM UTC

Found it. I had the wrong clientlib directory. It works fine now.

Translate
Terms & ConditionsAccessibility statement

Loading footer...