Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Displaying a dialog fields based on condition

Avatar

Level 4

Hi,

I would like to display radio buttons in page properties dialog for all the templates used in my website but not for all pages.

I want to restrict that option for some specific pages.

How can I achieve it?

I wanted to add touch ui listeners as we were adding in classic ui

Please guide me.

Thanks,

Pallavi

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi

Yes I made the property cq:showOnCreate = true on that particular widget,but still my JS wasn't working.My clientlibs were not loading for createPageWizard(even after adding the category - cq-siteadmin-admin-createpage)
I got the issue resolved by
overlaying /apps/cq/gui/components/siteadmin/admin/createpagewizard/properties and including my custom clientlibrary in the JSP file.

Thanks a lot for your time .


Thanks,

Pallavi

View solution in original post

11 Replies

Avatar

Level 4

Hi Pallavi,

Please refer to Adobe Experience Manager Help | Dynamically modifying an Adobe Experience Manager Touch UI Dialog for details on how to show/hide dialog fields based on the value in the select field.

AEM has an available library at /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js that toggles fields based on values in the dropdown in dialog.

For your exact use case, you can have a property on your page which decides whether you want to show or hide a particular field in the dialog. Make the select field disabled in the dialog and manually/programmatically set properties on pages which drive the hiding and showing of your dialog fields.

Hope this helps!

Avatar

Level 4

Thanks edubeyhttps://forums.adobe.com/people/Rima%20Mittal for the response.

I tried using class attribute to the the radio button as shown below :
1467285_pastedImage_3.png

and was able to see the same in the markup :

1467286_pastedImage_4.png
Now I am  using a clientlibrary to control this behaviour of displaying for particular pages .I have mentioned clientLibs categories as cq.authoring.dialog and also mentioned the js file  in js.txt

In the js file ,I wrote a small snipet just to check if my control is coming to the js file or not,but there was no output.

(function ($, $document) {

    "use strict";

$document.on("dialog-ready", function() {
console.log("TEST");

});


I am unable to see the console log,there were no errors generated as well.Is there anything I missed ?
I am using AEM 6.2 version.

Please give me your input.

Avatar

Level 10

You should correct that code with two changes

1. Closing braces - line 7

2. and available browser objects for document and $ - line 9

Updated code

(function ($, $document) {

    "use strict";

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

        console.log("TEST");

    });

})($, $(document));

Avatar

Level 4

Thank you for stating it.
I tried with the above snippet but still unable to see console.log

Avatar

Community Advisor

Hi,

Above should be able to print in the browser console successfully on opening the component dialog. Perhaps try to add a console.log or alert statement as the first line inside the function (outside dialog ready function) ->  on load of the page in author (edit mode), we can see it working.

Avatar

Level 4

vijis31358935edubey
Hi ,
I was able to hide/show the radio buttons .
But I am facing 1 issue now ,

It works just in case of modification of  page properties, on the other hand it does not work in the case of creation of the page(/mnt/overlay/wcm/core/content/sites/createpagewizard.html).

What should I do in this case ?Please help.

Avatar

Community Advisor

Hi,

Could you please confirm where you have used the radio buttons in page dialog (ie which tab of page component's dialog)

Avatar

Level 4

Hi ,

I have used the radio button in the basic tab.

Avatar

Community Advisor

HI,

Add a property to the radio component that you have added in Basic Tab of Page Dialog - cq:showOnCreate (Boolean) - > Set to true.

Before actually checking for your hide/show logic, I suggest you go via below steps

  • Comment the custom JS responsible for show/hide of radio button (in js.txt)
  • Add the above-mentioned property and cross check if radio is appearing both on page create and editing via page properties.
  • If yes, then enable your custom JS and see if it works in either case per your logic.

If you still face any issue, please share the JS snippet.

Avatar

Correct answer by
Level 4

Hi

Yes I made the property cq:showOnCreate = true on that particular widget,but still my JS wasn't working.My clientlibs were not loading for createPageWizard(even after adding the category - cq-siteadmin-admin-createpage)
I got the issue resolved by
overlaying /apps/cq/gui/components/siteadmin/admin/createpagewizard/properties and including my custom clientlibrary in the JSP file.

Thanks a lot for your time .


Thanks,

Pallavi