SAPUI5 table bindRows

[Former Member]

Hello guys,

I am currently trying to create a table with sapui5 in the Design Studio SDK and bind data from DS to it, but I cant see any values in the created table:

var oTable = new sap.ui.table.Table({
                title: "testtab",
                selectionMode: sap.ui.table.SelectionMode.Single
            });


            var oColumn = new sap.ui.table.Column({
                label: new sap.ui.commons.Label({text: "Currency"}),
                template: new sap.ui.commons.TextField().bindProperty("value", "currency"),
                sortProperty: "currency",
                filterProperty: "currency",
                width: "100px"
            });


            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({dimensions: meta_data.dimensions});

            oTable.bindRows("/dimensions");
            oTable.setModel(oModel);

            oTable.sort(oTable.getColumns()[0]);
            oTable.placeAt(this.$());

My data source is a cube metadata, e.g:

{ dimensions: { key: currency, text: Currency, members: [ { key: 001, text: EUR }, { key: 002, text: USD } ] }

Json above is just an example. (Not the full object)

The problem is that the required values are in the "members" -> How can I bind them correct?

The result should be a table like the one you see when you go on "Edit Initial View".

Best regards,

Adam

[former_member183473 · Accepted solution]

Adam,

Try this code.

1.         var oTable = new sap.ui.table.Table({ 
2.                 title: "testtab", 
3.                 selectionMode: sap.ui.table.SelectionMode.Single 
4.             }); 
5.             
6.                          
7.             var oColumn = new sap.ui.table.Column({ 
8.                 label: new sap.ui.commons.Label({text: "Currency"}), 
9.                 template: new sap.ui.commons.TextField().bindProperty("value", "text"), 
10.                 sortProperty: "text", 
11.                 filterProperty: "text", 
12.                 width: "100px" 
13.             }); 
14.             
15.             var oModel = new sap.ui.model.json.JSONModel(); 
16.             oModel.setData({dimensions: meta_data.dimensions}); 
17.             
18.            
19.             oTable.setModel(oModel);
20.              oTable.bindRows("/members");
21.             oTable.sort(oTable.getColumns()[0]); 
22.             oTable.placeAt(this.$()); 

I think this should do it.

Message was edited by: Leandro Cardoso Hand something wrong in there.. fixed it.

[Former Member · Accepted solution]

I tried a lot, also your solution Leandro, but it doesnt work as I want it to.

Now I will modify the simplecrosstab

[former_member183473 · Accepted solution]

Man.. that will be a lot of manual work, when the UI5 table will do most of the work for you.

Do you get any error when running chrome with the console mode?

Does at least the structure of the table appears?

Try this..

1.                
2.                         
3.             var oColumn = new sap.ui.table.Column({
4.                 label: new sap.ui.commons.Label({text: "Currency"}),
5.                 template: new sap.ui.commons.TextField().bindProperty("value", "text"),
6.                 sortProperty: "text",
7.                 filterProperty: "text",
8.                 width: "100px"
9.             });
10.            var oTable = new sap.ui.table.Table({
11.                 columns: [oColumn],
    
12.                 title: "testtab",
13.                 selectionMode: sap.ui.table.SelectionMode.Single
14.             });
15.            
16.             var oModel = new sap.ui.model.json.JSONModel();
17.             oModel.setData({dimensions: meta_data.dimensions});
18.            
19.           
20.             oTable.setModel(oModel);
21.              oTable.bindRows("/members");
22.             oTable.sort(oTable.getColumns()[0]);
23.             oTable.placeAt(this.$());
24. 
    

Best

Leandro

[Former Member · Accepted solution]

There were no errors in chrome and I also got the structure of the table, with some data( out of the first member )

....

  var oColumn = new sap.ui.table.Column({
          label: new sap.ui.commons.Label({text: value.text}),
          template: new sap.ui.commons.TextField().bindProperty("value", "/members/0/key"),
          sortProperty: "/members/0/key",
          filterProperty: "/members/0/key",
          width: "100px"
      });
  oTable.addColumn(oColumn);

  var oModel = new sap.ui.model.json.JSONModel();


  oModel.setData({dimensions: meta_data.dimensions});
  oTable.setModel(oModel);
  oTable.bindRows("/dimensions");

....

I won't work with sapui5, because you cant use col/rowspan-> but I need it for the results and measures.

So my decision is just to extend the "simplecrosstab" example in the ds_sdk

Regards

Adam