Show hide dialog fields based on selection in AEM 6.3 | Community
Skip to main content
cquser1
cquser1
Level 7
July 16, 2017
Solved

Show hide dialog fields based on selection in AEM 6.3

  • July 16, 2017
  • 4 replies
  • 15757 views

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 touch ui  : 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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Techaspect_Solu

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.

4 replies

smacdonald2008
smacdonald2008
Level 10
July 17, 2017

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
Techaspect_SoluAccepted solution
Level 7
July 18, 2017

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
cquser1Author
Level 7
July 21, 2017

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
susheel
Level 5
July 21, 2017

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.

Terms & ConditionsAccessibility statement

Loading footer...