Add listeners to widgets in CQ5

When we build a dialog in CQ5, we could need to define a custom action responding to a specific event.

Imagine for example that you need to copy the content of one field into another one or maybe you need to show/hide a specific field depending on the value of another field. These are typical examples where you need to define a listener in a CQ5 dialog in order to do something.

So let’s see how to define a custom listener in few steps. In the following example I will show how you can show/hide a field in a dialog, depending on the value of another field.

1. First of all, we need add an id (itemId) to the element that we need show/hide, in order to being able to select it by JS. In our example, I set this id as idField.
2. Then we need add a listener to the the field that we need to evaluate the value:
   • If the value is 0, we hide the field with the specified id and we set the field as not required
   • If the value is 1, we show the field with the specified id and we set the field as required

Here you can find the complete dialog example.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    height="{Long}600"
    helpPath="en/cq/current/wcm/default_components.html#Text"
    title="Text"
    width="{Long}700"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <tabs jcr:primaryType="cq:TabPanel">
            <items jcr:primaryType="cq:WidgetCollection">>
                <item1
                    jcr:primaryType="cq:Widget"
                    title="Tab Title"
                    xtype="panel">
                    <items jcr:primaryType="cq:WidgetCollection">
                        <option1
                            jcr:primaryType="cq:Widget"
                            fieldLabel="Options"
                            name="./option"
                            type="radiogroup"
                            defaultValue="0"
                            xtype="selection">
                            <options jcr:primaryType="cq:WidgetCollection">
                                <automatic 
                                    jcr:primaryType="nt:unstructured"
                                    text="Hide Field"
                                    value="0"/>
                                <blank
                                    jcr:primaryType="nt:unstructured"
                                    text="Show field"
                                    value="1"/>
                            </options>
                            <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(comp, val, isChecked) { 
                                var panel = comp.findParentByType('panel'); 
                                var link = panel.getComponent('idField'); 
                                if(val == 1){
                                    link.show();
                                    link.allowBlank = false;
                                }else{
                                    link.hide();
                                    link.allowBlank = true;
                                }
                            }"/>
                        </option1>
                        <link1
                            itemId="idField"
                            jcr:primaryType="cq:Widget"
                            fieldDescription="Insert here the path of the product"
                            fieldLabel="Path"
                            name="./link1"
                            xtype="pathfield">
                        </link1>
                    </items>
                </item1>
            </items>
        </tabs>
    </items>
</jcr:root>

You can check all the documentation about widgets, event and more at https://docs.adobe.com/docs/en/cq/5-5/widgets-api/index.html (in this case for CQ5.5)