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
Related Conversations
