Show hide in multifield with some required field is not working

[Ronnie09]

Hi,

I am trying to implement show hide on dropdown which is present inside the multifield.

I have Option1 (Enables 2 text field both required), Option 2 (Enables 1 Text Field required), Both (Enables 3 textfield which all required).

I tried these js, but field which are required need an entry even though I kept it inside the well. OOTB show hide outside the multifield works for the above condition but inside the multifield I cant.

@arunpatidar 

https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue...

https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield.js

Dialog Structure present below which uses multivalued.js

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Sample"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[assetSelector,dropDownMultifieldShowHide]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <dataSet
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                composite="{Boolean}true"
                                                fieldLabel="Set"
                                                required="{Boolean}true">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    max-item="15"
                                                    showhidetargetvalue="carousel"/>
                                                <field
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                                    name="./set">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <heading
                                                            granite:class="coral-Heading coral-Heading--4"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/heading"
                                                            level="{Long}4"
                                                            text="Items"/>
                                                        <well
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/well">
                                                            <items jcr:primaryType="nt:unstructured">
                                                            
                                                                <variation
                                                                    granite:class="cq-dialog-dropdown-showhide-multival"
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                    fieldLabel="Variation"
                                                                    name="./variation">
                                                                    <granite:data
                                                                        jcr:primaryType="nt:unstructured"
                                                                        cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target-another"/>
                                                                    <items jcr:primaryType="nt:unstructured">
                                                                        <op1
                                                                            jcr:primaryType="nt:unstructured"
                                                                            text="Option 1"
                                                                            value="option-1"/>
                                                                        <op2
                                                                            jcr:primaryType="nt:unstructured"
                                                                            text="Option 2"
                                                                            value="option-2"/>
                                                                        <both
                                                                            jcr:primaryType="nt:unstructured"
                                                                            text="Both"
                                                                            value="both"/>
                                                                        
                                                                    </items>
                                                                </variation>
                                                                <option1
                                                                    granite:class="hide list-option-listfrom-showhide-target-another"
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                                                    <granite:data
                                                                        jcr:primaryType="nt:unstructured"
                                                                        showhidetargetvalue="option-1,both"/>
                                                                    <items jcr:primaryType="nt:unstructured">
                                                                        <well
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/coral/foundation/well">
                                                                            <items
                                                                                jcr:primaryType="nt:unstructured">
                                                                                <text
                                                                                    jcr:primaryType="nt:unstructured"
                                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                                    fieldLabel="Button Text"
                                                                                    name="./title"
                                                                                    required="{Boolean}true"/>
                                                                                <url
                                                                                    granite:class="cmp-link-url"
                                                                                    jcr:primaryType="nt:unstructured"
                                                                                    sling:resourceType="cq/gui/components/coral/common/form/pagefield"
                                                                                    fieldDescription="Link to a content page, external URL or page anchor."
                                                                                    fieldLabel="Link"
                                                                                    name="./linkURL"
                                                                                    nodeTypes="cq:Page"
                                                                                    required="{Boolean}true"/>
                                                                            </items>
                                                                        </well>
                                                                    </items>
                                                                </option1>
                                                                <option2
                                                                    granite:class="hide list-option-listfrom-showhide-target-another"
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                                                    <granite:data
                                                                        jcr:primaryType="nt:unstructured"
                                                                        showhidetargetvalue="option-2, both"/>
                                                                    <items jcr:primaryType="nt:unstructured">
                                                                        <well
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/coral/foundation/well">
                                                                            <items
                                                                                jcr:primaryType="nt:unstructured">
                                                                                <url
                                                                                    granite:id="introBannerAsset"
                                                                                    jcr:primaryType="nt:unstructured"
                                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                                                    fieldLabel="Video Path"
                                                                                    name="./damAsset"
                                                                                    required="{Boolean}true"/>
                                                                            </items>
                                                                        </well>
                                                                    </items>
                                                                </option2>
                                                            </items>
                                                        </well>
                                                    </items>
                                                </field>
                                            </dataSet>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[arunpatidar]

Hi @Ronnie09 
What is the use case here and what are the issues you are facing?

If it is related to the required field then you have to remove required flag and add disable field to avoid the empty values.

[Ronnie09]

Hi @arunpatidar 

My use case is 

1. Show hide inside the multifield multivalued.

2. All the hidden and shown fields are required.

Similar to OOTB the field which are hidden and required are not needed to be authored somehow.

But using the JS show hide functionality is working great without any issue hats off to you. But the hidden field which are required doesn't letting me save the dialog

[arunpatidar · Accepted solution]

Hi @Ronnie09 
I don't think so OOTB js does care of required field. The custom code is almost similar to OOTB code.

but this can be fixed.

The idea is to capture all the required filed in the data attribute and remove when hide and add again when show the field.