Как показать скрытые элементы на основе выбора внутри мультиполя в Touch UI AEM 6?

Question

У меня есть выпадающий список, который имеет две опции "изображение" и "значок".

Когда пользователь выбирает "изображение", я хочу показать браузер, а когда он выбирает "значок", я показываю текстовое поле.

Это известная проблема, теперь я хочу сделать это, когда эти вышеупомянутые поля находятся внутри мультиполя в Touch UI.

Скажем, у меня есть два элемента в этом мультиполе, когда я выбираю "изображение", в элементе выбора, присутствующем в первом элементе (из мультиполя), в показе OOTB скрывается мое текстовое поле "значок" первого и второго элемента в мультиполе. также.

Как мне решить это?

Короче говоря, смотрите блог. Я хочу сделать это. Просто мои поля внутри многополя.

Примечание. Мне удалось реализовать код классического пользовательского интерфейса, используя ExtJs field.nextSibling(), поэтому я не влияю на записи в других записях многопользовательских элементов.

Answer 1

Найдите код ниже и для более подробной информации проверьте эту ссылку здесь

.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.$);