How to show hide elements based on select inside a multifield in Touch UI AEM 6?

Question

I have a dropdown that has two options "image" and "icon".

When the user selects "image" I want to show the pathbrowser and when he selects "icon" I will show a text field.

This is famous problem, now I want to do this when these above mentioned fields are inside a multifield in Touch UI.

So say I have two items under this multifield, when I select "image", in the select present in the first item(of the multfield) the OOTB showhide hides my "icon" textfield of the first and the second item entry in the multifield as well.

How do I resolve this ?

Long story short See Blog. I want to do this. Just that my fields are inside a multifield.

Note: I was able to implement the Classic UI code using ExtJs field.nextSibling() so I don't affect the entries in the other multifield item entries.

score 2 · Answer 1 · answered Apr 10 '18 at 07:02

Find the code below and for more details check this gitlink here

.content.xml

<enable
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    text="Enable"
    id="enable"
    value="true"
    name="./enable"
    class="cq-dialog-checkbox-showhide"
    cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"/>
<deleteEnable
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/hidden"
        name="./enable@Delete"
        value="true"/>
<showHideContainer
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container"
        class="hidden button-option-enable-showhide-target"
        showhidetargetvalue="true">
    <items jcr:primaryType="nt:unstructured">

        <!-- some components to show/hide -->

    </items>
</showHideContainer>

checkboxshowhide.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
        $(".cq-dialog-checkbox-showhide").each( function() {
            showHide($(this));
        });

    });

    $(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
        showHide($(this));
    });

    function showHide(el){

            // get the selector to find the target elements. its stored as data-.. attribute
            var target = el.data("cqDialogCheckboxShowhideTarget");

            // is checkbox checked?
            var checked = el.prop('checked');

            // get the selected value
            // if checkbox is not checked, we set the value to empty string
            var value = checked ? el.val() : '';

            // make sure all unselected target elements are hidden.
            $(target).not(".hide").addClass("hide");

            // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
            $(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");

       }

    })(document,Granite.$);

How to show hide elements based on select inside a multifield in Touch UI AEM 6?

1 Answers1