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 values
Rows
Version - AEM 6.5
Could you please suggest me here.
Thank you in advance!!!
Solved! Go to Solution.
Views
Replies
Total Likes
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
Hi,
Could you please check https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman/
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.
2.) Updated below showhide method in JS code
After making these changes, all containers are hidden in load/dropdown click.
Could you please check and let me know if I miss any steps here.
Thanks for your support.
The issue could be due to missing granite:class or the dropdown value and class name mismatches.
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
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.
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
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..
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 ?
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.
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.
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
Arun, What exactly needs to be updated here?
Views
Replies
Total Likes
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
Views
Likes
Replies
Views
Likes
Replies