Expand my Community achievements bar.

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.

My JS code nested multifield value is not coming properly

Avatar

Level 4

Dear All,

 

I have one multifield called File section and inside that another multifield called fileset , as shown below. Note - Fileset is nested multifield

 

subnaik_2-1683601356267.png

 

I have written below javascript for fetching the file set values and coming like below.

 

subnaik_1-1683601215967.png

 

******************** 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.

 

subnaik_4-1683601937036.png

 

 

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.

 

subnaik_3-1683601824490.png

 

Can somebody pleas help me on this ?

2 Replies

Avatar

Community Advisor

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

Avatar

Level 4

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