Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

how to call function on click of Create button in Touch UI AEM

Avatar

Level 2

In classic UI, we have listeners with help of that i am able to call function. I am now changing the same to Touch UI. I am able to customize the page properties and added validation of blank field. But not sure about the function call using create button.

IN AEM Touch UI Page creation, I want to call function on click of "Create" button while setting properties. I am not sure about the way to call this.

Please suggest.

1 Accepted Solution

Avatar

Correct answer by
Level 10

As @Scott mentioned, use the button 'on' click event in JQuery, Refer [1] for the hint

[1] https://docs.adobe.com/docs/en/cq/5-6-1/touch-ui/granite-UI-cheatsheet.html

View solution in original post

3 Replies

Avatar

Level 10

When using Touch UI, you have to use JQuery event handling to work with events. Granite APIs do not have  event handlers. See this article to get you pointed in the right direction:

http://scottsdigitalcommunity.blogspot.ca/2015/05/using-event-handlers-in-adobe.html

Hope this helps

Avatar

Correct answer by
Level 10

As @Scott mentioned, use the button 'on' click event in JQuery, Refer [1] for the hint

[1] https://docs.adobe.com/docs/en/cq/5-6-1/touch-ui/granite-UI-cheatsheet.html

Avatar

Administrator

Hi

Adding to what Scott has suggested, 

Please find below another way of doing the same.

//

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

An AEM Touch UI component that uses event handlers

 

//

Link:- http://experience-aem.blogspot.in/2015/04/aem-6-sp2-sample-datasource-touch-ui-select-listener.html

TouchUI Select Listner

    
(function ($, $document) {
    "use strict";
 
    var COUNTRY = "./country", CAPITAL = "./capital";
 
    function adjustLayoutHeight(){
        //with only two selects, the second select drop down is not visible when expanded, so adjust the layout height
        //fixedcolumns i guess doesn't support property height, so fallback to jquery
        $(".coral-FixedColumn-column").css("height", "18rem");
    }
 
    $document.on("dialog-ready", function() {
        adjustLayoutHeight();
 
        //get the country widget
        var country = new CUI.Select({
            element: $("[name='" + COUNTRY +"']").closest(".coral-Select")
        });
 
        //get the capital widget
        var capital = new CUI.Select({
            element: $("[name='" + CAPITAL +"']").closest(".coral-Select")
        });
 
        if(_.isEmpty(country) || _.isEmpty(capital)){
            return;
        }
 
        //workaround to remove the options getting added twice, using CUI.Select()
        country._selectList.children().not("[role='option']").remove();
        capital._selectList.children().not("[role='option']").remove();
 
        //listener on country select
        country._selectList.on('selected.select', function(event){
            //select country's capital and throw change event for touchui to update ui
            capital._select.val(event.selectedValue).trigger('change');
        });
 
        //listener on capital select
        capital._selectList.on('selected.select', function(event){
            //select capital's country and throw change event for touchui to update ui
            country._select.val(event.selectedValue).trigger('change');
        });
    });
})($, $(document));
 

 

 

 

//

Link:- http://experience-aem.blogspot.in/2015/02/aem-6-sp2-touch-ui-sample-dialog-ready-event-listener.html

A simple dialog-ready event listener fired when a Touch UI dialog is opened (listener top aligns field labels)


(function ($, $document) {
    "use strict";
 
    $document.on("dialog-ready", function() {
        $(".coral-Form-fieldlabel").css("float", "none");
    });
})($, $(document));

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni