Thursday, October 17, 2013

Access different widgets inside the widget event listeners | CQ5 / AEM

To access widgets inside the event listeners of any widget, follow the below step.
  1. Get the "dialog" object first.  
    1. var dailogObject = this.findParentByType('dialog');
  2. This will return the dialog object associated with your compoent dialog. Then look for the corresponding widget by invoking 
    1. var titleField = dailogObject .getField('./jcr:title'); 
  3. The above function looks for a widget by name './jcr:title' and returns the widget object associated.
Use case scenario.
Let's create a component dialog with 2 widgets (Pathfield, TextField). 
use case 1: if author selects any link URL then the corresponding title of the page should be set into the TextField widget.

Below steps can be followed to achieve this.
  1. create a component dialog with two widgets.
    1. One path field with name "./path" and xtype is  "pathfield"
    2. Text field with name "./title" and xtype is "textfield" 
  2. Attach a listener to the path field. And add "dialogclose" event to the listener. 
  3. The javascript function for the above event can be written as below.
  4. Sample screen shot

3 comments:

  1. Nice Abani I'm simply trying to create an input field from a dropdown menu can you help me out with that...Thanks

    ReplyDelete
  2. I wanted to add a listener to my dialog, came across your blog while surfing net. Good Job Sir!!!

    ReplyDelete
  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Java developer learn from Java Training in Chennai. or learn thru Java EE Online Training from India . Nowadays Java has tons of job opportunities on various vertical industry.

    ReplyDelete