Coral UI Multifield Dropdown show hide

[NitroHazeDev]

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 

[MayurSatav]

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

If Option 2 is selected

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>

[NitroHazeDev]

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

[MayurSatav]

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

[NitroHazeDev]

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?

[NitroHazeDev]

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

[MayurSatav]

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.

[NitroHazeDev]

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

[NitroHazeDev]

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 

[NitroHazeDev · Accepted solution]

@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

[MayurSatav]

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

[NitroHazeDev]

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