Multifield dropdown in AEM 6.5 show hide | Community
Skip to main content
S
SanketJa1
Level 2
January 10, 2024
Solved

Multifield dropdown in AEM 6.5 show hide

  • January 10, 2024
  • 2 replies
  • 1054 views
<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

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by pulkitvashisth

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-dropdown-selection-aem-6-5/m-p/549200

 

 

2 replies

pulkitvashisth
Community Advisor
pulkitvashisthCommunity AdvisorAccepted solution
Community Advisor
January 10, 2024

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-dropdown-selection-aem-6-5/m-p/549200

 

 
    Raja_Reddy
    Community Advisor
    Raja_ReddyCommunity Advisor
    Community Advisor
    January 10, 2024

    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.

      Terms & ConditionsAccessibility statement

      Loading footer...