Expand my Community achievements bar.

SOLVED

Multifield dropdown in AEM 6.5 show hide

Avatar

Level 1
<dummyMultifield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true">
<field
granite:class="cmp-teaser__editor-action"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./dummyMultifield">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text"
name="./text"
required="{Boolean}true"
value="Temp"/>
<dummyProgram
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
class="cq-dialog-dropdown-showhide"
cq-dialog-dropdown-showhide-target=".other-showhide-target"
name="./dummyProgram"
fieldLabel="Dummy Program"
required="{Boolean}false">
<items
jcr:primaryType="nt:unstructured">
<ABC
jcr:primaryType="nt:unstructured"
text="ABC"
value="abc"
selected="{Boolean}true"/>
<MNP
jcr:primaryType="nt:unstructured"
text="MNP"
value="mnp"/>
<XYZ
jcr:primaryType="nt:unstructured"
text="XYZ"
value="xyz"/>
</items>
<value>ABC</value>
</dummyProgram>
<dropdownProgram
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="hide other-showhide-target"
showhidetargetvalue="xyz">
<items jcr:primaryType="nt:unstructured">

<type
granite:class="pdfviewer-type-selector"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Type"
name="./type">
<items jcr:primaryType="nt:unstructured">
<fullWindow
jcr:primaryType="nt:unstructured"
text="Full Window"
value="FULL_WINDOW"/>
<sizedContainer
jcr:primaryType="nt:unstructured"
text="Sized Container"
value="SIZED_CONTAINER"/>
<inline
jcr:primaryType="nt:unstructured"
text="In-Line"
value="IN_LINE"/>
</items>
</type>

</items>
</dropdownProgram>
</items>
</field>
</dummyMultifield>

Above is the XML code in AEM 6.5
When you select the XYZ dropdown then and only then dropdownProgram Dropdown should be visible and its working.
But what issue I'm facing is consider in 1st multifield you select the ABC dropdown, now click on add and
to add the new multifield in that I will select XYZ dropdown so in that case dropdownProgram Dropdown is visble.
but its also visble in first multifield dropdown where the select value is ABC.

Could you help me to fix this

 

1 Accepted Solution

Avatar

Correct answer by
Level 6

Hi @SanketJa1 

One possible solution could be to ensure that each dropdown selection only affects its own scope. This might involve adding a unique identifier to each multifield instance and ensuring that the show/hide functionality is tied to this identifier.

Here’s a general idea of how you might modify your code:

<dummyProgram
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/select"
    class="cq-dialog-dropdown-showhide"
    cq-dialog-dropdown-showhide-target=".other-showhide-target-{uniqueId}"
    name="./dummyProgram"
    fieldLabel="Dummy Program"
    required="{Boolean}false">
    ...
</dummyProgram>
<dropdownProgram
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide other-showhide-target-{uniqueId}"
    showhidetargetvalue="xyz">
    ...
</dropdownProgram>

In this example, {uniqueId} would be replaced with a unique identifier for each multifield instance. This way, the show/hide functionality would only affect the elements within the same multifield.

Here is a reference for an accepted solution for the same
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/show-hide-fields-based-on-...

 

 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 6

Hi @SanketJa1 

One possible solution could be to ensure that each dropdown selection only affects its own scope. This might involve adding a unique identifier to each multifield instance and ensuring that the show/hide functionality is tied to this identifier.

Here’s a general idea of how you might modify your code:

<dummyProgram
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/select"
    class="cq-dialog-dropdown-showhide"
    cq-dialog-dropdown-showhide-target=".other-showhide-target-{uniqueId}"
    name="./dummyProgram"
    fieldLabel="Dummy Program"
    required="{Boolean}false">
    ...
</dummyProgram>
<dropdownProgram
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide other-showhide-target-{uniqueId}"
    showhidetargetvalue="xyz">
    ...
</dropdownProgram>

In this example, {uniqueId} would be replaced with a unique identifier for each multifield instance. This way, the show/hide functionality would only affect the elements within the same multifield.

Here is a reference for an accepted solution for the same
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/show-hide-fields-based-on-...

 

 

Avatar

Community Advisor

It seems like the issue is that the class attribute of the dropdownProgram field is set to "hide other-showhide-target", which is causing it to be hidden by default. However, when a new multifield is added and the dummyProgram field is changed to "XYZ", the class attribute of the dropdownProgram field is not updated to remove the "hide" class, causing it to remain visible even in the first multifield where the dummyProgram field is set to "ABC".

To fix this, you can add some JavaScript code to update the class attribute of the dropdown Program field whenever the dummyProgram field is changed. Here's an example of how you can do this:

$(document).on("change", "[name='./dummyProgram']", function() {
  var $dropdownProgram = $(this).closest(".coral-Form-fieldwrapper").find("[name='./dropdownProgram']");
  if ($(this).val() === "xyz") {
    $dropdownProgram.removeClass("hide");
  } else {
    $dropdownProgram.addClass("hide");
  }
});

This code listens for a change event on any dummyProgram field in the document, and then finds the corresponding dropdownProgram field using the closest and find methods. If the dummyProgram field's value is "xyz", it removes the "hide" class from the dropdownProgram field's class attribute, and if the value is anything else, it adds the "hide" class. This should ensure that the dropdownProgram field is only visible when the dummyProgram field's value is "xyz".

Thanks.