Listeners are not working in AEM6 Touch UI

[Dinu_Arya]

Hi,

I have a requirement that I need to set some text to textfield when checkbox is checked. I wrote a listener for this. It is working fine in Classic UI.

But it is not working in Touch UI. My dialog.xml is like below -

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Panel"
    title="Article">
    <items jcr:primaryType="cq:WidgetCollection">        
        <article
            jcr:primaryType="cq:Widget"
            collapsed="{Boolean}true"
            collapsible="{Boolean}true"
            title="Article Content"
            xtype="dialogfieldset">
            <items jcr:primaryType="cq:WidgetCollection">                                            
                <modifiedDateFlag
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Enable to display the  modified date on front end"
                    fieldLabel="Modified Date"
                    name="./modifiedDateFrontEndFlag"
                    type="checkbox"
                    xtype="selection">
                    <listeners
                        jcr:primaryType="nt:unstructured"
                        selectionchanged="function(comp){var dlg=comp.findParentByType(&quot;dialog&quot;);var textfield=dlg.getField(&quot;./pageModifiedDate&quot;);textfield.setReadOnly(true);if(this.getValue()==&quot;true&quot;){var today=new Date();var dd=today.getDate();var mm=today.getMonth()+1;var hrs=today.getHours();var mins=today.getMinutes();var sec=today.getSeconds();var yyyy=today.getFullYear();if(dd&lt;10){dd=&quot;0&quot;+dd;}if(mm&lt;10){mm=&quot;0&quot;+mm;}var today1=mm+&quot;/&quot;+dd+&quot;/&quot;+yyyy+&quot; &quot;+hrs+&quot;:&quot;+mins+&quot;:&quot;+sec;textfield.setValue(today1);}}"/>
                </modifiedDateFlag>
                <modifiedDate
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Modified Date of Article"
                    fieldLabel="Modified  Date"
                    name="./pageModifiedDate"
                    xtype="textfield"/>
            </items>
        </article>
    </items>
</jcr:root>

Please let me know the solution ASAP.

Thanks,

Arya.

[smacdonald2008]

I am going to verify if i get the same results in AEM 6. I will post the findings to see if its a bug or if there is extra settings that need to be done. 

[Dinu_Arya]

Hi Scott,

Thanks for the response. I have created the same dialog(cq:dialog) as per Touch UI (i.e.) used "sling:resourceType" instead of xtype for each widget. It's created the following xml -

Checkbox listener file:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Widget"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    fieldDescription="Enable to display the  modified date on front end"
    fieldLabel="Modified Date"
    name="./modifiedDateFrontEndFlag"
    text="Modified Date"
    type="checkbox"
    xtype="selection">
    <listeners
        jcr:primaryType="nt:unstructured"
        selectionchanged="function(comp){var dlg=comp.findParentByType(&quot;dialog&quot;);var textfield=dlg.getField(&quot;./pageModifiedDate&quot;);textfield.setReadOnly(true);if(this.getValue()==&quot;true&quot;){var today=new Date();var dd=today.getDate();var mm=today.getMonth()+1;var hrs=today.getHours();var mins=today.getMinutes();var sec=today.getSeconds();var yyyy=today.getFullYear();if(dd&lt;10){dd=&quot;0&quot;+dd;}if(mm&lt;10){mm=&quot;0&quot;+mm;}var today1=mm+&quot;/&quot;+dd+&quot;/&quot;+yyyy+&quot; &quot;+hrs+&quot;:&quot;+mins+&quot;:&quot;+sec;textfield.setValue(today1);}}"/>
</jcr:root>

Textfield XML:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Widget"
    sling:resourceType="granite/ui/components/foundation/form/textfield"
    fieldDescription="Modified Date of Article"
    fieldLabel="Modified  Date"
    name="./pageModifiedDate"
    xtype="textfield"/>

Still listeners are not working in TouchUI. Please let me know the process of creating listeners to work in TouchUI.

Thanks,

Arya.

[Dinu_Arya]

Hi Team,

Any updates/solutions?

Thanks,

AryA.

[justin_at_adobe]

Hi,

I'm not really clear on what you are trying to accomplish. Are you building a Classic UI (ExtJS) dialog or a TouchUI (Granite UI) dialog? The examples above seem to be a weird mix of both. The two dialog definitions aren't interrelated and you can't mix them like this.

I just did a quick test of a Classic UI dialog loaded into the Touch UI using the compatibility view and listeners work just fine for me. 

Justin

[Dinu_Arya]

Hi Justin,

First I created the dialog in classic UI and written listeners, working fine. After that I created the same dialog using Granite UI and used the same listeners. But in touch ui the listeners are not working :(

Thanks,

AryA.

[justin_at_adobe · Accepted solution]

Hi,

It looks to me like you are trying to use the ExtJS listeners mechanism with Granite UI. This won't work as Granite UI doesn't use ExtJS. Did you see any documentation suggesting that this would work? If so, please let me know so that I can have that fixed.

It is also very strange to use the cq:Widget node type with Granite UI dialogs, but I guess it works.

Regards,

Justin

[Dinu_Arya]

justin_at_adobe wrote...

Hi,

It looks to me like you are trying to use the ExtJS listeners mechanism with Granite UI. This won't work as Granite UI doesn't use ExtJS. Did you see any documentation suggesting that this would work? If so, please let me know so that I can have that fixed.

It is also very strange to use the cq:Widget node type with Granite UI dialogs, but I guess it works.

Regards,

Justin

Hi,

yes. I'm trying to use classic UI (ExtJS) listeners method to Granite UI fields. I didn't follow any doc for this. I just tried and they are not working. I looked OOTB componens but I didn't get an listener example to use in Granite UI. Please suggest how can I achieve this in Granite UI? yes. cq:widget is working. May be in Saturday's release this might got fixed.

Thanks,

AryA.