Listener not working in Touch UI, but working in Classic UI | Community
Skip to main content
cquser1
cquser1
Level 7
February 5, 2017
Solved

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

  • February 5, 2017
  • 6 replies
  • 3235 views

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.

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 cquser1

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].

6 replies

cquser1
cquser1Author
Level 7
February 5, 2017

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
cquser1Author
Level 7
February 5, 2017

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
cquser1Author
Level 7
February 5, 2017

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
smacdonald2008
Level 10
February 5, 2017

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
cquser1AuthorAccepted solution
Level 7
February 5, 2017

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
cquser1Author
Level 7
February 6, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...