Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Hide and Show dropdown in Nested Multifield

Avatar

Level 1

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

View solution in original post

5 Replies

Avatar

Level 1

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.

Avatar

Level 1

Hi Arun,@Veena_Vikram 

 

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