Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Dropdown in Multifield in 6.2, dynamically show/hide widgets

Avatar

Level 6

Hi All,

I have a requirement where i have a dtopdown in multifield, based on  the selection values i need to  show/hide other widgets.

For example image/video are the options in  dropdown, for image 3 widgets(path, alt text, url) should show.  For video (id and image path) should.

How to  achieve it? In classic UI i did it with the help of listeners in selection change event, but granite i am stuck.

Please help if anyone knows.

Thanks,

Pradeep

1 Accepted Solution

Avatar

Correct answer by
Level 10

I was talking to AEM Touch UI experts whom said this will not work OOTB, You need to write custom code.

View solution in original post

7 Replies

Avatar

Level 7

Hi Pradeep,

AEM has OOTB library to implement the hide/show feature. You can use below path:

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

Please refer below working code which might help you in implementing hide/show feature in your granite UI dialog.

Sample dialog xml:

<?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="Rotating Image Component"

    sling:resourceType="cq/gui/components/authoring/dialog"

    helpPath="https://www.adobe.com/go/aem6_2_docs_component_en#Title">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/tabs"

            type="nav"/>

        <items jcr:primaryType="nt:unstructured">

            <image-tab

                jcr:primaryType="nt:unstructured"

                jcr:title="Image Details"

                sling:resourceType="granite/ui/components/foundation/section">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                    margin="{Boolean}false"/>

                <items jcr:primaryType="nt:unstructured">

                    <column

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <items jcr:primaryType="nt:unstructured">

                            <component-type

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/select"

                                class="cq-dialog-dropdown-showhide"

                                cq-dialog-dropdown-showhide-target=" .text-image-hide-show"

                                fieldLabel="Component Type"

                                name="./componentType">

                                <items jcr:primaryType="nt:unstructured">

                                    <rotating-image

                                        jcr:primaryType="nt:unstructured"

                                        text="Rotating Image"

                                        value="rotating-image"/>

                                    <static-image

                                        jcr:primaryType="nt:unstructured"

                                        text="Static Image"

                                        value="static-image"/>

                                </items>

                            </component-type>

                            <static-image

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                class="hide text-image-hide-show"

                                showhidetargetvalue="static-image">

                                <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="Static Image"/>

                                    <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">

                                            <static-image

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                fieldLabel="Static Image"

                                                name="./staticImage"

                                                rootPath="/content"

                                                showhidetargetvalue="static-image"/>

                                        </items>

                                    </well>

                                </items>

                            </static-image>

                            <rotating-image

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                class="hide text-image-hide-show"

                                showhidetargetvalue="rotating-image">

                                <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="Rotating Image"/>

                                    <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">

                                            <image-360

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                fieldLabel="360 Image"

                                                name="./image360"

                                                rootPath="/content"

                                                showhidetargetvalue="rotating-image"/>

                                            <rotating-image

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                fieldLabel="Rotating Image"

                                                name="./rotatingImage"

                                                rootPath="/content"

                                                showhidetargetvalue="rotating-image"/>

                                        </items>

                                    </well>

                                </items>

                            </rotating-image>

                        </items>

                    </column>

                </items>

            </image-tab>        

        </items>

    </content>

</jcr:root>

Note: For more information, please refer:

http://www.adobeaemclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/

We hope this information helps!

Regards,

TechAspect Solutions

Avatar

Level 6

Hi,

This approach works well without multifield. In multifield it affects all elements upon selection of any option. Let's say i am selecting image in first element of multifield so it will show/hide widgets for image. When i add one more element in multifield and select video from dropdown,  it changed first element also in multifield.

To be very frank  classic UI was much more better than touch UI. touch UI no help nothing, simple things became complex in touchUI.

By the time i got little comfortable with classic UI, Adobe introduced this complex concept called touch UI.

It takes lot of time to google and find some solution for basic problem.

Please  share any code which worked in multifield dropdown show/hide widgets.

Thanks,

Pradeep

Avatar

Level 10

As mentioned by Techaspect Solutions, the show hide feature is the closest functionality for this requirement.

