Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Listener in multi field

Avatar

Level 4

I am trying to use a listener for a selection inside the multifieldset  , E.g Following code snippet will be wrapped under the multi field. 

<multifieldSet>

              <option

                    jcr:primaryType="cq:Widget"
                    name="option"
                    type="select"
                    xtype="selection">
                    <options jcr:primaryType="cq:WidgetCollection">
                        <image
                            jcr:primaryType="nt:unstructured"
                            text="Image"
                            value="image"/>
                        <video
                            jcr:primaryType="nt:unstructured"
                            text="video"
                            value="video"/>
                    </options>
                     <listeners
                    jcr:primaryType="nt:unstructured"
                    loadcontent="function(box,value){
                                    if (this.getValue() == 'image'){
                                         alert('image');
                                        // hide   Text box  1

                                    }else {

                                        // hide   Text box 2
                                        }
                                    }"

                    selectionchanged="function(box,value){
                                    if (this.getValue() == 'image'){

                                             // hide   Text box  1                                   

                                     }else {

                                        // hide   Text box 2
                                        }
                                    }"/>
                </mediaOption>
                <text1
                    jcr:primaryType="cq:Widget"
                    name="text1"
                     xtype="textfield"/>
                <text2
                    jcr:primaryType="cq:Widget"
                    name="text2"
                     xtype="textfield"/>

<multifieldSet>

 

Can anybody please tell which API should  be used  and how to use them to handle the logic 

1 Accepted Solution

Avatar

Correct answer by
Level 10

When working with xtypes and listeners - you use the AEM Widget API.  For information, see CQ5 Widgets API Documentation.

To learn how to work with xtypes and listeners -- see this community article:

http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

In this use case -- an xtype object's listeners are used to update fields. The value selected from a drop down is used to set a text field. However - once you understand this -- you can do a lot using xtype and listeners. 

The listeners property lets you specify an event handler for this control.  

listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
The only event ha
ndler that is defined is selectionchanged that is fired when a selection in the drop-down control is changed. In this situation, a method named updateHidden is invoked. The following code example shows the updateHidden method.  

// called when a selection in the drop-down is made
updateHidden: function() {
    var val1 = this.linkType.getValue();
    this.linkText.setValue(val1);
}

 

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

When working with xtypes and listeners - you use the AEM Widget API.  For information, see CQ5 Widgets API Documentation.

To learn how to work with xtypes and listeners -- see this community article:

http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

In this use case -- an xtype object's listeners are used to update fields. The value selected from a drop down is used to set a text field. However - once you understand this -- you can do a lot using xtype and listeners. 

The listeners property lets you specify an event handler for this control.  

listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
The only event ha
ndler that is defined is selectionchanged that is fired when a selection in the drop-down control is changed. In this situation, a method named updateHidden is invoked. The following code example shows the updateHidden method.  

// called when a selection in the drop-down is made
updateHidden: function() {
    var val1 = this.linkType.getValue();
    this.linkText.setValue(val1);
}