Clear values in fields on Switch Dropdown Values

[vishgup07]

Hi

I have dropdown with 2 values. Each dropdown shows different fields .First one has pathfield and checkbox and second one have textfield.

Hide Show functionality is working good .Means fields are hiding when the other dropdown is selected.

But the values of fields are not getting cleared if i select the other dropdown,  it only just hide the fields values remain if switch back same dropdown value.

Below are the dialog  xml  and js is /libs/core/wcm/components/list/v1/list/clientlibs/editor/js/list.js

Can Somebody suggest solution?

 @Leela-Pavan-Kumar 

<?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="demo"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.list.v1.editor]">
    <content
        granite:class="cmp-list--editor"
        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">
                    <right
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Demo"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <switchtab
                                                granite:class="cq-dialog-dropdown-showhide"
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                fieldLabel="Switch Tab"
                                                name="./switchtab">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    cq-dialog-dropdown-showhide-target=".list-option-switchtab-showhide-target"/>
                                                <items jcr:primaryType="nt:unstructured">
                                                    <one
                                                        jcr:primaryType="nt:unstructured"
                                                        text="One"
                                                        value="one"/>
                                                    <two
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Two"
                                                        value="two"/>
                                                </items>
                                            </switchtab>
                                            <one
                                                granite:class="hide list-option-switchtab-showhide-target foundation-layout-util-vmargin"
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    showhidetargetvalue="one"/>
                                                <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="One"/>
                                                    <well
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/well">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <url
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                                fieldLabel="Url"
                                                                name="./url"/>
                                                            <check
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                                name="./check"
                                                                text="Check"
                                                                value="true"/>
                                                        </items>
                                                    </well>
                                                </items>
                                            </one>
                                            <two
                                                granite:class="hide list-option-switchtab-showhide-target foundation-layout-util-vmargin"
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    showhidetargetvalue="two"/>
                                                <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="Two"/>
                                                    <well
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/well">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <pages
                                                                granite:class="foundation-layout-util-maximized-alt coral-Form-fieldwrapper"
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <text
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                        fieldLabel="Text"
                                                                        name="./text"/>
                                                                </items>
                                                            </pages>
                                                        </items>
                                                    </well>
                                                </items>
                                            </two>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </right>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[Leela-Pavan-Kumar · Accepted solution]

Hi @vishgup07 ,

Handling At Dialog :

If you want to clear the values from the dialog based on selection, Clear the entered data in the input fields by writing a JS file based on the selection.

Use the below syntax and clear the values based on selection of dropdown

$('#id').val('');

Handling At Backend :

If you want to not to pass the values in the model.json please nullify the values based on the selection in the dropdown once after you injected them in backend.