Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Hide and Show dropdown in Nested Multifield

Avatar

Level 2

Hi All,

 

I am creating a dialog having Nested multified for page having table rows and columns in it. Each row have 3 columns and based on dropdown selection, setting value to column. I am populating dropdown with 3 types of content(Link, Text and Image).

Example
Row1
Link value(column 1) Text value(Column2) Image(Column3)
Row2
Text value(column 1) Link value(Column2) Image(Column3)
Row3
Image(column 1) Text value(Column2) Link value(Column3)

 

Here when I change Row1 column1 value in dropdown, it's showing Row1 column1 container with correct fields and also showing same container in Row2 column1 and Row3 column1 but correct dropdown values are retaining in Row2 and Row3.

After Row1 Column1 change

Row1
Link value container(column 1) Text value(Column2) Image(Column3)
Row2
Link value container(column 1) Link value(Column2) Image(Column3)
Row3
Link value container(column 1) Text value(Column2) Link value(Column3)

 

It should change only selected row(Row1 column1) but it's updating Row2 and Row3 with same Row1 container.

I tried with below code but no luck
https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield.js

 

Dropdown valuesDropdown valuesRowsRows

 

Version - AEM 6.5

Could you please suggest me here.

Thank you in advance!!!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

If you are using https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue...

then instructions are written at the top , how to use it

the cals name is changed to cq-dialog-dropdown-showhide-multival for using this cusom solution

Please check the instruction



Arun Patidar

View solution in original post

11 Replies

Avatar

Level 2

Hi Arun,

Thanks for your reply.

I followed the steps from this link-  

https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman/

1.) Added new data-* attribute value as below.

rowtype-link.PNG

 

rowlink-container.PNG

2.) Updated  below showhide method in JS code 

js-showhide.PNG

After making these changes, all containers are hidden in load/dropdown click.

dialog-dropdown.PNG

Could you please check and let me know if I miss any steps here.

 

Thanks for your support.

Avatar

Community Advisor

The issue could be due to missing granite:class or the dropdown value and class name mismatches.



Arun Patidar

Avatar

Level 2

Hi Arun,@VeenaVikraman 

 

The below steps followed

1.) Added the granite class cq-dialog-dropdown-showhide to the dropdown element(rowType)
2.) Added the data attribute cq-dialog-dropdown-showhide-target to the dropdown.
3.1) Added the target class to each target component that can be shown/hidden

row-link
granite:class = hide cq-dialog-dropdown-showhide-target

row-text
granite:class = hide cq-dialog-dropdown-showhide-target

row-image
granite:class = hide cq-dialog-dropdown-showhide-target

3.2) As per below link

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/disabling-the-field-based-...

 

Added the attribute showhidetargetvalue & showhidetargetvalue1 to each target component
showhidetargetvalue = row-link1
showhidetargetvalue1 = row-link2

 

As per the below code, splitting showhidetargetvalue 

var values = $target.attr("data-showhidetargetvalue").split(",");

 

Do we need to give comma separated value any where?

 

Could you please suggest me.

Avatar

Correct answer by
Community Advisor

If you are using https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue...

then instructions are written at the top , how to use it

the cals name is changed to cq-dialog-dropdown-showhide-multival for using this cusom solution

Please check the instruction



Arun Patidar

Avatar

Level 7

Hi Arun_Patidar

I have scenario where I have to use a drop down inside nested multifield. I have tried your solution and it works perfectly for a dropdown inside one multifield. But having trouble when I have a dropdown inside a multifield of another multifield. Can u please give your kind inputs..

JakeCham_0-1655453538007.png

 

 

Avatar

Community Advisor

Hi,

I think the issue could be when there is no item and event listeners are not registered.

Can you check if you save the values and reopen dialog then does it work?

 

try to write some console logs and see if you can see the event triggers ?



Arun Patidar

Avatar

Level 7

Hi Arun_Patidar Thanks for replying.just need to know that your solution is supposed to work with a drop down which is inside nested multifield ?. I know your solution is perfectly working with a drop down which is inside one multifield. 

Issue is var elementIndex = $(element).closest('coral-multifield-item').index();

element index is getting same value if I change parent multifield. 

JakeCham_0-1655460294788.png

Here elementIndex is getting 0 for A and B occurrence. So when I change the drop down of B occurrence A occurrence also change to B occurrence value of dropdown content. 

Avatar

Community Advisor

Hi,

Then this is not going to work with nested multifield.

To fix this you need to check the multi-field instance as well.

target will be based on dropdown - multifield - multifeld

https://github.com/arunpatidar02/aem63app-repo/blob/07729ddb39883998b863744ce0f79dc65f4f37e5/js/drop... 

 



Arun Patidar

Avatar

Level 1

Arun, What exactly needs to be updated here?

Avatar

Level 2

Hi,

 

I made it work for nested multifield with some changes to https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield.js try below JS.

 

(function(document, $) {
"use strict";

// when dialog gets injected
$(document).on("foundation-contentloaded", function(e) {
// if there is already an inital value make sure the according target element becomes visible
showHideHandler($(".cq-dialog-dropdown-showhide-multi", e.target));
});

$(document).on("selected", ".cq-dialog-dropdown-showhide-multi", function(e) {
showHideHandler($(this));
});

function showHideHandler(el) {
el.each(function(i, element) {
if ($(element).is("coral-select")) {
// handle Coral3 base drop-down
Coral.commons.ready(element, function(component) {
showHide(component, element);
component.on("change", function() {
showHide(component, element);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("select");
if (component) {
showHide(component, element);
}
}
})
}

function showHide(component, element) {
// get the selector to find the target elements. its stored as data-.. attribute
var target = $(element).data("cqDialogDropdownShowhideTarget");
var $target = $(element).closest('coral-multifield-item').find($(target));

if (target) {
var value;
if (component.value) {
value = component.value;
} else {
value = component.getValue();
}
$target.each(function(index) {

$(this).not(".hide").addClass("hide");
$(this).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");

//RTE Should be treated specially
if ($(this).parent().hasClass("richtext-container")) {
$(this).parent().not(".hide").addClass("hide");
$(this).filter("[data-showhidetargetvalue='" + value + "']").parent().removeClass("hide");
}


});
}
}

})(document, Granite.$);

 

Thanks,

Prashanth