Add an eventhandler to a select filed in options dialog | Community
Skip to main content
herr_lange
herr_lange
New Participant
November 13, 2015
Solved

Add an eventhandler to a select filed in options dialog

  • November 13, 2015
  • 3 replies
  • 1792 views

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.
Best answer by herr_lange

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

3 replies

herr_lange
herr_langeAuthorAccepted solution
New Participant
November 17, 2015

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

herr_lange
herr_langeAuthor
New Participant
November 16, 2015

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.

edubey
edubey
New Participant
November 14, 2015

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

Terms & ConditionsAccessibility statement

Loading footer...