CODEWITHSUNDEEP
javascriptsapui5
Singh
Singh

Reputation: 33

How to get selected Item text in ActionSelect control in SAPUI5 XML View

I want to assign an object ActionSelect control in SAPUI5 XML View to get the key/value pair object to get the selected value. I can assign selectedKey(property) to get the selected key but I want both key and value of the selected object. I can achieve this in javascript but then i have to attach each ActionSelect control with the onChange function which I don not want to do as there are quite a number of drop down in my form. So my question is, Can I achieve this in XML View?

        <ActionSelect id="idCountrySAddress" items="{ path: 'countryModel>/results' }" selectedKey="{path: 'pModel>/address/countrySAddress'}"
            change=".onCountrySAChange">
            <items>
                <core:Item key="{countryModel>countryCode}" text="{countryModel>countryDescription}"/>
            </items>
        </ActionSelect>

Thanks

Upvotes: 1

Views: 1200

Answers (1)

alexP
alexP

Reputation: 3765

In this example all your ActionSelects will call the same function (onChangeActionSelect). The function that must be called from the onChangeActionSelect function is in the custom data from the ActionSelect.

<ActionSelect forceSelection="false" change="onChangeActionSelect">
    <customData>
      <core:CustomData key="SelectType" value="Address" />
    </customData>
  <items>
    <core:Item key="foo1" text="bar1"/>
    <core:Item key="foo2" text="bar2"/>
  </items>
</ActionSelect>
        
<ActionSelect forceSelection="false" change="onChangeActionSelect">
    <customData>
      <core:CustomData key="SelectType" value="Name" />
    </customData>
  <items>
    <core:Item key="foo1" text="bar1"/>
    <core:Item key="foo2" text="bar2"/>
  </items>
</ActionSelect>

onChangeActionSelect function

onChangeActionSelect: function(oEvent) {                 
  const oSelectedItem = oEvent.getSource().getSelectedItem();
  const sKey =  oSelectedItem.getKey();
  const sText =  oSelectedItem.getText();
  const fnFunction = "check" + oEvent.getSource().data("SelectType"); //Get function name from custom data

  this[fnFunction](sKey, sText); //Call Function
},

Example functions

checkAddress: function(sKey, sText) {
  alert("Check Address:" + sKey + " " + sText);
},
checkName: function(sKey, sText) {
  alert("Check Name:" + sKey + " " + sText);
}

JS Fiddle

Upvotes: 1

Related Questions