2

I have an object and I am binding it to my table, but however normally, as I see everywhere the binding is working like ; you bind your things to the columns.

Could I somehow change it to be bound to Rows ?

What I know I can do and always used to do is ;

In my View :

    var vergleichTable1 = new sap.m.Table(this.createId("vergleichTable1"), {

        columns: [
            new sap.m.Column({
                header: new sap.m.Label({
                    text: "Header Text 1"
                })
            }),
            new sap.m.Column({
                header: new sap.m.Label({
                    text: "Header Text 2"
                })
            }),
            new sap.m.Column({
                header: new sap.m.Label({
                    text: "Header Text 3"
                })
            }),
        ]
    }).addStyleClass("vergleichTable1");

and I was adding sth. like this into my Controller ;

        var oTemplate1 = new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text:  "{KEYNAME}"
                }),
                new sap.m.Text({
                    text:  "{KEYNAME}"
                }),
                new sap.m.Text({
                    text:  "{KEYNAME}"
                })
            ]
        });

and for conencting :

this.byId("vergleichTable1").setModel(mymodel).bindItems("/foo/0", oTemplate1);

However as I mentioned i need something different . I want to bind it not to columns but to rows, there is no information about it in the ui5 API.

Here is something to make it more understandable what I need

enter image description here

And I want to have as much as columns as my object keys.length

How can I do this ?

2
  • hi Atlas, have you resolved your issue ? Nov 20, 2017 at 13:14
  • I didn't try it yet, I will try it when I go to work again ( next monday)
    – Atlas
    Nov 20, 2017 at 14:09

2 Answers 2

1

If I've understood the problem, below is the result you want:(please notify if not so I can correct/delete my answer). Best if you can paste your sample data.

First: Data:

var selProps = [
        "Prop1", "Prop2", "Prop3" // Selected Properties stored in an array
    ];
    var data = [ // Data, data, data ( with all properties)
        {
            phone:"Moto G",
            "Prop1": "Prop1-1",
            "Prop2" :"Prop1-2",
            "Prop3": "Prop1-3",
            "Prop4" :"Prop1-4"
        },
        {
            phone:"Moto X",
            "Prop1": "Prop2-1",
            "Prop2" :"Prop2-2",
            "Prop3": "Prop2-3",
            "Prop4" :"Prop2-4"
        },
        {
            phone:"iPhone",
            "Prop1": "Prop3-1",
            "Prop2" :"Prop3-2",
            "Prop3": "Prop3-3",
            "Prop4" :"Prop3-4"
        },
        {
            phone:"G Pixel 2",
            "Prop1": "Prop4-1",
            "Prop2" :"Prop4-2",
            "Prop3": "Prop4-3",
            "Prop4" :"Prop4-4"
        }

    ];

Output :

enter image description here

Code: View:

var oTable =  new sap.m.Table();
    var oColTemplate = new sap.m.Column({
        header: new sap.m.Text({
            text: "{phone}"
        })
    });
    oTable.bindAggregation("columns", "/data", oColTemplate);



    oTable.bindItems("/selProps", function(sId, oContext) {
        var aCells = [];
        var oModel = oContext.getModel();
        var aCols = oModel.getProperty("/data"); // Fetch No of columns. Create that many Texts.
        for (var index = 0 ;index < aCols.length; index++) {
            // data will be stored in : /data/index/selected Property(present in oContext)

             var oText = new sap.m.Text({
                 text : "{/data/" + index + "/" + oContext.getProperty() +"}"
             });
             aCells.push(oText);
        }

        return new sap.m.ColumnListItem({
            cells: aCells
        });
    }.bind(oTable));

    return new sap.m.Page({
        title: "Title",
        content: [
            oTable
        ]
    });

Controller :

onInit: function() {

    var selProps = [
        "Prop1", "Prop2", "Prop3" // Selected Properties stored in an array
    ];
    var data = [ // Data, data, data ( with all properties)
        {
            phone:"Moto G",
            "Prop1": "Prop1-1",
            "Prop2" :"Prop1-2",
            "Prop3": "Prop1-3",
            "Prop4" :"Prop1-4"
        },
        {
            phone:"Moto X",
            "Prop1": "Prop2-1",
            "Prop2" :"Prop2-2",
            "Prop3": "Prop2-3",
            "Prop4" :"Prop2-4"
        },
        {
            phone:"iPhone",
            "Prop1": "Prop3-1",
            "Prop2" :"Prop3-2",
            "Prop3": "Prop3-3",
            "Prop4" :"Prop3-4"
        },
        {
            phone:"G Pixel 2",
            "Prop1": "Prop4-1",
            "Prop2" :"Prop4-2",
            "Prop3": "Prop4-3",
            "Prop4" :"Prop4-4"
        }

    ];

    var oModel =  new sap.ui.model.json.JSONModel({data: data, selProps: selProps});
    this.getView().setModel(oModel);
},

