Как я могу показать / скрыть флажок и текстовое поле в AEM, основываясь на состоянии другого флажка?

Question

Я пытаюсь добиться следующих результатов в AEM:

checkbox1 показывает / скрывает textfield1 и checkbox2. Checbox2 показывает / скрывает текстовое поле 2.

На данный момент я могу показать / скрыть текстовое поле1 и флажок2 с помощью приведенного ниже кода, но не могу сделать флажок2 показать / скрыть текстовое поле2:

<items jcr:primaryType="nt:unstructured">
    <displayTextfield1
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="Display textfield1"
        fieldDescription="Check to display textfield1"
        name="./displayTextfield1"
        uncheckedValue="{Boolean}false"
        checked="{Boolean}false"
        value="{Boolean}true"
        granite:class="cq-dialog-showhide">
        <granite:data
            jcr:primaryType="nt:unstructured"
            cq-dialog-showhide-target=".showhide-textfield1"
            cq-msm-lockable="./displayTextfield1"/>
    </displayTextfield1>
    <displayTextfield1Hint
         jcr:primaryType="nt:unstructured"
         sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
         name="./displayTextfield1@TypeHint"
         value="Boolean" />
    <textfield1PlaceHolder
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Place holder textfield1"
        name="./textfield1PlaceHolder"
        granite:class="showhide-textfield1">
        <granite:data
            jcr:primaryType="nt:unstructured"
            cq-dialog-showhide-value="true"
            cq-msm-lockable="./textfield1PlaceHolder"/>
    </textfield1PlaceHolder>
    <displayTextfield2
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="display textfield2"
        name="./displayTextfield2"
        uncheckedValue="{Boolean}false"
        checked="{Boolean}false"
        value="{Boolean}true"
        granite:class="showhide-textfield1">
        <granite:data
            cq-dialog-showhide-target=".showhide-textfield2"
            jcr:primaryType="nt:unstructured"
            cq-dialog-showhide-value="true"
            cq-msm-lockable="./displayTextfield2"/>
    </displayTextfield2>
    <displayTextfield2Hint
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
        name="./displayTextfield2@TypeHint"
        value="Boolean" />
    <displayTextfield2PlaceHolder
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="display Textfield2"
        name="./displayTextfield2PlaceHolder"
        granite:class="showhide-textfield2">
        <granite:data
            jcr:primaryType="nt:unstructured"
            cq-dialog-showhide-value="true"
            cq-msm-lockable="./displayTextfield2PlaceHolder"/>
    </displayTextfield2PlaceHolder>

Может Вы помогаете мне с этим? Спасибо!

Answer 1

Вы можете использовать ACS-Commons Показать / скрыть виджет TouchUI: https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/show-hide-widgets/index.html. Документация еще не полностью завершена (я работаю над этим, чтобы включить пример), но в коде все должно быть объяснено: https://github.com/Adobe-Consulting-Services/acs-aem-commons/blob/master/ui.apps/src/main/content/jcr_root/apps/acs-commons/touchui-widgets/showhidedialogfields/source/showhidedialogfieldstabs.js

В вашем случае это должно работать:

<items jcr:primaryType="nt:unstructured">
    <displayTextfield1
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="Display textfield1"
        fieldDescription="Check to display textfield1"
        name="./displayTextfield1"
        uncheckedValue="{Boolean}false"
        checked="{Boolean}false"
        value="{Boolean}true"
        granite:class="cq-dialog-showhide">
        <granite:data
            jcr:primaryType="nt:unstructured"
            acs-cq-dialog-dropdown-checkbox-showhide=""
            acs-cq-dialog-dropdown-checkbox-showhide-target=".showhide-textfield1"
            cq-msm-lockable="./displayTextfield1"/>
    </displayTextfield1>
    <displayTextfield1Hint
         jcr:primaryType="nt:unstructured"
         sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
         name="./displayTextfield1@TypeHint"
         value="Boolean" />
    <textfield1PlaceHolder
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Place holder textfield1"
        name="./textfield1PlaceHolder"
        granite:class="showhide-textfield1">
        <granite:data
            jcr:primaryType="nt:unstructured"
            acs-checkboxshowhidetargetvalue="true"
            cq-msm-lockable="./textfield1PlaceHolder"/>
    </textfield1PlaceHolder>
    <displayTextfield2
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="display textfield2"
        name="./displayTextfield2"
        uncheckedValue="{Boolean}false"
        checked="{Boolean}false"
        value="{Boolean}true"
        granite:class="showhide-textfield1">
        <granite:data
            jcr:primaryType="nt:unstructured"
            acs-checkboxshowhidetargetvalue="true"
            acs-cq-dialog-dropdown-checkbox-showhide=""
            acs-cq-dialog-dropdown-checkbox-showhide-target=".showhide-textfield2"
            cq-msm-lockable="./displayTextfield2"/>
    </displayTextfield2>
    <displayTextfield2Hint
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
        name="./displayTextfield2@TypeHint"
        value="Boolean" />
    <displayTextfield2PlaceHolder
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="display Textfield2"
        name="./displayTextfield2PlaceHolder"
        granite:class="showhide-textfield2">
        <granite:data
            jcr:primaryType="nt:unstructured"
            acs-checkboxshowhidetargetvalue="true"
            cq-msm-lockable="./displayTextfield2PlaceHolder"/>
    </displayTextfield2PlaceHolder>
</items>

Если вы хотите, чтобы показ / скрытие вашего второго текстового поля зависело от обоих флажков, это также возможно, и вы можете проверить, как в коде это объяснено сверху

Answer 2

Попробуйте написать пользовательский слушатель, так как это даст вам больше гибкости.

Ваш код слушателя может быть примерно таким:

var $form = $(this).closest("form.foundation-form"), 
var checkBox2 = $form.find("[name='./nameOfCheckBox2']").val(),
var textBox2 = $form.find("[name='./nameOfTextBox2']").val()

Затем на основе переменной checkBox2 show and hide textBox2

Здесь - блог, объясняющий более подробно шаги.