Show hide dialog fields based on selection in AEM 6.3

[cquser1]

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.

[smacdonald2008]

The only reference i know of is the toggle functionality:  Adobe Experience Manager Help | Dynamically modifying an Adobe Experience Manager Touch UI Dialog

[Techaspect_Solu · Accepted solution]

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.

[cquser1]

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'

[susheel]

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.