get data of a nestet JSONModel into a sap.m.table

Question

i'm trying to display a table (sap.m.table) with 2 columns (Roles, User). the table get its data from a JSONModel model:

{
"roles":[  
  {  
     "id":1,
     "name":"Administrator",
     "permissions":[  
        {  
           "id":1,
           "permissionUtilPermission":"CREATE_USER",
           "description":"Create User",
           "name":"Create User"
        }
     ],
     "user":[  
        {  
           "loginName":"admin1",
           "firstName":"John",
           "lastName":"Doe",
           "id":1,
           "active":true
        },
        {  
           "loginName":"admin2",
           "firstName":"Carmen",
           "lastName":"Stiffler",
           "id":2,
           "active":true
        }
        .........
     ]
  },
  {  
     "id":2,
     "name":"User",
     "permissions":[  

     ],
     "user":[  
        {  
           "loginName":"user1",
           "firstName":"Carlos",
           "lastName":"Mayer",
           "id":3,
           "active":true
        },
        {  
           "loginName":"user2",
           "firstName":"Jonny",
           "lastName":"Jefferson",
           "id":4,
           "active":true
        }, 
        .......
     ]
  }
]
}

in the view i create the table with 2 columns and a ColumnListItem as template. this template contains a sap.m.Text and a sap.m.FlexBox which have a sap.m.Button as item.

In the first column should be displayed the 'name' of the 'roles'. In the second column should be displayed the FlexBox within Buttons and the text of these buttons should be the names ('loginName') of the roles user

view:

var oTable = new sap.m.Table('mRoleTable', {
            width: '75%',
            columns: [new sap.m.Column('', {
                            header: new sap.ui.commons.Label({
                                text: '{i18n>admin.RoleTableHeaderRole}'
                                })
                            }), 
                        new sap.m.Column('', {
                            header: new sap.ui.commons.Label({
                                text: '{i18n>admin.RoleTableHeaderUser}'
                            })
                        })],
            items: new sap.m.ColumnListItem('oRolesItemTemplateId', {
                cells: [new sap.m.Text('item1Id', {
                            text: '{name}'
                            }), 
                        new sap.m.FlexBox('item2Id', {
                            items: new sap.m.Button('userBtnId', {
                                text: '{user}'
                            }),
                })]
            })
        });

the onInit function of the controller instantiates a new JSONModel and load the data from the json file. after that the model is set to the table and the items are bind to '/roles'

controller:

onInit: function() {
var oView = this.getView();
var oController = this;
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData('../model/rolemanagement.json');

oModel.attachRequestCompleted(oModel, function(e) {
    if (e.getParameters().success) {
        console.log('loading successful...');

        sap.ui.getCore().setModel(oModel);

        var oMTable = sap.ui.getCore().byId('mRoleTable');
        oMTable.setModel(oModel);

        var oRolesItemTemplate = sap.ui.getCore().byId('oRolesItemTemplateId');
        oMTable.bindAggregation("items", "/roles", oRolesItemTemplate);
    } else {
        console.log('. . . LOADING ERROR');
        console.log(e.getParameters().errorobject.statusText);
    }
});
}

if i try, it only display's a table like this:

   Role                   User
------------------------------------
Administrator        [object Object]
User                 [object Object]

but what i need is a table like this:

   Role                   User
------------------------------------
Administrator        admin1 admin2
User                 user1 user2

here the same table for a better understanding:

   Role                      User
_______________________________________________
 ----------------------------------------------
|                   ------------------------   |<---ColumnListItem
|                  |                        |<-|------FlexBox
|Administrator     |  ---------  --------   |  |
|                  |  | admin1 || admin2 |<-|--|-------- Buttons (text: '/role/user/loginName')   
|                  |  ---------  --------   |  |
|                   ------------------------   |
 ----------------------------------------------
 ----------------------------------------------
|                   ------------------------   |<---ColumnListItem
|                  |                        |<-|------FlexBox
|   User           |  ---------  --------   |  |
|                  |  | user1  || user2  |<-|--|-------- Buttons (text: '/role/user/loginName')   
|                  |  ---------  --------   |  |
|                   ------------------------   |
 ----------------------------------------------

did someone have a solution for my problem?

Bernard Bernard · Accepted Answer · 2015-11-09T17:57:08

The relationship between role and users within that role is one of a parent child. This implies a list within a list. Would you not consider adopting the parent child template that deals with this scenario. You would then select the role and then be presented with the users within that role. Hardcoding {user/0/loginName} instead of {user} would give you the first user (but you probably knew that?) My personal advice would be to adopt a parent child drill down (i.e. implemented through 2 views where the 2nd view is passed the role selected and it displays the users mapped to that role).

Some other minor points (from a best practice perspective) that I have picked up in my reading and coding: use jQuery.sap.log.info( instead of console.log( and... for compatibility purposes going forward the OpenUI team are recommending naming models i.e. oMTable.setModel(oModel, "roles") . This will mean adjusting the bindings to include the named model reference {roles>....}. (Just in case this mattered to you - refer to the API documentation for details.)

get data of a nestet JSONModel into a sap.m.table

2 Answers