Codebay Innovation
CodeBay Coding

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.

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)

Do you need help for you AEM projects?

You Might Also Like

1 Comment

  • Avatar
    Reply
    Sumit
    December 17, 2017 at 9:23 am

    Exactly what i was looking for. Thanks.

Leave a Reply