I can't find the problem in my code. The number of rows is always correct, but it only shows the values of the last object in the array of the binding. I'm using the correct aggregation <items> so that's not the issue. Maybe (I hope) I'm just overlooking something.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{i18n>selectionTitle}" horizontalScrolling="false">
<beginButton>
<Button text="{i18n>closeSelectionButton}" press="handleCloseSelectedTrainings"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submitSelectionButton}" press="handleSubmitSelectedTrainings"/>
</endButton>
<content>
<List noDataText="Empty" items="{selectedTrainings>/}" mode="Delete" delete="handleDeleteSelectionItem">
<items>
<CustomListItem >
<HBox>
<core:Icon size="2rem" src="{icon}" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
<Text text="{Title}" />
<Label text="{Type} {= ${Begda} ? ${Begda}.toLocaleDateString() : '' }"/>
<HBox>
<CheckBox text="{i18n>selectionMgrApproved}" selected="{Approved}" />
</HBox>
</VBox>
</HBox>
</CustomListItem>
</items>
</List>
</content>
</Dialog>
You are using named model selectedTrainings for items bindings and you forgot to put a model name into CustomListItem elements. Put a model name into bindings like this:
<Text text="{selectedTrainings>Title}" />
I am using nested multifield for touch UI in AEM 6.1 and I have requirement to limit the multifield , I already saw acs common (maxItems--validation)but its not helping me .
Please provide your guidance on this.
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));
You have to do the refactoring of this code and removed some unused properties, but can give you start. Also make sure your js is getting call once you open the dialog. Happy Diwali Dude.
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>
I'm using an html5smartimage that allow the user to upload an image.
Here is my dialog configuration:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog" height="600" width="900" xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<tabs jcr:primaryType="cq:TabPanel">
<items jcr:primaryType="cq:WidgetCollection">
<tabText
jcr:primaryType="cq:Widget"
anchor="100%"
title="Text"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<richFlag
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./textIsRich"
value="true"
xtype="hidden"/>
<text
jcr:primaryType="cq:Widget"
editElementQuery="div[class="text"]"
hideLabel="{Boolean}true"
name="./text"
xtype="richtext"/>
</items>
</tabText>
<tabImage
jcr:primaryType="cq:Widget"
title="Image"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<title jcr:primaryType="cq:Widget"
fieldLabel="Title"
name="./image/jcr:title"
xtype="textfield"/>
<alt jcr:primaryType="cq:Widget"
fieldLabel="Alt"
fieldDescription="(leave empty to use the title defined above)"
name="./image/alt"
xtype="textfield"/>
<description
jcr:primaryType="cq:Widget"
fieldLabel="Description"
name="./image/jcr:description"
xtype="textarea"/>
<size
jcr:primaryType="cq:Widget"
fieldLabel="Size"
heightParameter="./image/height"
widthParameter="./image/width"
xtype="sizefield"/>
<image
jcr:primaryType="cq:Widget"
allowUpload="{Boolean}true"
cropParameter="./image/imageCrop"
ddGroups="[media]"
width="{Long}300"
height="{Long}350"
fileNameParameter="./image/fileName"
fileReferenceParameter="./image/fileReference"
mapParameter="./image/imageMap"
name="./image/file"
requestSuffix="/image.img.png"
rotateParameter="./image/imageRotate"
title="Image"
xtype="html5smartimage">
<items jcr:primaryType="cq:WidgetCollection">
<resType
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./image/sling:resourceType"
value="foundation/components/image"
xtype="hidden"/>
</items>
</image>
</items>
</tabImage>
</items>
</tabs>
</items>
</jcr:root>
Using this configuration my image is saved as an nt:file node named "file".
Anyway I completely lost the information of its real name. How can I retrieve this info?
You should set transferFilename property of image node to true
<image
jcr:primaryType="cq:Widget"
allowUpload="{Boolean}true"
cropParameter="./image/imageCrop"
ddGroups="[media]"
width="{Long}300"
height="{Long}350"
fileNameParameter="./image/fileName"
fileReferenceParameter="./image/fileReference"
mapParameter="./image/imageMap"
name="./image/file"
requestSuffix="/image.img.png"
rotateParameter="./image/imageRotate"
title="Image"
xtype="html5smartimage"
transferFileName="true">
Then the original filename will be saved to fileName property of image node.
Below is my code for dialog, I am trying to get the textfield via id but not able to do so inside the beforesubmit listener. Normally i require to find the particular widget at particular level, so if possible provide some explanation.
<jcr:root 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="cq:Dialog"
title="dialog"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
jcr:primaryType="cq:Panel"
title="Tab 1">
<items jcr:primaryType="cq:WidgetCollection">
<textfield
jcr:primaryType="cq:Widget"
itemId="textfield1"
xtype="textfield"/>
<selectbox
jcr:primaryType="cq:Widget"
itemId="selectbox1"
name="./selectvalue"
type="select"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<one
jcr:primaryType="nt:unstructured"
text="one"
value="one"/>
<two
jcr:primaryType="nt:unstructured"
text="two"
value="two"/>
<three
jcr:primaryType="nt:unstructured"
text="three"
value="three"/>
</options>
</selectbox>
</items>
</tab1>
</items>
</items>
<listeners
jcr:primaryType="nt:unstructured"
beforesubmit="function(dialog){
console.log(dialog);
var item = dialog.findById("textfield1");
console.log(item);
}"/>
</jcr:root>
Thanks
A component with itemId can be retrived only with getComponent() method of CQ.Ext.Container. Dialog is not a sub class of CQ.Ext.Container. Here's an excerpt from the docs regarding this :
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with CQ.getCmp, use itemId with CQ.Ext.Container.getComponent which will retrieve itemId's or id's.
findById() is used to find components with id and not itemId.
Tabpanel in your dialog is a decendant of CQ.Ext.Container type. If you want to use itemId to get reference you should first get reference to it and then use getComponent() method on it.
var tab = dialog.findByType('TabPanel')[0]; //returns an array so taking the first element
var textfield = tab.getComponent('textfield1');
Since the fields in the dialog are fixed and you know you are looking for the first textfield, you can directly do
var textfield = dialog.findByType('textfield')[0]; // need not deal with id's at all.
I have panel in my dialog, & a afterrender listener on panel. I am not able to get the dialog.path in this listener. Below is my code.
function()
{
var count;
var select2opts = [];
var dialog = this.findParentByType('dialog');
var dropdown = this.getComponent("dropdown1");
console.log(dialog.path);
console.log(dialog);
console.log(dropdown);
}
I am able to get dialog object in which i can see the property path which i require. But on console dialog.path prints null. Any Idea.
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tabcontrolpanel
//props
<items jcr:primaryType="cq:WidgetCollection">
<items jcr:primaryType="cq:WidgetCollection">
<typeconfigs
//props
<fieldConfigs jcr:primaryType="cq:WidgetCollection">
<option
//props
<optionval
//prop
</fieldConfigs>
</typeconfigs>
<displayoptions
//props
<options jcr:primaryType="cq:WidgetCollection">
<one
jcr:primaryType="nt:unstructured"
text="Click to refresh tabs list."
value="on"/>
</options>
</displayoptions>
<opentab
//props
<options jcr:primaryType="cq:WidgetCollection">
<one
//props
</options>
</opentab>
</items>
</items>
<listeners
jcr:primaryType="nt:unstructured"
afterrender="Here Code Applies that i sent"/>
</tabcontrolpanel>
</items>
</items>
try this
dialog.responseScope.path