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.

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>