In cq5 widget hide and show based on checkbox in dialog

Question

I have a implementation in which my radio button group has to be shown and hide based on checkbox. I just included a Cq:panel in which it contains widgets of one checkbox and one radio button group(which contains two radio buttons) .I am getting this values in my jsp and manipulating accordingly. My question is, can i show/hide this radio button group when author checks/unchecks the checkbox because the radio button group is dependent on check box.It will be pleasing when i hide this group when check box is unchecked. I have gone through the api but i couldn't find. Can anyone please help me on this. Thanks in advance.

Clearheaded

Answer 1

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>

Raffish

i haven't created radio group to place radio buttons,instead i just created two radio buttons with same name and added inputValue as 1 and 2 for them respectively and xtype as radio. As i am new to cq please let me know how to add a group for radio buttons with properties. And can you please provide any tutorials or good references for learning about widgets in cq. – Clearheaded

I used radio group because you mentioned in the question. I have modified the answer now using xtype selection. There isn't much you can find about CQ5 widgets. As such, the documentation is poor. But i would suggest learning Extjs which might help you with this. – Raffish

var rdg = panel.getComponent("rdg"); //find the component with itemId rdg...can u tell me what is itemId here. – Clearheaded

The itemId is the id that i have given to the Radio widget. Check the link tag <link jcr:primaryType="cq:Widget" itemId="rdg" ... /> – Raffish

function(comp, val, isChecked) { var panel = comp.findParentByType("panel"); var rdg = panel.getComponent("text"); isChecked ? rdg.show() : rdg.hide(); } i tried using this but for the first time if i open dialog listener is not triggering. Which means by default check box is unchecked that time i can able to see the widget(radio button) but when i check that and uncheck it its working. And one more thing it is hiding the button but not the field label.thanks in advance – Clearheaded

Are you sure? Coz this is working for me. Have updated the entire dialog xml which i am using. Please check with this one. – Raffish

can u please package and send to my email id ([email protected]) so that i can understand properly. – Clearheaded

all you have to do is define your javascript function for the loadcontent event as well as the selection changed. so literally copy and paste everything from selectionchanged down to rdg.hide(); after itself and change selectionchanged to loadcontent. – Dinadinah

I know this might no longer be relevant, but I think he just forgot to replace the doublequotes around "panel" and "rgd" with single quotes. – Modiste