Skip to Content
-1

SAP UI5 - Multiple tables Binding in the same view

Feb 01, 2017 at 04:08 AM

507

avatar image

Hello Experts,

I'm developing an app which contains two tables in the same view, assume header list table and item list table, when user clicks on header table row, item list will be populated based on selection on header.

I'm able to bind the header list, but not item list when click on the row, can you pls help how to bind item list when user clicks on header table row.

This is the code of the View

Entity Sets BU_PARTNERSet and BP_AddressSet belong to same OData service

createContent : function(oController) {		
//Create header Table
		var oTable = new sap.ui.table.Table('TB1', {
			title:'Header List',
			selectionBehavior :sap.ui.table.SelectionBehavior.Row,
			cellClick: function(oEvent){oController.getTaskDetail(oEvent)}
		});
		
        //Create table column
		var oColPartner = new sap.ui.table.Column();
		oColPartner.setLabel('Business Partner');
		
		var oTextPartner = new sap.m.Text();
		oTextPartner.bindProperty('text', {path:'Partner'});
	    oColPartner.setTemplate(oTextPartner);
	    oTable.addColumn(oColPartner);
	    
        //Create table column
		var oColType = new sap.ui.table.Column();
		oColType.setLabel('Business Type');
		
		var oTextType = new sap.m.Text();
		oTextType.bindProperty('text', {path:'Type'});
	    oColType.setTemplate(oTextType);
	    oTable.addColumn(oColType);
	     	  
	  //Assign model
	  oTable.placeAt('content'); 
	  
//Create Item table
	  var oTableItem = new sap.ui.table.Table('TB2', {
		  title:'Items Details',
		  visibleRowCount: 3,
		  selectionMode: sap.ui.table.SelectionMode.Single
	  });
	  
//Add column
	  oTableItem.addColumn(new sap.ui.table.Column({
		  label: new sap.ui.commons.Label({text: 'Business Partner'}),
		  template: new sap.ui.commons.TextView({text:"{Partner}"})	  
	  }));
	  
	  oTableItem.addColumn(new sap.ui.table.Column({
		  label: new sap.ui.commons.Label({text: 'Address Number'}),
		  template: new sap.ui.commons.TextView({text:"{Addrnumber}"})
	  }));
	  
//Assign Model
	  oTableItem.placeAt('content');

This is the code of the controller

     onInit: function() {
    	 
    	//create URL
 		var ourl = /sap/opu/odata/sap/ZBU_PARTNER_SRV/';
		//Create OData model
		var oModel = new sap.ui.model.odata.ODataModel(ourl,{json:'true'});
		//get Table
		var xcore  = sap.ui.getCore();
		var oTable = xcore.byId('TB1');
		//Set OData Model
		oTable.setModel(oModel);
		
		//Bind Rows
		oTable.bindRows('/BU_PARTNERSet');
}

***************Event*********************************************

	//get Task detail
	getTaskDetail: function(oEvent){

    	//create URL
 		var ourl = 'sap/opu/odata/sap/ZBU_PARTNER_SRV/';
		//Create OData model
        var oModelItem = new sap.ui.model.odata.ODataModel(ourl,{json:'true'});
		//Read Cell Row data
		var context = oEvent.getParameters().rowBindingContext;
		//Read partner Key value
		oPartner = context.getObject('Partner')
		
		//get Table
		var xcore  = sap.ui.getCore();
		var oTableItem = xcore.byId('TB2');
					
		//Set filter
		var ofilter = new sap.ui.model.Filter({
			path:'Partner',
			operator:sap.ui.model.FilterOperator.EQ,
			value1:oPartner
		});
		
	oTableItem.bindRows({path:'/BP_AddressSet',filters:[ofilter]});
10 |10000 characters needed characters left characters exceeded
Former Member

Can i see the sample of your oData? That would help me to debug better.

I guess we can do the filtering in the oData service rather than applying filters on client side.

Did you debug to see what is the value of oPartner in "oPartner =context.getObject('Partner')"?

Please share the sample data.

0
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
VIPLOVE KHUSHALANI Feb 01, 2017 at 09:10 AM
0

Hi Ramakrishna ,

In the listItem table you are not setting the model , you are directly binding the rows .

oTableItem.setModel(oModelItem); //missing in your code

thanks

Viplove

Show 5 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Viplove,

Just my thought. Though your approach works, doesn't it make the create model call in getTaskDetail redundant?

My understanding is every time getTaskDetails is called, we are going to make oData service request which we can avoid.

Thanks,
Murali L

1

Hi Murali,

How can I remove redundant model here? a I following the correct way of codinng?

I used your code this.getView().setModel(oModel); but it's not working.

//set View
this.getView().setModel(oModel);
    onInit: function() {
    	 
    	//create URL
 		var ourl = '/sap/opu/odata/sap/ZBU_PARTNER_SRV/';
		//Create OData model
		var oModel = new sap.ui.model.odata.ODataModel(ourl,{json:'true'});

	//get Task detail
	getTaskDetail: function(oEvent){

		//Read Cell Row data
		var context = oEvent.getParameters().rowBindingContext;
		//Read partner Key value
		oPartner = context.getObject('Partner')
		
		//get Table
		var xcore  = sap.ui.getCore();
		var oTableItem = xcore.byId('TB2');
						
		//Set filter
		var ofilter = new sap.ui.model.Filter({
			path:'Partner',
			operator:sap.ui.model.FilterOperator.EQ,
			value1:oPartner
		});
		
		//set View
		this.getView().setModel(oModel);
		oTableItem.bindRows({path:'/BP_AddressSet',filters:[ofilter]});

0
Former Member
Ramakrishna Thoodi

Hi Ramakrishna,

We should be binding the model at view level or app level in onInit method as onInit() is going to be called only once and getTaskDetail() will be invoked for every click.

Also, when we have the model set at the view level, we can avoid calling oData service again in getTaskDetail() method.

Here is the complete code for your reference

onInit: function() {
	// create Model
	var ourl = '/sap/opu/odata/sap/ZBU_PARTNER_SRV/';
	var oModel = new sap.ui.model.odata.ODataModel(ourl, {
		json: 'true'
	});
	
// Set Model at the View Level this.getView().setModel(oModel); // Get Table var xcore = sap.ui.getCore(); var oTable = xcore.byId('TB1'); oTable.setModel(this.getView().getModel()); // Model from view //Bind Rows oTable.bindRows('/BU_PARTNERSet'); }, //get Task detail getTaskDetail: function(oEvent) { //Read Cell Row data var context = oEvent.getParameters().rowBindingContext; //Read partner Key value var oPartner = context.getObject('Partner'); //get Table var xcore = sap.ui.getCore(); var oTableItem = xcore.byId('TB2'); oTableItem.setModel(this.getView().getModel()); //Set filter var ofilter = new sap.ui.model.Filter({ path: 'Partner', operator: sap.ui.model.FilterOperator.EQ, value1: oPartner }); oTableItem.bindRows({ path: '/BP_AddressSet', filters:[ofilter] }); }

Please try this.

Here is the hierarchy of Model scope.

1. Control level

  • Only the current control can access this model

2. View Level

  • All controls in the same view can access this model.

3. App Level

  • Entire application can access this model
  • From inside a controller, you can set - sap.ui.getCore().setModel(yourModel)
  • If you have Component.js, you can specify your services in your manifest.json and your model will be available for your entire app.

Thanks,

Murali L

0

Thanks Murali:-)

0

Hi Viplove,

Thanks for your reply.

It's working now.

0
avatar image
Former Member Feb 01, 2017 at 07:14 AM
0

Try this approach.

  • in Controller init: Attach your model at view level rather than at table control level
//create URL
var ourl = 'sap/opu/odata/sap/ZBU_PARTNER_SRV/';
//Create OData model
var oModelItem = new sap.ui.model.odata.ODataModel(ourl, {
		json: 'true'
});

//set View
this.getView().setModel(oModel);
Share
10 |10000 characters needed characters left characters exceeded