To make this work in a multi-field, you would need to code against that multi-field. See these articles for examples on how to code with a multi-field:

http://experience-aem.blogspot.com/2016/05/aem-62-support-required-validator-on-file-upload-image-in...

http://experience-aem.blogspot.com/2016/06/aem-62-touch-ui-validator-for-restricting-tag-count-dialo...

http://experience-aem.blogspot.com/2016/09/aem-62-touch-ui-composite-multifield-with-rte-required-va...

Avatar

Level 6

I tried as per above comment, placed widgets in multifield, same issue

Below is cq:dialog.xml

<?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"

    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/tabs"

            type="nav"/>

        <items jcr:primaryType="nt:unstructured">

            <tab1

                jcr:primaryType="nt:unstructured"

                jcr:title="Carousel Image/Video"

                sling:resourceType="granite/ui/components/foundation/section">

                <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">

                            <fieldset

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/fieldset">

                                <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">

                                            <images

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/multifield"

                                                class="full-width"

                                                fieldDescription="Click '+' to add a new Image"

                                                fieldLabel="Carousal Images">

                                                <field

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/foundation/form/fieldset"

                                                    eaem-nested=""

                                                    name="./images">

                                                    <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">

                                                            <items jcr:primaryType="nt:unstructured">

                                                                <component-type

                                                                    jcr:primaryType="nt:unstructured"

                                                                    sling:resourceType="granite/ui/components/foundation/form/select"

                                                                    class="cq-dialog-dropdown-showhide"

                                                                    cq-dialog-dropdown-showhide-target=" .text-image-hide-show"

                                                                    fieldLabel="Component Type"

                                                                    name="./componentType">

                                                                    <items jcr:primaryType="nt:unstructured">

                                                                        <rotating-image

                                                                            jcr:primaryType="nt:unstructured"

                                                                            text="Rotating Image"

                                                                            value="rotating-image"/>

                                                                        <static-image

                                                                            jcr:primaryType="nt:unstructured"

                                                                            text="Static Image"

                                                                            value="static-image"/>

                                                                    </items>

                                                                </component-type>

                                                                <static-image

                                                                    jcr:primaryType="nt:unstructured"

                                                                    sling:resourceType="granite/ui/components/foundation/container"

                                                                    class="hide text-image-hide-show"

                                                                    showhidetargetvalue="static-image">

                                                                    <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="Static Image"/>

                                                                        <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">

                                                                                <static-image

                                                                                    jcr:primaryType="nt:unstructured"

                                                                                    sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                                                    fieldLabel="Static Image"

                                                                                    name="./staticImage"

                                                                                    rootPath="/content"

                                                                                    showhidetargetvalue="static-image"/>

                                                                            </items>

                                                                        </well>

                                                                    </items>

                                                                </static-image>

                                                                <rotating-image

                                                                    jcr:primaryType="nt:unstructured"

                                                                    sling:resourceType="granite/ui/components/foundation/container"

                                                                    class="hide text-image-hide-show"

                                                                    showhidetargetvalue="rotating-image">

                                                                    <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="Rotating Image"/>

                                                                        <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">

                                                                                <image-360

                                                                                    jcr:primaryType="nt:unstructured"

                                                                                    sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                                                    fieldLabel="360 Image"

                                                                                    name="./image360"

                                                                                    rootPath="/content"

                                                                                    showhidetargetvalue="rotating-image"/>

                                                                                <rotating-image

                                                                                    jcr:primaryType="nt:unstructured"

                                                                                    sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                                                    fieldLabel="Rotating Image"

                                                                                    name="./rotatingImage"

                                                                                    rootPath="/content"

                                                                                    showhidetargetvalue="rotating-image"/>

                                                                            </items>

                                                                        </well>

                                                                    </items>

                                                                </rotating-image>

                                                            </items>

                                                        </column>

                                                    </items>

                                                </field>

                                            </images>

                                        </items>

                                    </column>

                                </items>

                            </fieldset>

                        </items>

                    </column>

                </items>

            </tab1>

        </items>

    </content>

