Skip to Content
0

How to binding “complex” json in Table - SAPUI5

Dec 21, 2016 at 12:48 AM

55

avatar image
Former Member

I have the following JSON:

[ { Hour:"01:00:00", 
   Name: "Den", 
   Agent:[ 
    {Slot : 1,Enabled : 1}, 
    {Slot : 2,Enabled : 1}, 
    {Slot : 3,Enabled : 1}, 
    {Slot : 4,Enabled : 1}, 
    {Slot : 5,Enabled : 1}, 
    {Slot : 6,Enabled : 1}, 
    {Slot : 7,Enabled : 1},
    {Slot : 8,Enabled : 1}, 
    {Slot : 9,Enabled : 1} 
   ] 
}]...

I need to create a table that lists the "Hour" in a column and the other columns list them with the object "Agent"

Example :

________________________________________________________
| Hour     | Slot 1 | Slot 2 | Slot 3 | Slot 4 | Slot 5 |
---------------------------------------------------------
| 10:00:00 | 1      | 2      | 3      | 4      | 5      |...

Create a table but only load the time and the complete "Agent" object:

Table:

 oTable.addColumn(new sap.ui.table.Column({
                  label: new sap.ui.commons.Label({text: "Hour"}),
                  template: new sap.ui.commons.TextView({text: "{Hour}"}),
                  width : '125px'
              })
          );
    for(var i; i < 9; i++){
           oTable.addColumn(
                        new sap.ui.table.Column({
                          label: new sap.ui.commons.Label({text: "Slot "+i}),
                          template: new sap.ui.core.Icon({
                          src: { 
                                path : "Agent/", 
                                       formatter: function(v) { 
                                          if (v != null) {
                                              if(v.Enabled == 1){
                                                return "sap-icon://save"; 
                                              }else{
                                                return "sap-icon://future";
                                              }
                                          }
                                        }
                          },
                          size: "20px",
                        color: { 
                            path : "Agent/", 
                                 formatter: function(v) { 
                                  if (v != null) {
                                      if(v.Enabled== 1){
                                         this.attachEvent("press",function(oEvent)          {Alert("green")})
                                         return v.Slot != -1 ? "#f08e00" : "green" 
                                      }else{
                                         this.attachEvent("press",function(oEvent) {Alert("#bfbfbf")})
                                         return "#bfbfbf"
                                      } 
        
                                  }
                            }
                        },
                        hoverColor: "black",
                        activeColor: "black",
                        width : "100%",
                      }),
                          width: "70px"
                    })
                    );  
                }
         }


Any idea how to do it? It occurred to me to put the "i" as "Agent / i", it works, but when the table enables the "Scroll" it returns to render the rows and of disorder the events by icons :/

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers