Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Coral UI Multifield Dropdown show hide

Avatar

Level 10

Hi,

 

I see many posts around creating a multifield in coralui3 and with showing and hiding based on selected option. When i tried to implement this on AEM 6.5.12 , the show hide just did not work. Is this something someone can guide me with a sample please?

 

Regards,

Nicole

FYI
@arunpatidar 

1 Accepted Solution

Avatar

Correct answer by
Level 10

@MayurSatav  got it working. The problem was that the coralui components have a  different way to address class and granite data ,
eg:
solution
1. below res type Needs granite:class property at the node containing  granite/ui/components/coral/foundation/form/pathbrowser and granite data as a child of the node 

2.granite/ui/components/coral/foundation/form/pathbrowser   Needs "class" property at the node containing the res type granite/ui/components/coral/foundation/form/pathbrowser  and property you would place within granite:data to be contained within the node itself


 

Pending issue as i see is inheritance- perhaps cause of deep nested, the inheritance is broken and i will raise a ticket with adobe on this.  If LC has a content and you break inheritance, and rollout , the contents from blueprint overrides content at LC.. odd since inheritance is broken.

Another issue:  add an item , select a value from dropdown and set the data for the field displayed, now add a new field and it strangely erases or overrides previous entry 

Is there a way to group an option without even putting it into multifield ? Unable to group it.This is so that only one inheritance link icon is displayed and not more

 

NitroHazeDev_0-1671397429371.png

 

View solution in original post

11 Replies

Avatar

Community Advisor

Hi @NitroHazeDev ,

 

If I understand your question correctly, you are looking for a way to display and hide multiple fields based on the selection from a drop down menu, right?. Here is a screen shot and dialog snippet that I have attached. I have tested it in AEM 6.5.12 and it works fine for me.

 

Instructions

  1. Add below properties in your select dropdown list node
    1. class - cq-dialog-dropdown-showhide
    2. cq-dialog-dropdown-showhide-target - .{anyName}-showhide-target e.g .test-options-showhide-target
  2. Create container for each option
  3. Add below properties in each option cintainer
    1. class - hide {anyName}-showhide-target e.g. test-options-showhide-target
    2. showhidetargetvalue - { value of drop down option }


If Option 1 selected

MayurSatav_0-1671384483070.png

If Option 2 is selected

 

MayurSatav_1-1671384495522.png

 

Dialog Snippet

 

 

<?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="Test Dialog"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <list
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/select"
                        class="cq-dialog-dropdown-showhide"
                        cq-dialog-dropdown-showhide-target=".test-options-showhide-target"
                        fieldLabel="Options Type"
                        name="./optionsType">
                        <items jcr:primaryType="nt:unstructured">
                            <option1
                                jcr:primaryType="nt:unstructured"
                                text="Option1"
                                value="option1"/>
                            <option2
                                jcr:primaryType="nt:unstructured"
                                text="Option2"
                                value="option2"/>
                        </items>
                    </list>
                    <option1group
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container"
                        class="hide test-options-showhide-target"
                        showhidetargetvalue="option1">
                        <items jcr:primaryType="nt:unstructured">
                            <heading
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/heading"
                                class="coral-Heading coral-Heading--4"
                                level="{Long}4"
                                text="Options 1 Group"/>
                            <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">
                                    <actions
                                        granite:class="foundation-toggleable cmp-teaser__editor-multifield_actions"
                                        granite:hide="${cqDesign.actionsDisabled}"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                        composite="{Boolean}true"
                                        fieldLabel="Call-to-actions">
                                        <field
                                            granite:class="cmp-teaser__editor-action"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container"
                                            name="./actions">
                                            <items jcr:primaryType="nt:unstructured">
                                                <webUrl
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldLabel="Web Url"
                                                    name="./webUrl"/>
                                            </items>
                                        </field>
                                    </actions>
                                </items>
                            </well>
                        </items>
                    </option1group>
                    <option2group
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container"
                        class="hide test-options-showhide-target foundation-layout-util-vmargin"
                        showhidetargetvalue="option2">
                        <items jcr:primaryType="nt:unstructured">
                            <heading
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/heading"
                                class="coral-Heading coral-Heading--4"
                                level="{Long}4"
                                text="Options 2 Group"/>
                            <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">
                                    <actions
                                        granite:class="foundation-toggleable cmp-teaser__editor-multifield_actions"
                                        granite:hide="${cqDesign.actionsDisabled}"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                        composite="{Boolean}true"
                                        fieldLabel="Call-to-actions">
                                        <field
                                            granite:class="cmp-teaser__editor-action"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container"
                                            name="./actions">
                                            <items jcr:primaryType="nt:unstructured">
                                                <htmlSnippet
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                                                    fieldLabel="Upload HTML Snippet"
                                                    name="./htmlSnippet"
                                                    rootPath="/content/dam/"/>
                                            </items>
                                        </field>
                                    </actions>
                                </items>
                            </well>
                        </items>
                    </option2group>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

 

 

Avatar

Level 10

Hi @MayurSatav  does this work if i set up MSM ? I am trying to do something like a multifield which contains a select option based on which dropdowns are shown.  I believe the issue stems with multifield and showing hiding select options

Avatar

Community Advisor

Yeah it should work. Could you please try out from your end and check?

Avatar

Level 10

Sorry, i guess what i am trying to say is that .. your code is doing a validation outside of multifield and i am looking for something within multifield( multifield- select -dropdown). Can you please let me know if something like this has been achieved?

Avatar

Level 10

I tried another approach with container to hide and show within multifield  but while it inherits, breaking inheritance still brings in the code form LC .Will inbox the zip file to you @MayurSatav 
Update - this needs to go on to the page properties

Avatar

Community Advisor

Yeah, It is possible. simply create multi-field first and then use above structure. But I will suggest you to create group for each option to avoid breaking inheritance. Bcoz i also faced similar issue. But creating groups of each options worked for me.

 

Avatar

Level 10

Do you have a sample for it @MayurSatav ? I noticed that on rollout even if inheritance is disabled, the values were getting overridden from blueprint

Avatar

Level 10

Tried the above logic,( without putting the fields within containers) and it did not work, just shows the select option and hides the rest on load and on dropdown select @MayurSatav 

Avatar

Correct answer by
Level 10

@MayurSatav  got it working. The problem was that the coralui components have a  different way to address class and granite data ,
eg:
solution
1. below res type Needs granite:class property at the node containing  granite/ui/components/coral/foundation/form/pathbrowser and granite data as a child of the node 

2.granite/ui/components/coral/foundation/form/pathbrowser   Needs "class" property at the node containing the res type granite/ui/components/coral/foundation/form/pathbrowser  and property you would place within granite:data to be contained within the node itself


 

Pending issue as i see is inheritance- perhaps cause of deep nested, the inheritance is broken and i will raise a ticket with adobe on this.  If LC has a content and you break inheritance, and rollout , the contents from blueprint overrides content at LC.. odd since inheritance is broken.

Another issue:  add an item , select a value from dropdown and set the data for the field displayed, now add a new field and it strangely erases or overrides previous entry 

Is there a way to group an option without even putting it into multifield ? Unable to group it.This is so that only one inheritance link icon is displayed and not more

 

NitroHazeDev_0-1671397429371.png

 

Avatar

Community Advisor

Hi @NitroHazeDev ,

 

It would be great if you marked your reply as a correct answer. As a result, others who have similar problems will be able to benefit from it.

 

Thanks

Avatar

Level 10

Sure Mayur.  working with adobe on the issue.Once i hear back will update with response and xml and mark it