Saturday, February 2, 2019

How to handle the Coral UI 3 Select(Drop down) change event in Touch UI dialog’s?

How to handle the Coral UI 3 Select(Drop down) change event in Touch UI dialog’s?

This tutorial explains the approach to handle the change event of Coral UI 3 Select(Drop down) in Touch UI dialog’s.

Define Dialog

As a first step, define a Coral UI 3 Touch UI dialog (cq:dialog) with required fields. The XML structure of the sample dialog is below

Add a property with name granite:class to the required elements — this class names will be used to locate the dialog elements in the java script.

handle — coral-ui3-select-change-event
handle — coral-ui3-select-change-event

Define the Event Listener

Let us now define a even listener that will hide and show the tabs as required.

Define a cq:ClientLibraryFolder node under the component with the name clientlibs and add the below properties.

categories (String[]) — <define category name> e.g customvalidation

Create a folder with name js and add a file with name js.txt under it. Also, Add a file with name event.js under clientlibs folder.

Add the below script in event.js

This script hide drop down with class name “.columns” on dialog load, register a change event on the drop down with class name “.presets”.

On-change of the value in the drop down with class name “.presets”, if the selected value is ‘Advanced’ then un-hide the drop down with class “.columns “ and also select the checkbox with class name “.title”

If the value is other than ‘Advanced’ then hide drop down with class “.columns “ and un-select the checkbox with class name “.title”

Add the below content inside js.txt

#base=js
event.js

Add the below property in cq:dialog node

extraClientlibs String[] — customvalidation(the client library defined in the previous step)

handle — coral-ui3-select-change-event

Author the component to a page

On dialog load, the drop down with class name “.columns” hided

On change of value in the drop down with class name “.presets”, if the selected value is ‘Advanced’ then un-hide the drop down with class “.columns” and also select the checkbox with class name “.title”

If the value is other than ‘Advanced’ then hide drop down with class “.columns “ and un-select the checkbox with class name “.title”

handle — coral-ui3-select-change-event
handle — coral-ui3-select-change-event

Sample Dialog — https://github.com/techforum-repo/youttubedata/blob/master/aem/handle-coral-ui3-select-change-event-1.0.zip

2 comments:

  1. The dialog values are not persisting upon dialog reopen, could you please suggest.

    ReplyDelete
    Replies
    1. The checkbox values were not persisted on dialog reload, the issue was the checkbox selection saved as on/off instead of true/false. To fix the issue add a property "value" with default value "false" (checkbox un-selected by default) or "true"(checkbox selected by default), this will change the values to be stored as true/false and fix the reloading issue.

      Delete