Saturday, February 2, 2019

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

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

This post will explain the details on how to handle the change event of Coral UI 3 Select(Drop down) in Touch UI dialog's

Define the Coral UI 3 Touch UI dialog (cq:dialog)with require fields

The XML structure of the dialog is below

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" 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="nt:unstructured"
    jcr:title="Column Component Responsive"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[dialogevent]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items jcr:primaryType="nt:unstructured">
            <presets
                jcr:primaryType="nt:unstructured"
                jcr:title="Presets"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <title
                                granite:class="title"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                fieldDescription="Note: Titles are not available on the Advanced preset"
                                fieldLabel="Add Title to Columns?"
                                name="./title"
                                text="Add Title to Columns?"/>
                            <padding
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                fieldDescription="check to remove padding from columns"
                                fieldLabel="Remove Padding from Columns?"
                                name="./removePadding"
                                text="Remove Padding from Columns?"/>
                            <presets
                                granite:class="presets"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldDescription="Choose Column style(Advanced for column customization)."
                                fieldLabel="Presets"
                                name="./presets">
                                <items jcr:primaryType="nt:unstructured">
                                    <option1
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(50%,50%) No Offset"
                                        value="50-50-no-offset"/>
                                    <option2
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(50%,50%) with Offset"
                                        value="50-50-with-offset"/>
                                    <option3
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(60%,40%)"
                                        value="60-40"/>                                 
                                    <option10
                                        jcr:primaryType="nt:unstructured"
                                        text="Advanced"
                                        value="Advanced"/>
                                </items>
                            </presets>
                            <colnums
                                granite:class="columns"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldDescription="Choose the number of column(s) will be created."
                                fieldLabel="Columns"
                                name="./columns">
                                <items jcr:primaryType="nt:unstructured">
                                    <_x0031_
                                        jcr:primaryType="nt:unstructured"
                                        text="1"
                                        value="1"/>
                                    <_x0032_
                                        jcr:primaryType="nt:unstructured"
                                        text="2"
                                        value="2"/>                                 
                                </items>
                            </colnums>
                        </items>
                    </column>
                </items>
            </presets>
        </items>
    </content>
</jcr:root>


Defining the Event Listener:


Add the granite:class property with unique class name in all the required fields that should be processed in the event listener.

coral_ui3_select_change_listener

Define a cq:ClientLibraryFolder node under the component, name it clientlibs and add the following properties.

categories (String[]) - <define category name> e.g dialogevent
Create js.txt and event.js under clientlibs folder.
Add below lines into js.txt

#base=js
event.js

coral_ui3_select_change_listener


Add the below script in event.js

This script hide drop down with class .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 and 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


(function (document, $, Coral) {

  var $doc = $(document);

 $doc.on('foundation-contentloaded', function(e) {

  $('.columns').parent().addClass("hide"); 

$('.presets', e.target).each(function (i, element) {

            Coral.commons.ready(element, function (component) {

                $(component).on("change",function (event) {

                  if(component.value=='Advanced')
                  {
                  $('.columns').parent().removeClass("hide");
                        $('.title').prop('checked', true);
                  }else
                  {
$('.columns').parent().addClass("hide");
                        $('.title').prop('checked', false);
                  }
                });
            });
        });
  });

Add the below property in cq:dialog node

extraClientlibs String[] - dialogevent (the client library defined in the previous step)

coral_ui3_select_change_listener

Now add the component to a page and author it

coral_ui3_select_change_listener
coral_ui3_select_change_listener



No comments:

Post a Comment