How to give limit on number of multifield items in touch ui

[Vijaya_Immadise]

Hi

I have developed one multifield component for touch ui. I would like to place limit on number of multifield items. Please let me know how to do that?

Thanks

Regards,

Vijaya

[smacdonald2008]

This can be done. See this community article to learn how to do this:

http://experience-aem.blogspot.com/2015/11/aem-61-sample-granite-widget-in-touch-ui-extending-multif...

Hope this helps... 

[kautuk_sahni · Accepted solution]

Hi 

Adding to what scott said,

Please have a look at this similar post:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

// Multifield Limits in Touch UI    

    After working with AEM there are a number of ways to accomplish this, but I found it easiest to handle via clientlibs that are called during AEM dialogs. I have had to do it to a project myself.

    You will need to do two things:

    Create a clientlib that has logic 
    Add that clientlib to be called when that specific dialog is in use
    I would suggest watching this cq gem as it demonstrates how to do the above as far as getting the logic to javascript to fire at the right time. The rest will be jQuery magic.

    http://dev.day.com/content/ddc/en/gems/customizing-dialog-fields-in-touch-ui.html

Reference article :- http://stackoverflow.com/questions/33601730/how-to-limit-nested-multifield-in-aem

// Using Jquery you can achieve this.You can try the below steps: 

1) Create the clientlib folder under your component with categories (String[]) - cq.authoring.dialog
2) In the js file write the below code:

(function($, $document) { "use strict"; $document.on("dialog-ready", function() { var fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' " + "data-init='quicktip' data-quicktip-type='error' />"); var currentTimeMillis = new Date().getTime(); var countValidatorId = "multifield-validator-" + parseInt(currentTimeMillis); var $countValidatorField = $("#" + countValidatorId), $multifield = $("div.coral-Multifield"), fieldLimit = 3, count = $multifield.find(".coral-Multifield-input").length; $.validator.register({ selector: $countValidatorField, validate: validate, show: show, clear: clear }); $multifield.on("click", ".js-coral-Multifield-add", function(e) { console.log("Add Called"); ++count; adjustMultifieldUI(); }); $multifield.on("click", ".js-coral-Multifield-remove", function(e{ --count; adjustMultifieldUI(); }); function adjustMultifieldUI() { $countValidatorField.checkValidity(); $countValidatorField.updateErrorUI(); var $addButton = $multifield.find(".js-coral-Multifield-add"); if (count >= fieldLimit) { $addButton.attr('disabled', 'disabled'); var arrow = $multifield.closest("form").hasClass("coral-Form--vertical") ? "right" : "top"; fieldErrorEl.clone() .attr("data-quicktip-arrow", arrow) .attr("data-quicktip-content", "Limit is 3") .insertAfter($multifield); } else { $addButton.removeAttr('disabled'); $multifield.nextAll(".coral-Form-fielderror").tooltip("hide").remove(); } } function validate() { if (count <= fieldLimit) { return null; } return "Limit set to " + fieldLimit; } function show($el, message) { this.clear($countValidatorField); var arrow = $multifield.closest("form").hasClass("coral-Form--vertical") ? "right" : "top"; fieldErrorEl.clone() .attr("data-quicktip-arrow", arrow) .attr("data-quicktip-content", message) .insertAfter($multifield); } function clear() { $multifield.nextAll(".coral-Form-fielderror").tooltip("hide").remove(); } }); })($, $(document));

I hope this would help you.

~kautuk

[Vijaya_Immadise]

Hi,

Thank you for the reply. I have implemented as mentioned above. It is working fine. But here I have few queries.

1)Clientlibs - categories[]- cq.authoring.dialog.   Is this mandatory to give category name as cq.authoring.dialog ? Because I tried to give another name. then it is not working. please explain

2) Suppose I have another component with multifield and for that also I need to implement some logic. In such cases how to do that. I would like to explain this with example

a) I have one dialog with multifield and the limit on number of items is :4. For this I have implemented the logic as mentioned above

b) I have another component dialog with multifield . I need to implement some logic in that. Suppose limit on number of items is 6. and I have few alert messages also.

Here aslo I have component specific clientlibs with categories cq.authoring.dialog. and listeners related js. 

So , here one thing happend which I am not able to understand.

alert messages are getting executed for first component dialog also. and the limit implemented for first dialog getting applied on second also.

Please let me how to resolve this. Please let me know , how to implement listeners for multiple dialogs present in different components

Thanks

Regards,

Vijaya

[kautuk_sahni]

Hi Vijay

I would request you to please create a separate question for followup questions and mark this question as answered.

But for your reference please find below answer to your few questions:

1. To have your client library loaded for all dialogs, set the category property of your client library to cq.authoring.dialog. This enables to use all the functions available in Granite UI.

~kautuk