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

Show hide dialog fields based on selection in AEM 6.3

Avatar

Level 8

Hi,

Suppose I have a drop down with 6 values, out of which only on selection of one of them a section of multifield items in the same dialog have to be shown. On selection of the rest another section of multifield items in the same dialog is to be shown.

Toggle fields based on selection in Granite UI dialogs | Adobe AEM Club  : Solution provided here doesn't help in my use case.

AEM Concepts | AEM Tutorial | Know Adobe CQ better: Show hide dialog fields based on selection in to...  : There seems to be relevant solution provided here going by the solution description, but there seems to be some additional functionality provided in-here[i.e, not required in my use case]. But somehow not able to get this to work.

Any pointers/reference code will be really helpful.

desktop_exl_promo_600x100_weknowyou.png

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi cquser1,


User can achieve this by writing a listener to show/hide the dialog fields.

As per your requirement you need to write a custom function using jquery to hide/show the dialog fields.

Here is the use case:

-Create a clientlibs with category -cq.authoring.dialog(by default it is included).

-In the JS file write a custom function/listener to show/hide the dialog fields.

Below is the sample snippet.Modify it as per your requirement.Hope it helps you.

Sample Code :

function(document, $) {  

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

        showHide();

    });

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

        showHide();

    });

    function showHide(){

        var numberOfFields = $('#numberOfCards select').val();

        $('.programCard').hide();

        for (var i = 0; i < numberOfFields; i++) {

         $('.programCard').eq(i).show();

        }

    }

})(document,Granite.$);

Thanks,

Techaspect Solutions.

View solution in original post

4 Replies

Avatar

Correct answer by
Level 7

Hi cquser1,


User can achieve this by writing a listener to show/hide the dialog fields.

As per your requirement you need to write a custom function using jquery to hide/show the dialog fields.

Here is the use case:

-Create a clientlibs with category -cq.authoring.dialog(by default it is included).

-In the JS file write a custom function/listener to show/hide the dialog fields.

Below is the sample snippet.Modify it as per your requirement.Hope it helps you.

Sample Code :

function(document, $) {  

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

        showHide();

    });

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

        showHide();

    });

    function showHide(){

        var numberOfFields = $('#numberOfCards select').val();

        $('.programCard').hide();

        for (var i = 0; i < numberOfFields; i++) {

         $('.programCard').eq(i).show();

        }

    }

})(document,Granite.$);

Thanks,

Techaspect Solutions.

Avatar

Level 8

Hi,

Apologies for the delayed response.


Thank you for your reply.

It would be really helpful if you can provide answers to few of my doubts :

1] Can you please let me know what do these variables imply in the provided code.

'#numberOfCards'

'#numberOfCards select'

'.programCard'

Avatar

Level 5

Hi,

If you are good with jquery, we can easily give some class names or id's to the multifield nodes as properties.

And write code to target those to show or hide.

You can write all these in a clientlib with category cq.authoring.dialog as this loads in author mode only.