Skip to Content

How to bind json and odata model to sap.m.Table simultaneously in sapui5?

Hi all,

I have a MultiCombobox and a sap.m.table. I use JSON model for binding the values to MultiCombobox. The key values which I choose in Multicombobox will get added as a row in the table. And similarly if I delete it from table row , the same key is unselected from Multicombobox. Now my scenario is, to call an odata service and load the price value based on the key value and bind it to the table along with the key.

View code:

<MultiComboBox id="mc" width="100%" placeholder="Select" selectionChange="onSelectionChange"
items="{data>/serviceCollection}">
<items>
<core:Item key="{data>key}" text="{data>sername}" />
</items>
</MultiComboBox>

Table code:

<Table mode="Delete" id="idhusbservTabel1" delete="onDelete" items="{data>/selectedSet}">
<columns>
<Column> <Label text="Service Name" design="Bold" /> </Column> <Column minScreenWidth="Small" demandPopin="true">

<Label text="Quantity" design="Bold" /> </Column>
<Column minScreenWidth="Small" demandPopin="true" >
<Label text="Rate" design="Bold" /> </Column>
<Column> <Label text="Remarks" design="Bold" /> </Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{data>sername}" />
<Input value="{data>qty}" width="50%" type="Number"/>
<Text text="{data>rate} {data>curr}" />
<Input value="{data>rem}" />
</cells>
</ColumnListItem>
</items>
</Table>

Controller code:

husbandrytablebind: function () {
var oJsonModel = new sap.ui.model.json.JSONModel({
"serviceCollection": [

{ "key": "01", "sername": "Seaman Crew Change", "qty": "", "rate": "200.00", "curr": "USD",
"rem": "" }, { "key": "02", "sername": "Passenger Crew Change", "qty": "", "rate": "100.00",
"curr": "USD", "rem": "" }, { "key": "03", "sername": "Crew Shore Leave", "qty": "", "rate": "150.00", "curr": "USD", "rem": "" }, { "key": "04", "sername": "Visitor Pass", "qty": "", "rate": "200.00", "curr": "USD", "rem": "" }, { "key": "05", "sername": "Crew Transfer", "qty": "", "rate": "250.00", "curr": "USD", "rem": "" },

}],
"selectedSet": []
});
this.getView().byId("mc").setModel(oJsonModel, "data");
this.getView().byId("idhusbservTabel1").setModel(oJsonModel, "data");
},

_selectedItems: function(aItems) {
var aSelected = [];
$.each(aItems, function(i, o) {
var aItemsval = o.getBindingContext("data").getObject();
aItemsval.rate=iprice; //updating json value 'rate'
alert("aItemsval:"+JSON.stringify(aItemsval));
aSelected.push(aItemsval);
});
this.getView().byId("idhusbservTabel1").getModel("data").setProperty("/selectedSet", aSelected);
},

onSelectionChange: function(oEvent) {
var oSrc = oEvent.getSource();
var aItems = oSrc.getSelectedItems();

/**********************OData service call to get price value**************/
var sn = oEvent.getParameter("changedItem").getText();
console.log(sn);
var oModel = new ODataModel('/S**********/****/*******/CustomerServices.xsodata',true);
var servicename =[ new sap.ui.model.Filter("SERVICENAME", sap.ui.model.FilterOperator.EQ, sn)];
oModel.read('/ServicePrice',{
filters:servicename,
success:function(oData,oResponse){
console.log(oData)
iprice="";
iprice = oData.results[0].PRICE;
}
})

/********************************************-----*************************/
this._selectedItems(aItems);
},

onDelete: function (oEvent) {
var oItem = oEvent.getParameter("listItem");
//delete item from combo box
var sKey = oItem.getBindingContext("data").getProperty("key");
var oMC = this.getView().byId("mc");
var aKeys = oMC.getSelectedKeys();
var indexKey = aKeys.indexOf(sKey);
aKeys.splice(indexKey, 1);
oMC.setSelectedKeys(aKeys);

var aItems = oMC.getSelectedItems();
this._selectedItems(aItems);
},

Now I'm passing some dummy values for the 'rate' field. I need to dynamically load it from odata service and bind it to the table. And also if I enter the quantity is it possible to multiply the quantity and rate and update the rate again? Can someone help me with this?

Regards,

Ramya

screen1.png (57.0 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Aug 06, 2018 at 11:29 AM

    Hi ..

    First instead of binding model to both controls differently you can bind only one model to whole view .

    /////// Remove this ////////

    this.getView().byId("mc").setModel(oJsonModel, "data");

    this.getView().byId("idhusbservTabel1").setModel(oJsonModel, "data");

    ///// Replace with this//////

    this.getView().setModel(oJsonModel, "data");

    this.getView().bindElement("data>/");

    Second just update the data of the model ..

    //// Remove ////

    this.getView().byId("idhusbservTabel1").getModel("data").setProperty("/selectedSet", aSelected); /

    this code says that you are binding the multicombo box data to the table .. is that the requirement ?? if yes than update like below

    /// Add ////

    var data = this.getView().getModel("data").getData();

    data.selectedSet = aItems;

    this.getView().getModel("data").setData(data);

    this.getView().getModel("data").refresh();

    Add comment
    10|10000 characters needed characters exceeded

    • This is the best way you can handle your scenario .. May this help you ..

      onInit:function(){ // binding of the selectedItem Association of multiCombo Box and the table items needs to be same

      }

      Change event of sap.ui.model.Binding will help you to fill the rate for a particular entry : https://sapui5.hana.ondemand.com/#/api/sap.ui.model.Binding/events/change

      changeTableBinding:function(){ // check if the rate is not filled for a particular item call the service and update the rate // you need to loop through the model data and check which rate is empty and call accordingly }

      Can you check this works for you ..