Listeners in CQ (Getting value from one widget into other widget)

Listeners in CQ (Getting value from one widget into other widget)

Problem: While working on a component in CQ I got struck while finding a value from one of the widgets which was to be used in other widget. The solution came with the name "listeners". But how to create one and how to implement it remained a problem.

Solution: In CQ you can associate a listener with a component, a dialog, a widget etc. For that you just need to create a folder with the name listeners as shown below.

As I was looking to use the value in my second widget( title= "SecondWidget") from the first widget( title= "FirstWidget"), I created a listener for it just as shown above with type as nt:unstructured.

I used the property name as beforeshow as I want to do the functionality before showing of that widget. Now just write the functionality under function(){<functionality in pure javascript>}. Thats it you are done.

e.g. function(){alert("123");} in this value will prompt 123 when u will click on the widget.

Extending it further ::
Now in order to get the value we need to use the ExtJs (Javascript Library used in CQ) 
Now as is written in the value of beforeshow "function(){abc(this);}"

On clicking of the second widget the function abc will be called. You can now put this function in any javascript file which is used by your application.
We are passing the widget object along with it by using this.

Here we have used the xtype of widget as "panel" under the parent as "tabpanel". Please see the function below to see the usage.

function abc(tab) {

/* Using the below line you can find any xtype used in the First widget */

// findParentByType is used to get the parent of the panel

// find function is used to get the widget by any of its property we have

// used title in this case

// findByType is used to get children by their xtype (returns array)

var selectionObj = tab.findParentByType("tabpanel").find("title",

"FirstWidget")[0].findByType("selection")[0];

// After finding the select input you can find its selected value by get

// Value function

var val = selectionObj.getValue();

alert(val);

// This value can then be used as the user wishes

// You can also find the Id of the widget by id property

var panelId = tab.findParentByType("tabpanel")

.find("title", "SecondWidget")[0].id;

// You can further use this within document.getElementById function and can

// use normal

// javascript ways to handle it

// Here we have find the select input inside second widget whose xtype is

// not defined

var selectField = document.getElementById(panelId).getElementsByTagName('select');

}