get data of a nestet JSONModel into a sap.m.table - model-binding

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?

Answer 1

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.)

Answer 2

now i got a solution which works fine:
controller:
var oView = this.getView();
var oController = this;
//load data for roles
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData('../model/rolemanagement.json');
oModel.attachRequestCompleted(oModel, function(e) {
if (e.getParameters().success) {
jQuery.sap.log.info('loading roles model successful...');
sap.ui.getCore().setModel(oModel);
var oMTable = sap.ui.getCore().byId('mRoleTable');
oMTable.setModel(oModel);
} else {
jQuery.sap.log.info('. . . LOADING ERROR');
jQuery.sap.log.info(e.getParameters().errorobject.statusText);
}
});
view:
new sap.m.Table('mRoleTable',{
width: '75%',
columns: [
new sap.m.Column({width: '25%', header: new sap.m.Label({text: "Role"})}),
new sap.m.Column({ header: new sap.m.Label({text: "User"})}),
],
items: {
path: "/",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({ text: "{roleName}" }),
new sap.ui.layout.Grid({
content: {
path: 'users',
template: new sap.m.Button('tmpBtn',{
text: '{loginName}',
type: 'Transparent',
layoutData: new sap.ui.layout.GridData({
span: "L2 M4 S5"
})
})
}
})
]
})
}
})