AEM Component dialog

[Himanshu_Singhal]

Hey,

Can we make a radio button field in component dialog so click of it, it displays text box below it without using any external listener function?

Scenario, 

* abc
* xyz
So, on click of xyz, it should display text box below like this:

*abc

*xyz

label1 : text box

label2 : text box

Thanks,

Himanshu

[edubey]

are you saying that you want to achieve this but using any cq5 widget listener?

[Himanshu_Singhal]

No problem in using CQ5 listener. There's something CQ5 internal that can be used as a property so need to write any javascript or jQuery code to show/hide value.

[edubey · Accepted solution]

Yes Himanshu,

You can use event listener method check based on this you can hide or show textbox

https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.form.Radio

[kautuk_sahni]

Hi 

See, your question is same as :- http://stackoverflow.com/questions/22868253/in-cq5-widget-hide-and-show-based-on-checkbox-in-dialog

//

Yes, you can achieve this by attaching a listener to the selectionchanged event that is triggered when the checkbox is selected. The API provides the list of public events that would be triggered for a widget.

In order to attach a listener to an event, you need to create a node of type nt:unstructured called listeners under the required widget and add the event name as a property to the node, whose value would be the handler function which you would like to execute.

In your case the property should be selectionchanged and the value for it should be a function that fulfills your requirement, something like this

function(comp, val, isChecked) { var panel = comp.findParentByType("panel"); //find the parent panel container var rdg = panel.getComponent("rdg"); //find the component with itemId rdg /*hide or show component based on checked value */ isChecked ? rdg.hide() : rdg.show(); }

The structure of the dialog within the panel is

<dialog jcr:primaryType="cq:Dialog" title="Test Component" xtype="panel"> <items jcr:primaryType="cq:WidgetCollection"> <chkbox jcr:primaryType="cq:Widget" fieldLabel="Show radio buttons" name="./show" type="checkbox" xtype="selection"> <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(comp, val, isChecked) { var panel = comp.findParentByType("panel"); var rdg = panel.getComponent("rdg"); isChecked ? rdg.show() : rdg.hide(); }"/> </chkbox> <link jcr:primaryType="cq:Widget" fieldLabel="Select one" itemId="rdg" name="./rad" type="radio" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <radio1 jcr:primaryType="cq:Widget" text="Yes" value="T"/> <radio2 jcr:primaryType="cq:Widget" text="No" value="F"/> </options> </link> </items> </dialog>

Link 2- http://stackoverflow.com/questions/25244844/conditional-show-hide-of-fields-in-aem-6-dialogs

//

For TouchUI dialogs there is actually no plugin registry that was heavily used in ExtJS framework. This time, we can actually do all the magic with the use of just clientlibs and jQuery.

Take a look at the base implementation that you are refering to that can be found here: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js

This is a clientlibs that is attached to cq.authoring.dialog category and requires granite.jquery to be initialized before. See clientlibs documentation to learn more about it. The script itself is a anonymous function that is invoked with a document parameter and jQuery from granite (see last line in the script: })(document,Granite.$);)

If given functionality is not sufficent for you, you can create your own clientlib with a similar simple javascript function that will handle more sophisticated conditions. Please also note, that any attribute placed in the "widget" node will be placed as data attribute in resulting html.

For the node (e.g. /libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/orderBy) that you want to hide when some condition occurs place property: hideWhen=children,search (don't make it an array as it won't be properly casted to a string in JS). Point a dropdown selector (/libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/listForm@cq-dialog-dropdown-hidefor-target) to a proper class that you will on the other hand assign to your hideable field.

|-listFrom(select) | |--@cq-dialog-dropdown-hidefor-target=.orderByClass | orderBy(autocomplete) |--@hideFor=children,search |--@class=orderByClass

The javascript method for your case could look something like that:

(function(document, $) { "use strict"; // when dialog gets injected $(document).on("foundation-contentloaded", function(e) { // if there is already an inital value make sure the according target element becomes visible showHide($(".cq-dialog-dropdown-showhide", e.target))  ; }); $(document).on("selected", ".cq-dialog-dropdown-showhide", function(e) { showHide($(this)); }); function showHide(el){ var widget =  el.data("select"); if (widget) { // get the selector to find the target elements. its stored as data-.. attribute var target = el.data("cqDialogDropdownHideforTarget"); // get the selected value var value = widget.getValue(); // make sure all unselected target elements are hidden. var hideFor = $(target).data('hidefor').split(','); $(target).not(".hide").addClass("hide"); // unhide the target element that contains the selected value as data-showhidetargetvalue attribute if (hideFor.indexOf(value) == -1) { $(target).removeClass("hide"); } } }

There are some issues with hiding input labels in such case so it might be good idea to wrap the field into the section (granite/ui/components/foundation/well)

I hope this would help you.

Thanks and Regards

Kautuk Sahni