Binding and relationships in OpenUI5

Question

Currently, I am trying to build an interface in OpenUI5, which is supposed to allow managing relationships. The whole application connects to the backend via oData.

Consider the following example: Two entities, "Group" and "Person". Each Group may consist of a number of Persons ("members"). What I'd like to do is to list all the Groups in a table - and for each groups members, I'd like to present a MultiComboBox to select the Persons associated with the group, like so:

enter image description here

Setting up the views is easy, but I have some trouble regarding the bindings. Binding a collection (like "Groups") to a table and binding properties (like "name") to an item is no problem of course, but I have no clue how to bind a collection - which is a child of another collection - to a nested list so to speak.

I don't even know if it is possible at all, especially since I want not only the Persons currently affiliated with a group to show up in the combo box, but all others as well to be able to select them. And of course, I want changes made in the interface to apply to the model as well...

Any hint towards a way to achieve the described functionality is much appreciated!

Sunil B N Sunil B N · Accepted Answer · 2015-05-07T14:32:01

Two different models are binded to the Table.. YOu can have Groups and Members as entities with navigation property as members you can play around here

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		
		<title>Mobile App in 23 Seconds Example</title>
		
		<script  src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
			id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m" 
			data-sap-ui-theme="sap_bluecrystal"></script>
			<!-- only load the mobile lib "sap.m" and the Blue Crystal theme -->
		
		
		<script type="text/javascript">
			
			var sampleData = {
    "Groups": [
        {
            "GroupId": "D1",
            "GroupName": "Developers",
            "Members": []
     },
        {
            "GroupId": "D2",
            "GroupName": "GreenDay",
            "Members": []
     },
        {
            "GroupId": "D3",
            "GroupName": "BackStreet Boys",
            "Members": []
     },
        {
            "GroupId": "D4",
            "GroupName": "Managers",
            "Members": []
     }
     ]
};
var oModel = new sap.ui.model.json.JSONModel(sampleData);
var aData = [
    {
        key: "A",
        text: "John"
    },
    {
        key: "B",
        text: "Sachin"
    },
    {
        key: "C",
        text: "Dravid"
    },
    {
        key: "D",
        text: "David"
    },
    {
        key: "E",
        text: "Sunil"
    },
    {
        key: "F",
        text: "Ronald"
    },
    {
        key: "G",
        text: "Albert"
    }
   ];

var oMulti = new sap.m.MultiComboBox({
    selectionChange: function (oEvent) {
        //change your group data?
    }
});

oMulti.setModel(new sap.ui.model.json.JSONModel(aData));
var oTemplate = new sap.ui.core.Item({
    key: "{key}",
    text: "{text}",
    customData: new sap.ui.core.CustomData({
        key: "{GroupId}",
        value: "{GroupName}"
    })
});
oMulti.bindItems("/", oTemplate);

//Build Table
var oTable = new sap.m.Table({
    columns: [
    new sap.m.Column({
            width: "150px",
            header: new sap.m.Label({
                text: "Group Name"
            })
        }),
    new sap.m.Column({
            header: new sap.m.Label({
                text: "Members"
            })
        })
   ]
}).placeAt("content");
var oTemplate = new sap.m.ColumnListItem({
    cells: [
     new sap.m.Label({
            text: "{GroupName}"
        }),
     oMulti
    ],
    press: function (oEvent) {
        alert(oEvent.getSource().getBindingContext());
    }
});

oTable.setModel(oModel);
oTable.bindItems("/Groups", oTemplate);
			
		</script>
		
	</head>
	<body class="sapUiBody">
		<div id="content"></div>
	</body>
</html>

Binding and relationships in OpenUI5

1 Answers