Listener in multi field | Community
Skip to main content
P
patK-ze1xYs
Level 4
October 16, 2015
Solved

Listener in multi field

  • October 16, 2015
  • 1 reply
  • 1764 views

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 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

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 handler 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);
}

. 

 

1 reply

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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 handler 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);
}

. 

 

Terms & ConditionsAccessibility statement

Loading footer...