Listener not working in Touch UI, but working in Classic UI

[cquser1]

Hi All,

Details as below :

#1] I am trying to develop a custom column control component[AEM 6.2] that accepts any number of fields.Say a user can enter 1 or 50, and using a number field. The dialog corresponding to it is attached[dialog.txt].

#2] Read in multiple locations that the dialog conversion tool changes only the dialog fields[classic UI to touch UI ] , but not listeners.

#3] Tweaked the OOTB js file present in location /apps/acs-commons/widgets/source/js/validate_responsive_column_control_dialog.js. The tweaked code is attached in js.txt.

#4] When I check for the same component in classic UI the validation is happening perfectly. 

Tried multiple things, but not able to get this to work. Any pointers/reference code to achieve the same will be really helpful.

[cquser1]

Looks like not able to upload attachments, copy pasting the content of dialog.txt as 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:Dialog"
    title="Responsive Column Control"
    width="600"
    xtype="dialog">
    <items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <tab1
                jcr:primaryType="cq:Panel"
                title="Columns">
                <items jcr:primaryType="cq:WidgetCollection">
                    <columns
                        jcr:primaryType="cq:Widget"
                        fieldDescription="Description"
                        fieldLabel="Label"
                        name="./columnlayout"
                        orderable="{Boolean}false"
                        maxValue="6"
                        minValue="3"
                        xtype="numberfield">
                    </columns>
                </items>
            </tab1>
        </items>
    </items>
    <listeners
        jcr:primaryType="nt:unstructured"
        beforesubmit="function(dialog){ return ACS.CQ.ColumnControl.validateDialog(dialog); }"/>
</jcr:root>

[cquser1]

Looks like not able to upload attachments, copy pasting the content of js.txt as below :

/*
 * #%L
 * ACS AEM Commons Package
 * %%
 * Copyright (C) 2014 Adobe
 * %%
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * #L%
 */
/*global CQ: false, ACS: false */
CQ.Ext.ns("ACS.CQ.ColumnControl");

ACS.CQ.ColumnControl.validateDialog = function(dialog) {
    var fields = dialog.findByType("numberfield"),
        expectedMin = 3,
        expectedMax = 6,
        width = 0;

    CQ.Ext.each(fields, function(field) {
        width += field.getValue();
    });

    if (width < expectedMin) {
        CQ.Ext.Msg.show({
            title:'Validation Error',
            msg:'Total width of all columns needs to be exactly 100 percent!',
            buttons: CQ.Ext.MessageBox.OK,
            icon:CQ.Ext.MessageBox.ERROR
            });
        return false;
    }
    return true;
};

[cquser1]

Hi All,

Tried multiple things, but no luck.

#1] So, removed the listener and tried following the clientlibs way as mentioned in the below article

https://helpx.adobe.com/experience-manager/using/creating-touchui-validate.html 

but no luck.

Any thoughts/reference code will be really helpful.

[smacdonald2008]

The Touch UI does not support the same Event handler as classic ui does. See the ATCE session on this.  See http://scottsdigitalcommunity.blogspot.ca/2015/04/april-session-of-ask-aem-community.html?m=0

[cquser1 · Accepted solution]

HI Scott,

Thank you for your reply.

With the below snippet, the validation message is coming fine.

(function (document, $, ns) {
    "use strict";

    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var $form = $(this).closest("form.foundation-form"),
            title = $form.find("[name='./columnlayout']").val(),
            message, clazz = "coral-Button ";

        if(title<3 || title>6){
            message = "Not possible";
            clazz = clazz + "coral-Button--warning";
        }
        else{
            message = "Submit?";
            clazz = clazz + "coral-Button--primary";
        }

        ns.ui.helpers.prompt({
            title: Granite.I18n.get("Confirm"),
            message: message,
            actions: [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                },{
                    id: "SUBMIT",
                    text: "SUBMIT",
                    className: clazz
                }
            ],
            callback: function (actionId) {
                if (actionId === "SUBMIT") {
                    $form.submit();
                }
            }
        });
    });
})(document, Granite.$, Granite.author);

However, looks like have to tweak this further to prevent  user from submitting the form[which is currently happening in both scenarios].

[cquser1]

Phew, finally it works this way. In case there are any other better approaches to this, please do let me know.