</jcr:root>

Avatar

Correct answer by
Level 10

I was talking to AEM Touch UI experts whom said this will not work OOTB, You need to write custom code.

Avatar

Level 6

Below is my custom listener.js code

Hope this will help you.

(function ($, $document) {

    "use strict";

//alert("test");

    $(document).on('foundation-contentloaded', function(e) {

        //alert("contentloaded content ::: "+JSON.stringify(e));

        //showHide();

    });

    $document.on("dialog-ready", function(e) {

        var $dialog = $('.cq-dialog-floating'); // (3)

        //alert($dialog);

        var componentPath = $dialog.attr('action').replace('_jcr_content', 'jcr:content');

        //alert("componentPath is ::::: "+componentPath);

$.ajax({

            url:componentPath+'.json',

            type:'GET',

            dataType:'json',

            async: true,

            success: function(resp) {

            var imagesval = resp.images;

            if(imagesval){

var olElement = $("ol").children();

                    $.each(imagesval, function {

                        var thisOlElement = olElement[i];

                        var imageItem = imagesval[i];

            var jimage = JSON.parse(imageItem);

            if(jimage.mediaType == 'image') {

                            $(thisOlElement).find('.coral-Select-button-text').first().text("Image");

                            $($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){

                            if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL' || obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

                                $(this).closest('.coral-Form-fieldwrapper').hide();

                            }

                        }));

            } else if(jimage.mediaType == 'video') {

$(thisOlElement).find('.coral-Select-button-text').first().text("Video");

                            $($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){

                                if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {

                                    $(this).closest('.coral-Form-fieldwrapper').hide();

                                }

                            }));

var camelTitle = jimage.autoPlay.replace(/(?:^|\s)\w/g, function(match) {

                                              return match.toUpperCase();

                                             });

                            $(thisOlElement).find('.coral-Select-button-text').last().text(camelTitle);

            } else if(jimage.mediaType == 'youTubeVideo') {

                            $(thisOlElement).find('.coral-Select-button-text').first().text("Youtube Video");

                            $($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){

                                if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

                                    $(this).closest('.coral-Form-fieldwrapper').hide();

                                }

                            }));

            }

                    });

        }

            },

            error: function(jqXHR, textStatus, errorThrown) {

alert("there is some error");

}

        });

    });

$(document).on('selected.select', function(e) {

var currentLi;

        var index = 1;

        if($("ol").children().length == 1) {

currentLi = $("ol").children("li:last");

        } else {

            index = 2;

            currentLi = e.target.closest("li");

        }

if(e.selected == 'Select') {

            if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                currentLi.find('coral-checkbox').hide();

            } else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                $(currentLi).find('coral-checkbox').hide();

            }

        }

        if(e.selected == 'image') {

            if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                currentLi.find('coral-checkbox').hide();

                $(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL') {

                        $(this).closest('.coral-Form-fieldwrapper').show();

                    }

                }));

            } else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                $(currentLi).find('coral-checkbox').hide();

                $($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL') {

                        $(this).closest('.coral-Form-fieldwrapper').show();

                    }

                }));

            }

        }

        if(e.selected == 'video') {

            if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                $(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

                        $(this).closest('.coral-Form-fieldwrapper').show();

                    }

                }));

                currentLi.find('coral-checkbox').show();

            } else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                $($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

                        $(this).closest('.coral-Form-fieldwrapper').show();

                    }

                }));

                $(currentLi).find('coral-checkbox').show();

            }

        }

        if(e.selected == 'youTubeVideo') {

            if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                currentLi.find('coral-checkbox').hide();   

                $(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').show();

                    }

                }));

            } else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

                        $(this).closest('.coral-Form-fieldwrapper').hide();

                    }

                }));

                $(currentLi).find('coral-checkbox').hide();   

                $($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

                    if(obj.innerHTML == 'Youtube ID') {

                        $(this).closest('.coral-Form-fieldwrapper').show();

                    }

                }));

            }

        }

    });

})($, $(document));