Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM 6.5 Show Hide fields dropdown in Multifield

Avatar

Level 4

Hi Team,

I need help regarding show hide dropdown field inside multifield

 

where there are 4 fields in the dropdown.
image.png

 

case 1: [1st field in Dropdown] if we click on the Country dropdown with Variable ID field

tushaar_srivastava_0-1624869153541.png

case 2: [2nd field in Dropdown] Add field and add Email where Email contains the same field as Country with Variable ID field

tushaar_srivastava_2-1624869391527.png

Case 3: [3rd field in Dropdown] a dropdown with some Additional "Title" field and nested field "Display Text" and "value", with Variable ID field.

tushaar_srivastava_1-1624873542296.png

 

Case3: [4th field in Dropdown] a Text with some additional "Title" field as compared to cases 1, 2, and like case 3 without nested items.

tushaar_srivastava_0-1624873731465.png

 

Now the problem here I am facing I have written a customer JS for Show Hide fields, between these drop-down selections. but let say when we try to delete one or more of the fields in the component and save it,  the field does not get deleted on the author page. We can still see it when we open the component.

 

 

 

<formFields1
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/multifield"
                                    class="full-width formField"
                                    eaem-multi-nested=""
                                    fieldLabel="Form Fields"
                                    maxLimit="12">
	<field
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                        name="./formFields">
		<layout
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                            method="absolute"/>
		<items jcr:primaryType="nt:unstructured">
			<column
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/container"
                                                fieldLabel="Items">
				<items jcr:primaryType="nt:unstructured">
					<field
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/select"
                                                        class="cq-dialog-rightRaildropdown-showhide"
                                                        fieldLabel="Field Type"
                                                        id="drop1"
                                                        name="./field"
                                                        value="">
						<items jcr:primaryType="nt:unstructured">
							<country
                                                                jcr:primaryType="nt:unstructured"
                                                                text="Country"
                                                                value="country"
                                                                width="250"/>
							<email
                                                                jcr:primaryType="nt:unstructured"
                                                                text="Email"
                                                                value="email"
                                                                width="250"/>
							<dropDown
                                                                jcr:primaryType="nt:unstructured"
                                                                text="Dropdown"
                                                                value="dropDown"
                                                                width="250"/>
							<text
                                                                jcr:primaryType="nt:unstructured"
                                                                text="Text"
                                                                value="text"
                                                                width="250"/>
						</items>
					</field>
					<variableId
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                        fieldDescription="Enter the 'HTML Name' form field"
                                                        fieldLabel="Variable ID*"
                                                        id="variableId1"
                                                        name="./variableId"
                                                        required="{Boolean}true"/>
					<fieldTitle
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                        fieldDescription="Under 45 characters recommended"
                                                        fieldLabel="Title*"
                                                        id="title1"
                                                        name="./fieldTitle"
                                                        required="{Boolean}true"/>
					<ddItems
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="custom/touchui/custommultifield"
                                                        class="full-width"
                                                        eaem-multi-nested=""
                                                        fieldLabel="Items"
                                                        id="ddItems1">
						<field
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                            name="./ddItems">
							<items jcr:primaryType="nt:unstructured">
								<ddText
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                    fieldLabel="Display Text*"
                                                                    name="./ddText"
                                                                    required="{Boolean}true"/>
								<ddValue
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                    fieldLabel="Value*"
                                                                    name="./ddValue"
                                                                    required="{Boolean}true"/>
							</items>
						</field>
					</ddItems>
				</items>
			</column>
		</items>
	</field>
</formFields1>

 

 

Can anyone help me with the sample snippet using the OOB show hide feature with the same requirement

 

I tried to create but when I used the OOB show hide feature while authoring the fir 2 dropdown field let say first as text dropdown, and another as email dropdown and now try to author the 3rd dropdown as the dropdown value, in that case, it breaks the functionality of case 1 when I selected text.

