Skip to Content
avatar image
Former Member

Conditional data binding?

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>
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Best Answer
    May 23, 2012 at 08:24 AM

    Hi Dagfinn,

    I don't think binding directly to the table is possible, but this seams to be more a Javascript problem.

    You may try to extend the model data on the fly, something like this (haven't tested yet, but you see, what I mean):

    for data in modelData {     for phoneNumber in phoneNumbers{          data[phoneNumber["type"]] = phoneNumber["number"];     };};

    And then you should be able to bind the new fields modelData.mobile, modelData.home and mobileData.others to the columns. This is more a workaround than a solution, I know.

    Best regards

    @Uwe Fetzer

    Add comment
    10|10000 characters needed characters exceeded

    • Hi DJ,

      Great solutions! Thanks so much for posting it. Now I have a similar case where I need to create a select list with different values for each row. My data looks like this:

      var questions = {"ques" : [

      {

      "Q" : Description ID1,

      "Opt" : [{"Options":Option1},

      {"Options":Option2},

      {"Options":Option3},

      {"Options":Option4}]

      },

      {

      "Q" : Description ID2,

      "Opt" : [{"Options":Option1},

      {"Options":Option2},

      {"Options":Option3},

      {"Options":Option4}]

      },

      {

      "Q" : Description ID3,

      "Opt" : [{"Options":Option1},

      {"Options":Option2},

      {"Options":Option3},

      {"Options":Option4}]

      },

      {

      "Q" : Description ID4,

      "Opt" : [{"Options":Option1},

      {"Options":Option2},

      {"Options":Option3},

      {"Options":Option4}]

      },

      {

      "Q" : Description ID5,

      "Opt" : [{"Options":Option1},

      {"Options":Option2},

      {"Options":Option3},

      {"Options":Option4}]

      }

      ]

      };

      Thanks so much any tips!

      Cheers,

      Ron

  • avatar image
    Former Member
    Feb 18, 2013 at 09:48 AM

    Hi guys,

    I want to pass a single value from Page1 to Page2 in a SAPUI5 Mobile APP. Then on page 2 I want to use this value for some logic implementation. Please guide me how can i pass a single value between 2 pages and then how to access/use this value on the second page.

    Thanks and best regards.

    Fahad

    Add comment
    10|10000 characters needed characters exceeded