Read more about Factory Functions : Factory Functions


Update: To show empty column and row.

Step 1: To Add empty Column :

Now, in above example we bind of columns directly to the data present. This will change as extra columns( at the start) has to be added.

So, paste this where the data is read ( in my Example below setting of manual JSON Data). Remember this has to be done every time new data is read:

new INIT function :

onInit: function() {

    var selProps = [
        ...// same as above: To reduce post length
    ];
    var data = [ ...// same as above: To reduce post length];

    var oModel =  new sap.ui.model.json.JSONModel({data: data, selProps: selProps});
    this.getView().setModel(oModel);

    this.fnBindColumns(); // Call function to create columns

},

fnBindColumns : function() {
    var oTable = this.byId('idTable');
    var aData = this.getView().getModel().getProperty("/data");


    var oPropCol = new sap.m.Column({
            header: new sap.m.Text({
            text: ""
        })
    });

    oTable.addColumn(oPropCol);

    for(var i = 0; i <aData.length ; i++ ) {
        var oCol = new sap.m.Column({
            header: new sap.m.Text({
                text : "{/data/" + i + "/phone}"
            })
        });
        oTable.addColumn(oCol);
    }
}

Step 2: Add property Row. This forces change to our factory function. So, in create content of our JS view:

    var oTable =  new sap.m.Table({
        id: this.createId("idTable") // Look Id added
    });

    oTable.bindItems("/selProps", function(sId, oContext) {
        var aCells = [];
        var oModel = oContext.getModel();
        var aCols = oModel.getProperty("/data");
        for (var index = 0 ;index < aCols.length + 1; index++) { // length = no of mobile phones + 1 ( +1 for extra property row).
            if (index == 0) { // add the property Text if first column
                var oText = new sap.m.Text({
                     text : oContext.getProperty()
                 });
            } else {
                var oText = new sap.m.Text({
                     text : "{/data/" + (index-1) + "/" + oContext.getProperty() +"}" // bind the text via absolute path.
                });
            }

             aCells.push(oText);
        }

        return new sap.m.ColumnListItem({
            cells: aCells
        });
    }.bind(oTable));

New Table:

enter image description here

Hope this helps.

3
  • Thanks a lot, but could you tell me how can I add an empty column to the left top corner , and also show key names (only key names like , Prop1 - Prop2 etc.). I already upvoted the answer and will accept it too if you can figure out this aswell
    – Atlas
    Nov 27, 2017 at 12:40
  • 1
    @Atlas: added asked info Nov 27, 2017 at 15:11
  • I'm glad it helped you :) Nov 30, 2017 at 9:03
0

The problem can be solved in View using CSS only. This is an example.

var data = [{ //data is the king
    name: 'My first property',
    description: 'First property description',
    phone: '555-123-4567',
    location: 'Beverly Hills, CA'
  },
  {
    name: 'My second property',
    description: 'Second property description',
    phone: '555-123-4568',
    location: 'Denver, CO'
  },
  {
    name: 'My third property',
    description: 'Third property description',
    phone: '555-123-4569',
    location: 'Tampa, FL'
  }
];

function createTable() {
  var container = document.getElementById('container');
  container.innerHTML = '';
  var keys = Object.keys(data[0]); //expect the same schema for all elements
  var tbl = document.createElement('div');
  tbl.className = 'col-tbl';
  container.appendChild(tbl);
  var row = document.createElement('div');
  tbl.appendChild(row);
  for (var i = 0, key; key = keys[i]; ++i) {
    var td = document.createElement('div');
    td.className = 'bold';
    td.innerHTML = key;
    row.appendChild(td);
  }
  for (var j = 0, dat; dat = data[j]; ++j) {
    row = document.createElement('div');
    tbl.appendChild(row);
    for (i = 0, key; key = keys[i]; ++i) {
      td = document.createElement('div');
      td.innerHTML = dat[key];
      row.appendChild(td);
    }
  }
}

function switchColRow() {
  var tbl = document.getElementById('container').firstElementChild;
  tbl.className = tbl.className == 'col-tbl' ? 'row-tbl' : 'col-tbl';
}
.col-tbl {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.col-tbl>div {
  display: flex;
  flex-direction: row;
  width: 100%
}

.col-tbl>div>div {
  width: 50%;
  border: solid 1px #ccc
}

.row-tbl {
  display: flex;
  /*flex-wrap: wrap;*/
  flex-direction: row;
}

.row-tbl>div {
  display: flex;
  flex-direction: column;
}

.row-tbl>div>div {
  width: 100%;
  border: solid 1px #ccc;
  height:30px;
}

.bold {
  font-weight: bold
}
<button type="button" onclick="createTable()">Poulate table</button>
<button type="button" onclick="switchColRow()">Switch Cols / Rows</button>
<div id="container">
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.