Mapping array of arrays to sap.m.Table control

Question

I have my data as following:

{
    meta: {
              format: "csv",
              info: "desc",
              columns: [
              {
                  id: "Name",
                  type: "Text",
                  length: 32          
              }, 
              {
                  id: "Text",
                  type: "Text",
                  length: 128
              }]
          },
    rows: [
              ["John","xxxx"],
              ["Alpha","yyyy"],
              ["Beta","wwww"],
              ["Gamma","zzzz"]]
}

Now, I am struggling to map the records to a sap.m.Table control as Columns and Rows. Column seems straight forward, straight map, but the rows are array of arrays structure. Is there a way to bind this structure which is not an array of objects?

This is a duplicate of stackoverflow.com/questions/40793535/…. What is the problem? Is the solution provided not sufficient? — matbtt
– matbtt, Commented Nov 25, 2016 at 12:26
@matbtt Its not exactly a duplicate. Instead of editing the question, which has a perfect answer already, I thought of clarifying my problem exactly, as I did it in the comment of that question. This one is more of a SAPUI5/OPENUI5 oriented problem than a JS solution. — axiomtheorem
– axiomtheorem, Commented Nov 25, 2016 at 14:12
If you got a perfect answer you should accept it. Then anybody can see that and the answerer earns reputation. — matbtt
– matbtt, Commented Nov 25, 2016 at 15:05

matbtt · Accepted Answer · 2016-11-25 18:46:56Z

2

Obviously it is possible to create a property binding if you use the array index instead of a property name.

<List id="list" items="{/rows}>
   <columns>
       <Column>
           <Label text="{/meta/columns/0/id}"/>
       </Column>
       <Column>
           <Label text="{/meta/columns/1/id}"/>
       </Column>
   </columns>
   <items>
       <ColumnListItem>
           <cells>
               <Text text="{0}"/>
               <Text text="{1}"/>
            </cells>
        </ColumnListItem>   
   </items>
</List>

Dynamically you can do the binding as follows in the controller. It should be easy to adapt to your use case:

var list = this.byId("list");

list.bindAggregation("columns", {
    "path" : "/meta/columns",
    "template" : new sap.m.Column({ 
        "header" : new sap.m.Label({ 
            "text" : "{name}" 
        })
    })
});

list.bindAggregation("items", {
    "path" : "/rows",
    "template" : new sap.m.ColumnListItem({
        "cells" : [
            new sap.m.Text({ "text" : "{0}" }), 
            new sap.m.Text({ "text" : "{1}" })
        ]})
});

The list must not contain any binding information.

<List id="list"/>

If you need more control over the binding process you can use factory functions instead of templates.

list.bindAggregation("columns", {
    "path" : "/meta/columns",
    "factory" : function(id, context) {
        return new sap.m.Column({ 
            "header" : new sap.m.Label({ 
                "text" : "{name}" 
            })
        });
     }
});

edited Nov 25, 2016 at 18:46

answered Nov 25, 2016 at 15:04

matbtt

4,20622 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

axiomtheorem Over a year ago

Thanks for the reply but the issue I am not able to get around here is number of columns will be dynamic. Is there a way to dynamically bind the columns as well?

matbtt Over a year ago

Not in a declaritive way. If you want that you need to code that.

axiomtheorem Over a year ago

Exactly. I am not getting any ideas to bind columns dynamically and then reference the same in rows. I see elsewhere people mention formatter but I am new to this UI5 framework and not much resources to follow either. I was able to achieve similar results in ui.Table by using the solution in my 1st question but m.Table is completely different I see.

axiomtheorem Over a year ago

Many thanks. Highly appreciate your help. You are a life saver. By the time I saw your edit I had already written the column binding. See I'm learning fast :). One small thing though - the cells needs to be dynamic per number of columns, shouldn't they? Can I keep a count of columns we are creating to be able to loop somehow.

matbtt Over a year ago

You can pass a factory function instead of template. I updated the answer.

|

Collectives™ on Stack Overflow

Mapping array of arrays to sap.m.Table control

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related