Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
Adding multifields based on numberfield in AEM 6.4
Hello Everyone,
I am creating a component in which I need to add multifields based on the increment or decrement in the numberfield.
For example in the above dialog - Suppose the author adds 3 in the numberfield, now he should be able to add only 3 sets of multifields in the dialog. That is he should be able to click on the "Add" button only 3 times and 3 sets of the field should be available. I am using Coral UI 3 for dialog creation.
Can anyone please provide some insights for the same? I have seen examples with checkbox and select but none with the numberfield.
Thanks and Regards,
Bernadine
Hi,
You need to write a listener same as to check min or max field but in your case min=max=number field.
no need to add data attribute(granite:data) node.
check this How to set min max item in Multifield AEM 6.3?
Arun Patidar
It does work,
Please check sample script on dialog submit
I am using Coral3/Granite type field.
(function($, $document) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function(e) {
var inputSelector = $('#multi-number-id');
var inputVal = inputSelector.find("input.coral3-Textfield").attr("aria-valuenow");
var multifieldSelector = $('#multi-id');
var multiFieldItem = multifieldSelector.find("coral-multifield-item").size();
if (multiFieldItem !== inputVal) {
function getDialog() {
var dialog = new Coral.Dialog();
dialog.id = 'dialogId';
dialog.header.innerHTML = '<coral-alert-header>Dialog cannot be submitted</coral-alert-header>';
dialog.content.innerHTML = '<coral-alert-content>Number of multifield Items are not equal to Number</coral-alert-content>';
dialog.footer.innerHTML = '<button is="coral-button" variant="primary" coral-close><coral-button-label>Ok</coral-button-label></button>';
dialog.variant = "error";
return dialog;
}
var dialog = getDialog();
document.body.appendChild(dialog);
dialog.show();
return false;
}
});
$(document).on("change", "#multi-number-id", function(e) {
var inputSelector = $('#multi-number-id');
var inputVal;
setTimeout(function(){
inputVal = inputSelector.find("input.coral3-Textfield").attr("aria-valuenow");
console.log(inputVal.Value);
var multifieldSelector = $('#multi-id');
var multiFieldItem = multifieldSelector.find("coral-multifield-item").size();
if (multiFieldItem >= inputVal) {
multifieldSelector.find("button[coral-multifield-add]").attr("disabled","disabled");
}else{
multifieldSelector.find("button[coral-multifield-add]").removeAttr("disabled");
}
}, 100);
});
})($, $(document));
Arun Patidar
"#multi-number-id" and "#multi-id" are the selectors to input field and multifield
you need to add granite:id if using Coral3 type otherwise id property to input filed and multifield
multifield node
granite:id=multi-id
input(textfield)
granite:id=multi-number-id
Arun Patidar
