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.
Solved! Go to Solution.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies