我在AEM 6.1中使用嵌套多字段触摸UI，我要求限制多字段，我已经看到了常见的acs（maxItems - 验证），但它没有帮助我。 请提供您的指导。
答案 0 :(得分：0)
使用Jquery可以实现此目的。您可以尝试以下步骤：
1）使用categories (String[]) - cq.authoring.dialog
在组件下创建clientlib文件夹
2）在js文件中编写以下代码：
(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));
您必须重构此代码并删除一些未使用的属性，但可以让您开始。打开对话框后，还要确保您的js正在接听电话。排灯节快乐老兄。
答案 1 :(得分：0)
The solution works in AEM 6.3, the limit is configured in the dialog instead of hard coding it. This helps configure the value individually for each component.
(function ($, $document) {
"use strict";
$(document).on('dialog-ready', function (e) {
var multifieldLimit = $('.cq-Dialog').find('coral-multifield').find('section').attr("data-maxmultifieldlimit");
if(multifieldLimit) {
$('.cq-Dialog').find('coral-multifield').children('button').each(function(i) {
$(this).click(function(e){
var itemCount = 0;
$('.cq-Dialog').find('coral-multifield').children('coral-multifield-item').each(function(i) {
itemCount+=1;
});
if(itemCount==parseInt(multifieldLimit)){
e.stopPropagation();
alert('You have added maximum number of items in this multifield');
}
});
});
}
});
$document.on("click", ".cq-dialog-submit", function(e){
var minMultifieldLimit = $('.cq-Dialog').find('coral-multifield').find('section').attr("data-minmultifieldlimit");
if(minMultifieldLimit) {
var itemCount = 0;
$('.cq-Dialog').find('coral-multifield').children('coral-multifield-item').each(function(i) {
itemCount+=1;
});
if(itemCount<parseInt(minMultifieldLimit)){
alert('You have to at least add few more items');
e.preventDefault();
}
}
});
})($, $(document));
Dialog XML
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Configure Card Component"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Text">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldset
jcr:primaryType="nt:unstructured"
jcr:title="Configure Card"
sling:resourceType="granite/ui/components/foundation/form/fieldset">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<pages
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
class="full-width"
eaem-nested=""
fieldDescription="Click '+' to add a new page"
fieldLabel="Add Card">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fieldset"
acs-commons-nested="JSON_STORE"
maxMultifieldLimit="4"
minMultifieldLimit="2"
name="./props">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
method="absolute"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<headline
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Headline"
maxlength="50"
name="./headline"/>
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="Text"
name="./byline"
required="{Boolean}false"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<misctools
jcr:primaryType="nt:unstructured"
features="*"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"/>
</rtePlugins>
</text>
<textAlignment
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldLabel="Content Alignment"
name="./alignContent">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
text="Center"
value="center"/>
<button
jcr:primaryType="nt:unstructured"
text="Left"
value="left"/>
</items>
</textAlignment>
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Select image"
name="./imageUrl"
rootPath="/content/dam"/>
<linkpath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Link Url"
name="./buttonUrl"
rootPath="/content/website”/>
<linktext
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Link Text"
maxlength="50"
name="./buttonText"/>
<openNewTab
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
fieldDescription="Please check the checkbox to open link in a new tab"
fieldLabel="Open link in a new tab"
name="./newTab"
text="Open link in a new tab"
title="Open link in a new tab"
value="_target"/>
</items>
</column>
</items>
</field>
</pages>
</items>
</column>
</items>
</fieldset>
</items>
</column>
</items>
</content>
</jcr:root>