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

[manank71376227]

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.

[smacdonald2008]

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

[Lokesh_Shivalingaiah · Accepted solution]

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

[kautuk_sahni]

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

        //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components...

        $(".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