Conditional data binding?

542 Views

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 bindingoTable.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 modelvar oModel = new sap.ui.model.json.JSONModel();//set model with a new root elementoModel.setData(contacts);//bind model to tableoTable.setModel(oModel);//bind table to the root element in the modeloTable.bindRows("modelData");oTable.placeAt("dataTable");//list test 1var 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>