Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Show hide dialog fields based on selection in AEM 6.3

Avatar

Avatar
Validate 50
Level 6
cquser1
Level 6

Likes

75 likes

Total Posts

313 posts

Correct Reply

15 solutions
Top badges earned
Validate 50
Validate 25
Validate 10
Validate 1
Give Back 50
View profile

Avatar
Validate 50
Level 6
cquser1
Level 6

Likes

75 likes

Total Posts

313 posts

Correct Reply

15 solutions
Top badges earned
Validate 50
Validate 25
Validate 10
Validate 1
Give Back 50
View profile
cquser1
Level 6

16-07-2017

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 50
Level 6
Techaspect_Solu
Level 6

Likes

63 likes

Total Posts

150 posts

Correct Reply

79 solutions
Top badges earned
Boost 50
Boost 5
Boost 3
Boost 25
Boost 10
View profile

Avatar
Boost 50
Level 6
Techaspect_Solu
Level 6

Likes

63 likes

Total Posts

150 posts

Correct Reply

79 solutions
Top badges earned
Boost 50
Boost 5
Boost 3
Boost 25
Boost 10
View profile
Techaspect_Solu
Level 6

18-07-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.

Answers (3)

Answers (3)

Avatar

Avatar
Validate 1
Level 4
susheel
Level 4

Likes

60 likes

Total Posts

109 posts

Correct Reply

17 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 1
Level 4
susheel
Level 4

Likes

60 likes

Total Posts

109 posts

Correct Reply

17 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile
susheel
Level 4

21-07-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.

Avatar

Avatar
Validate 50
Level 6
cquser1
Level 6

Likes

75 likes

Total Posts

313 posts

Correct Reply

15 solutions
Top badges earned
Validate 50
Validate 25
Validate 10
Validate 1
Give Back 50
View profile

Avatar
Validate 50
Level 6
cquser1
Level 6

Likes

75 likes

Total Posts

313 posts

Correct Reply

15 solutions
Top badges earned
Validate 50
Validate 25
Validate 10
Validate 1
Give Back 50
View profile
cquser1
Level 6

21-07-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'

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

17-07-2017