2 Replies Latest reply on Jan 14, 2018 9:10 PM by shridhar.sahu

    how to hide and show dialog field based on selection for a multifield component

    shridhar.sahu Level 1

      Hello All,

       

      I have a working scenario in which if a author selects radiodefault as a radiotype(Note: radiotype is a component with xtype selection and radiodefault of type nt:unstructured)  then it should hide a field named optionimagepath(Note: optionimagepath has xtype cq:widget) in multifield component named optionlist(Note: optionlist has xtype multifield)

       

      i have written a selectionchanged listener :

       

      function(comp, val, isChecked) {

                var panel = comp.findParentByType('panel');

                var link = panel.getComponent('optionlist').getComponent('fieldConfig');

                 if(val === 'radiodefault'){

                link.getComponent('option-imagepath').hide();                   //please help over here as these listener is not working

                }else{

                link.getComponent('option-imagepath').show();

                }

      }

       

      BELOW IS THE XML CODE

       

      <?xml version="1.0" encoding="UTF-8"?>

      <jcr:root xmlns:cq="/external-link.jspr%2Fcq%2F1.0" xmlns:jcr="http://www.jcp.org//1.0" xmlns:nt="http://www.jcp.org/jcr0"

          jcr:primaryType="cq:Dialog"

          title="Dialog"

          xtype="dialog">

          <items

              jcr:primaryType="cq:Widget"

              xtype="tabpanel">

              <items jcr:primaryType="cq:WidgetCollection">

                  <tab1

                      jcr:primaryType="cq:Panel"

                      title="Add/Edit Radio Component">

                      <items jcr:primaryType="cq:WidgetCollection">        

                              <radiotype

                              jcr:primaryType="cq:Widget"

                              fieldLabel="Radio Type"

                              name="./type"

                              type="select"

                              xtype="selection">

                              <options jcr:primaryType="cq:WidgetCollection">

                                  <radio-default

                                      jcr:primaryType="nt:unstructured"

                                      text="Radio Default"

                                      value="radiodefault"/>

                                  <radio-image

                                      jcr:primaryType="nt:unstructured"

                                       text="Radio Image"

                                      value="radioimage"/>

                              </options>

                              <listeners

                                  jcr:primaryType="nt:unstructured"

                                  selectionchanged="

                                    function(comp, val, isChecked) {

                                    var panel = comp.findParentByType('panel');

                                      var link = panel.getComponent('optionlist').getComponent('fieldConfig');

                                    if(val === 'radiodefault'){

                                    link.getComponent('option-imagepath').hide();

                                    }else{

                                    link.getComponent('option-imagepath').show();

                                    }

                                  }

                              "/>

                          </radiotype>

                          <optionlist

                              jcr:primaryType="cq:Widget"

                              fieldLabel="Option List"

                              name="./optionlist"

                              title="Add/Edit Options"

                              xtype="multifield">

                              <fieldConfig

                                  jcr:primaryType="cq:Widget"

                                  border="true"

                                  hideLabel="true"

                                  layout="form"

                                  padding="10px"

                                  width="1000"

                                  xtype="multi-field-panel">

                                  <items jcr:primaryType="cq:WidgetCollection">

                                      <optioncontent

                                          jcr:primaryType="cq:Widget"

                                          dName="optioncontent"

                                          fieldLabel="Option Content"

                                          width="250"

                                          xtype="textfield"/>

                                      <optionimagepath

                                          jcr:primaryType="cq:Widget"

                                          dName="optionimagepath"

                                          fieldLabel="Option Image"

                                           width="250"

                                          xtype="pathfield"/>

                                  </items>

                              </fieldConfig>

                          </optionlist>

                      </items>

                  </tab1>

              </items>

          </items>

      </jcr:root>