Dear All,
I have one multifield called File section and inside that another multifield called fileset , as shown below. Note - Fileset is nested multifield
I have written below javascript for fetching the file set values and coming like below.
******************** JAVA SCRIPT **********************
function validateFileSection1($includeFileSection1, $fileSectionMultifield1, minFileSectionNumber, maxFileSectionNumber) {
var isValid = true;
var isMultifieldValid = true;
if($includeFileSection1.prop('checked')==true){
$fileSectionMultifield1.parents('.coral-Form-fieldwrapper').first().show();
var fileSectionMultifieldCount = $fileSectionMultifield1.children('.coral3-Multifield-item').length;
if (fileSectionMultifieldCount >= maxFileSectionNumber && maxFileSectionNumber != -1) {
$fileSectionMultifield1.children('button[is="coral-button"]').prop('disabled', true);
} else {
$fileSectionMultifield1.children('button[is="coral-button"]').prop('disabled', false);
}
console.log("fileSectionMultifieldCount ==== " + fileSectionMultifieldCount);
if(fileSectionMultifieldCount < minFileSectionNumber){
isValid = false;
isMultifieldValid = false;
} else {
var $multifieldItems1 = $fileSectionMultifield1.children('coral-multifield-item');
for (var i = 0, multiItem, isInnerValid ; i < $multifieldItems1.length ; i++) {
console.log("$multifieldItems1 secondtime ==== " + $multifieldItems1[0]);
multiItem = $multifieldItems1[i];
isInnerValid = true;
var $sectionLabel1 = $(multiItem).find('input[name$="/sectionLabel"]');
var $nestedFileSetMultifield1 = $(multiItem).find('coral-multifield[data-granite-coral-multifield-name$="/fileSet"]');
//var $nestedFileSetMultifield1 = $(multiItem).find('coral-multifield[data-element="fileSet"]');
console.log("nestedFileSetMultifield1 ==== " + $nestedFileSetMultifield1[0]);
var $nestedFileSetMultifieldItems1 = $nestedFileSetMultifield1.children('coral-multifield-item');
//console.log("nestedFileSetMultifieldItems1 ==== " + $nestedFileSetMultifieldItems1[0]);
for (var j = 0, nestedMultiItem ; j < $nestedFileSetMultifieldItems1.length ; j++){
nestedMultiItem = $nestedFileSetMultifieldItems1[j];
console.log("nestedMultiItemsecond ==== " + nestedMultiItem);
//var nestedMultiItemsecond = $(nestedMultiItem).find("coral-select").val();
//console.log("nestedMultiItemsecond ==== " + nestedMultiItemsecond);
var $fileLabel = $(nestedMultiItem).find('input[name$="/fileLabel"]');
console.log("$fileLabel.val() under filesection1 ==== " + $fileLabel.val());
var $fileSource = $(nestedMultiItem).find('coral-select[name$="/fileSource"]');
var $fileLink = $(nestedMultiItem).find('input[name$="/fileLink"]');
var $internalLink = $(nestedMultiItem).find('input[name$="/internalLink"]');
var $file = $(nestedMultiItem).find('foundation-autocomplete[name$="/file"]');
var $fileType = $(nestedMultiItem).find('coral-select[name$="/fileType"]');
console.log("$fileSource.val() under filesection1 ==== " + $fileSource.val());
if($fileSource.val()=='') {
$fileLink.parent().hide();
$internalLink.parent().hide();
$file.parent().hide();
} else if($fileSource.val()=='File Link') {
$fileLink.parent().show();
$internalLink.parent().hide();
$file.parent().hide();
$file.find('input').val('');
if ($fileLink.val() == '' || !boxLinkValidation($fileLink.val())) {
$fileLink.addClass('is-invalid');
isNestedInnerValid = false;
} else {
$fileLink.removeClass('is-invalid');
}
} else if($fileSource.val()=='Internal Link') {
$internalLink.parent().show();
$fileLink.parent().hide();
$file.parent().hide();
$file.find('input').val('');
if ($internalLink.val() == '' || !boxLinkValidation($internalLink.val())) {
$internalLink.addClass('is-invalid');
isNestedInnerValid = false;
} else {
$internalLink.removeClass('is-invalid');
}
}else {
$fileLink.parent().hide();
$fileLink.val('');
$internalLink.parent().hide();
$internalLink.val('');
$file.parent().show();
if ($file.val() == '') {
$file.find('input').addClass('is-invalid');
isNestedInnerValid = false;
} else {
$file.find('input').removeClass('is-invalid');
}
}
var $fileSetlabel = $(nestedMultiItem).find('coral-accordion-item-label').first();
var fileSetName = $fileLabel.val();
fileSetName = fileSetName !== undefined && fileSetName !== null && fileSetName !== '' ? fileSetName : 'No title';
$fileSetlabel.html('File #' + (j + 1) + ' - ' + fileSetName);
}
var $label = $(multiItem).find('coral-accordion-item-label').first();
var name = $sectionLabel1.val();
name = name !== undefined && name !== null && name !== '' ? name : 'No title';
$label.html('File Section #' + (i + 1) + ' - ' + name);
isValid &= isInnerValid;
if (!isInnerValid) {
$label.css('color', 'red');
isMultifieldValid = false;
} else {
$label.css('color', 'black');
}
}
}
} else {
$fileSectionMultifield1.removeClass('is-invalid');
$fileSectionMultifield1.parents('.coral-Form-fieldwrapper').first().hide();
}
$fileSectionMultifield1.css('border-color', isMultifieldValid ? '' : '#e14132');
return isValid;
}
The issue is here when I am adding first time multifield for file set the value is coming fine as shown above and the second time value is not coming fine , as shown below.
If I am closing the File #2 - tewrrt and opening then it is coming fine but it is not coming fine when I click on add multifield second time.
Can somebody pleas help me on this ?
Views
Replies
Total Likes
Hello @subnaik
It seems probably there has some bug in your code. Maybe your code is not getting the correct index of the item of the multifield. It's very common that trigger an event against a dom at the first time but it may change some dom after adding an item into a multifield and due to these changes your event is not triggering or getting unexpected value.
Please do some debugging and understand what is happening.
Thanks
Hi Asif,
I have already debugged the code and saw the Dom also, but did not find any solution. Thats why for help I posted here all details. Here is my customized dialog in CF Model, as shown below.
<includeFileSection1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
fieldDescription="Select to display the file sharing tab for your community. This tab will display a set of files."
metaType="boolean"
name="includeFileSection1"
renderReadOnly="false"
showEmptyInReadOnly="true"
text="Showcase Files1"
valueType="boolean"/>
<fileSection1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Create a file section for each logical group of files. The order of the file sections will be maintained by display"
fieldLabel="File Section1 *"
metaType="text-single"
name="fileSection1"
valueType="string[]">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./fileSection1">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<sectionLabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Enter the label for the section of files"
fieldDescription="Enter the label for the section of files"
fieldLabel="Section label"
listOrder="1"
maxlength="100"
name="sectionLabel"
renderReadOnly="false"
showEmptyInReadOnly="true"
valueType="string"/>
<fileSet
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="File"
name="fileSet"
valueType="string[]">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./fileSet">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fileLabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Enter the display label for the file link."
fieldDescription="Enter the display label for the file link."
fieldLabel="File Label"
maxlength="100"
name="fileLabel"
renderReadOnly="false"
showEmptyInReadOnly="true"
valueType="string"/>
<fileSource
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
emptyOption="false"
emptyText="You may link to AEM file assets or external assets such as box. Box links permit you to restrict access."
fieldDescription="You may link to AEM file assets or external assets such as box. Box links permit you to restrict access."
fieldLabel="File Source"
listOrder="1"
name="fileSource"
options="AEM File, File Link, Internal Link"
renderReadOnly="false"
showEmptyInReadOnly="true"
valueType="string">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="dam/cfm/admin/components/datasources/optionrenderer"
variant="default"/>
</fileSource>
<fileLink
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Enter the link for the file. Ensure the box link has the desired permissions for access ."
fieldDescription="Enter the link for the file. Ensure the box link has the desired permissions for access ."
fieldLabel="File Link"
listOrder="1"
maxlength="255"
name="fileLink"
renderReadOnly="false"
showEmptyInReadOnly="true"
valueType="string"/>
<internalLink
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Enter the Internal link for the file. Ensure the box link has the desired permissions for access."
fieldDescription="Enter the Internal link for the file. Ensure the box link has the desired permissions for access."
fieldLabel="Internal Link"
listOrder="1"
maxlength="255"
name="internalLink"
renderReadOnly="false"
showEmptyInReadOnly="true"
valueType="string"/>
<file
jcr:primaryType="nt:unstructured"
sling:resourceType="dam/cfm/models/editor/components/contentreference"
emptyText="Select a file found in the AEM file asset library"
fieldDescription="Select a file found in the AEM file asset library"
fieldLabel="File"
filter="hierarchy"
name="file"
nameSuffix="contentReference"
renderReadOnly="false"
rootPath="/content/dam/content-admin/global/assets"
showEmptyInReadOnly="true"
valueType="string"/>
<fileType
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
emptyOption="false"
emptyText="Select the type of file"
fieldDescription="Select the type of file"
fieldLabel="File Type"
listOrder="1"
name="fileType"
options="PDF, PowerPoint, Word, Excel, JPG, PNG, Keynote, Numbers, Pages, CSV, Other"
renderReadOnly="false"
required="on"
showEmptyInReadOnly="true"
valueType="string">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="dam/cfm/admin/components/datasources/optionrenderer"
variant="default"/>
</fileType>
</items>
</column>
</items>
</field>
</fileSet>
</items>
</column>
</items>
</field>
</fileSection1>
May be it is a very small miss from my side and after debugging also not able to find it.
Can anybody please help here