Displaying a dialog fields based on condition

[pallavis8124480]

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

[edubey]

I haven't used this particularly for dialog but look at this Granitehttps://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui...

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui...

[Rima_Mittal]

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!

[pallavis8124480]

Thanks edubey &  https://forums.adobe.com/people/Rima%20Mittal for the response.

I tried using class attribute to the the radio button as shown below :

and was able to see the same in the markup :

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.

[edubey]

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));

[pallavis8124480]

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

[Vijayalakshmi_S]

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.

[pallavis8124480]

vijis31358935​ edubey​
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.

[Vijayalakshmi_S]

Hi,

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

[pallavis8124480]

Hi ,

I have used the radio button in the basic tab.

[Vijayalakshmi_S]

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.

[pallavis8124480 · Accepted solution]

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