Dialog XML which I tried:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Right Rail"
    sling:resourceType="cq/gui/components/authoring/dialog"
    height="1000"
    width="1000">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container"
        class="richtextfullscreen">
        <layout/>
        <items
            jcr:primaryType="nt:unstructured"
            id="showhideTabs">
            <general/>
            <optIn
                jcr:primaryType="nt:unstructured"
                jcr:title="Form"
                sling:resourceType="granite/ui/components/foundation/container"
                id="optinTab">
                <layout/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <formType/>
                            <note1/>
                            <enableSalesContactOptin/>
                            <labelText/>
                            <formName/>
                            <childFormName/>
                            <formFields1/>
                            <heading/>
                            <description/>
                            <optinUseCase/>
                            <overrideText/>
                            <owner/>
                            <privacyApprovalDate/>
                            <primaryCTA/>
                            <secondaryCTA/>
                            <showhideMultifield
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/multifield"
                                eaem-multi-nested=""
                                fieldLabel="Test Form Fields"
                                maxLimit="12">
                                <field
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                    name="./formFields">
                                    <layout
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                        method="absolute"/>
                                    <items jcr:primaryType="nt:unstructured">
                                        <column
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/container"
                                            fieldLabel="Items">
                                            <items jcr:primaryType="nt:unstructured">
                                                <field
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/select"
                                                    class="cq-dialog-dropdown-showhide"
                                                    cq-dialog-dropdown-showhide-target=".dropdown-text-hide-show"
                                                    fieldLabel="Field Type"
                                                    id="drop1"
                                                    name="./field"
                                                    value="">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <country
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Country"
                                                            value="country"
                                                            width="250"/>
                                                        <email
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Email"
                                                            value="email"
                                                            width="250"/>
                                                        <dropDown
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Dropdown"
                                                            value="dropDown"
                                                            width="250"/>
                                                        <text
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Text"
                                                            value="text"
                                                            width="250"/>
                                                    </items>
                                                </field>
                                                <variableId
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                    fieldDescription="Enter the 'HTML Name' for the form field"
                                                    fieldLabel="Variable ID*"
                                                    id="variableId1"
                                                    name="./variableId"
                                                    required="{Boolean}true"/>
                                                <dropdownTitle
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/container"
                                                    class="hide dropdown-text-hide-show"
                                                    showhidetargetvalue="dropDown">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <well
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/container">
                                                            <layout
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <fieldTitle
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                    fieldDescription="Under 45 characters recommended"
                                                                    fieldLabel="Title*"
                                                                    id="title1"
                                                                    name="./fieldTitle"
                                                                    required="{Boolean}true"/>
                                                            </items>
                                                        </well>
                                                    </items>
                                                </dropdownTitle>
                                                <dropdown
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/container"
                                                    class="hide dropdown-text-hide-show"
                                                    showhidetargetvalue="dropDown">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <well
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/container">
                                                            <layout
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <ddItems
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="custom/touchui/custommultifield"
                                                                    class="full-width"
                                                                    eaem-multi-nested=""
                                                                    fieldLabel="Items"
                                                                    id="ddItems1">
                                                                    <field
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                                        name="./ddItems">
                                                                        <items jcr:primaryType="nt:unstructured">
                                                                            <ddText
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                                fieldLabel="Display Text*"
                                                                                name="./ddText"
                                                                                required="{Boolean}true"/>
                                                                            <ddValue
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                                fieldLabel="Value*"
                                                                                name="./ddValue"
                                                                                required="{Boolean}true"/>
                                                                        </items>
                                                                    </field>
                                                                </ddItems>
                                                            </items>
                                                        </well>
                                                    </items>
                                                </dropdown>
                                                <title
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/container"
                                                    class="hide dropdown-text-hide-show"
                                                    showhidetargetvalue="text">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <well
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/container">
                                                            <layout
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <fieldTitle
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                    fieldDescription="Under 45 characters recommended"
                                                                    fieldLabel="Title*"
                                                                    id="title1"
                                                                    name="./fieldTitle"
                                                                    required="{Boolean}true"/>
                                                            </items>
                                                        </well>
                                                    </items>
                                                </title>
                                            </items>
                                        </column>
                                    </items>
                                </field>
                            </showhideMultifield>
                        </items>
                    </columns>
                </items>
            </optIn>
            <confirmation/>
            <links/>
            <linksWithImage/>
            <hiddenVariableSection/>
        </items>
    </content>
</jcr:root>

 

@Vijayalakshmi_S   @Arun_Patidar  @BrianKasingli  @Theo_Pendle  @kautuk_sahni  @Himanshu_Singhal 

Thanks

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
3 Replies

Avatar

Level 4

Thanks, Bhuwan, yes I tried with this but if you could check the compatibility with the tried XML there will be the still issue that remains as is, maybe dialog refactoring required, but not sure how.

Avatar

Correct answer by
Community Advisor

Hi,

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

It supports multifield with multivalued, instruction is in the files

Please check this blogpost and comments as well

https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman?a...

 

 

Avatar

Level 1

Hi Arun

dialog-structure.JPG

 

 

 

Above image displays my dialog structure. In my scenario there are 3 multifields and all are nested. I tried with your js file and it works fine in initial loading. but there is a small issue after submitting the dialog.

ex: I selected the "mobileNo" option from the dropdown and it displayed the "mobilecontainer" and there are relevant fields. I filled those fields and submitted the dialog. After the submitting ,when I reopen the dialogbox, I can see "mobileNo" option is there which I selected previously, but "officecontainer" is showing instead of "mobilecontainer". When I select "mobileNo" option again it displays the "mobilecontainer" with the previously filled/submitted data. 

Same issue is happening for other 2 options also after submitting the data and re-open the dialog box again. I tried by modifying the js file and couldn't fix the issue. It will be great if you can give some idea or give any solution. Thank you!

 

Avatar

Community Advisor

hi,

Could you share your dailog, so I can try this and let you know the fix quickly.

Avatar

Level 1

hi, Arul

I have the same question,

The two drop-down are nested. The required items in the second layer do not remove the required attributes,when  save the dialog, I need to click on the other values which can show the second drop-down in the first drop-down to save.