Hi,
As part of my blog on sapui5 vs phonegap, I wanted to do data binding between phonegap exposed api and a sapui5 table view.
I looked at the contacts api, for which Phonegap returns the data in JSON format in a similar structure as the test case below.
var contacts = { modelData: [ { displayName:"Dagfinn Parnas", nickname:"Dagi", phoneNumbers: [ {type:"mobile", number:"9364xxxx"}, {type:"home", number:"5165xxxx"}, ], }, { displayName:"John Doe", nickname:"Doh", phoneNumbers: [ {type:"mobile", number:"952xxxxx"}, {type:"other", number:"5165xxxx"}, ], }, { displayName:"Jane Doe", nickname:"Doh", phoneNumbers: [ {type:"mobile", number:"12hxxxxx"}, ], }, ]
};
As you can see, each contact has an array of phone numbers with varying type.
What I wanted to do is to bind the phoneNumbers which has type "mobile" to one sap.ui.table.Column, and those with type "home" to another one.
Unfortunately, I was not able to do this.
Is it possible to achieve it with sapui5 beta?
The closest I came is this test case.
It bind the first number to the first column and the second number to the second column.
<html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>sapui5 databinding</title> <script src="/sapui5/resources/sap-ui-core.js" type="text/javascript" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection"> </script><script>
jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['DEBUG']);
var contacts = { modelData: [ { displayName:"Dagfinn Parnas", nickname:"Dagi", phoneNumbers: [ {type:"mobile", number:"9364xxxx"}, {type:"home", number:"5165xxxx"}, ], }, { displayName:"John Doe", nickname:"Doh", phoneNumbers: [ {type:"mobile", number:"952xxxxx"}, {type:"other", number:"5165xxxx"}, ], }, { displayName:"Jane Doe", nickname:"Doh", phoneNumbers: [ {type:"mobile", number:"12hxxxxx"}, ], }, ]
};
var oTable = new sap.ui.table.DataTable();
//two columns with simple binding
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Name1"}), template: new sap.ui.commons.TextView().bindProperty("text", "displayName"), sortProperty: "displayName"
}));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Name2"}), template: new sap.ui.commons.TextView().bindProperty("text", "nickname"), sortProperty: "nickname",
}));
var oTVNumber1 = new sap.ui.commons.TextView();
oTVNumber1.bindProperty("text","phoneNumbers/0/number");
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Number1"}), template:oTVNumber1, sortProperty: "id",
}));
var oTVNumber2 = new sap.ui.commons.TextView();
oTVNumber2.bindProperty("text","phoneNumbers/1/number");
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Number2"}), template:oTVNumber2, sortProperty: "id",
}));
var oItemTemplate2 = new sap.ui.core.ListItem();
oItemTemplate2.bindProperty("text", "type").bindProperty("additionalText", "number");
var oListTemplate = new sap.ui.commons.ListBox("myLb3", {displaySecondaryValues:true, height:"200px"});
oListTemplate.bindAggregation("items", "phoneNumbers", oItemTemplate2);
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Phone"}), //template: new sap.ui.commons.ComboBox().bindItems("phoneNumbers", oListItemTemplate), template:oListTemplate, sortProperty: "id",
}));
//create model
var oModel = new sap.ui.model.json.JSONModel();
//set model with a new root element
oModel.setData(contacts);
//bind model to table
oTable.setModel(oModel);
//bind table to the root element in the model
oTable.bindRows("modelData");
oTable.placeAt("dataTable");
//list test 1
var oLB = new sap.ui.commons.ListBox("myLb", {displaySecondaryValues:true, height:"200px"});
oLB.setModel(oModel);
oLB.bindContext("/modelData/1");
var oItemTemplate = new sap.ui.core.ListItem();
oItemTemplate.bindProperty("text", "type").bindProperty("additionalText", "number");
oLB.bindAggregation("items", "phoneNumbers", oItemTemplate);
oLB.placeAt("list1");
//TextView test</script></head><body class="sapUiBody"> <h1>sapui5 databinding</h1> <div id="dataTable"></div> <div id="singleproperty"></div> <div id="list1"></div> <div id="list2"></div></body></html>