SAPUI5 How to Bind/ Access Second Odata Model in the View level

[former_member556957]

Hi All,

I am using WEBIDE trail version, I have 2 models in my Manifest.json, And I would like to display 2 tables in my View1.js. My first Model is set as default model, and second Model is named as Model2. I am able to access the default model in the View1.js and able to diaply my first table. But when I am trying to access the second model ( Model2 ) data is not getting displayed in the table, But i can see empty rows ( an indication that the records are some how populated But may be i am doing some thing wrong).

Please find my Manifest.Json and also code in the View1.js

{
	"_version": "1.7.0",
	"sap.app": {
		"id": "ZTEST_WITH_MODELS",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"sourceTemplate": {
			"id": "servicecatalog.connectivityComponent",
			"version": "0.0.0"
		},
		"dataSources": {
			"services.xsodata": {
				"uri": "/live4/live4/services.xsodata/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			},
			"Northwind.svc": {
				"uri": "/Odata/V2/Northwind/Northwind.svc/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/Northwind.svc/metadata.xml"
				}
			}
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": ["sap_hcb", "sap_belize"]
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "ZTEST_WITH_MODELS.view.View1",
			"type": "JS"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "ZTEST_WITH_MODELS.i18n.i18n"
				}
			},
			"": {
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneTime",
					"defaultCountMode": "Request"
				},
				"dataSource": "services.xsodata",
				"preload": true
			},
			"Model2": {
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneTime",
					"defaultCountMode": "Request"
				},
				"dataSource": "Northwind.svc",
				"preload": true
			}
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}
}

sap.ui.jsview("ZTEST_WITH_MODELS.view.View1", {


	/** Specifies the Controller belonging to this View. 
	 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	 * @memberOf controller.View1
	 */
	getControllerName: function() {
		return "ZTEST_WITH_MODELS.controller.View1";
	},


	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	 * Since the Controller is given to this method, its event handlers can be attached right away.
	 * @memberOf controller.View1
	 */
	createContent: function(oController) {
/*		
//---------------table1 with default Model--------------------------------
//------------table1 code is commenetd-------------------------
		var oTable = new sap.m.Table("idPrdList", {
			inset: true,
			headerText: "List of Products",
			headerDesign: sap.m.ListHeaderDesign.Standard,
			mode: sap.m.ListMode.None,
			includeItemInSelection: false,
		});


		var col1 = new sap.m.Column("col1", {
			header: new sap.m.Label({
				text: "Product Name"
			})
		});
		oTable.addColumn(col1);


		var col2 = new sap.m.Column("col2", {
			header: new sap.m.Label({
				text: "Description"
			})
		});
		oTable.addColumn(col2);


		var col3 = new sap.m.Column("col3", {
			header: new sap.m.Label({
				text: "Price"
			})
		});
		oTable.addColumn(col3);


		var colItems = new sap.m.ColumnListItem("colItems", {
			type: "Active"
		});
		oTable.bindAggregation("items", "/Products", colItems);


		var txtNAME = new sap.m.Text("txtNAME", {
			text: "{ProductID}"
		});
		colItems.addCell(txtNAME);


		var txtNAME2 = new sap.m.Text("txtNAME2", {
			text: "{Name}"
		});
		colItems.addCell(txtNAME2);


		var txtNAME3 = new sap.m.Text("txtNAME3", {
			text: "{Price}"
		});
		colItems.addCell(txtNAME3);


//----------------Table1 ends --------------------------------------------
//---------Table1 code commented ends----------------------------------
*/



//-------------------Table2 starts------------------------------------
		var oTable2 = new sap.m.Table("idCatList", {
			inset: true,
			headerText: "List of Cat Categories",
			headerDesign: sap.m.ListHeaderDesign.Standard,
			mode: sap.m.ListMode.None,
			includeItemInSelection: false,
		});


		var col4 = new sap.m.Column("col4", {
			header: new sap.m.Label({
				text: "CategoryID"
			})
		});
		oTable2.addColumn(col4);


		var col5 = new sap.m.Column("col5", {
			header: new sap.m.Label({
				text: "CategoryName"
			})
		});
		oTable2.addColumn(col5);


		var col6 = new sap.m.Column("col6", {
			header: new sap.m.Label({
				text: "Description"
			})
		});
		oTable2.addColumn(col6);
		
	//	debugger;
	//	var oModel = sap.ui.getCore().getModel("Model2");
	//	var oModel2 = this.getOwnerComponent().getModel();
		
		var colItems = new sap.m.ColumnListItem("colItems", {
			type: "Active"
		});
		oTable2.bindAggregation("items", "Model2>/Categories", colItems);


		var txtNAME4 = new sap.m.Text("txtNAME4", {
			text: "{CategoryID}"
		});
		colItems.addCell(txtNAME4);


		var txtNAME5 = new sap.m.Text("txtNAME5", {
			text: "{CategoryName}"
		});
		colItems.addCell(txtNAME5);


		var txtNAME6 = new sap.m.Text("txtNAME6", {
			text: "{Description}"
		});
		colItems.addCell(txtNAME6);
        debugger;


		var oPage = new sap.m.Page({
			title: "{i18n>title}",
			content: [oTable2]
		});


		var app = new sap.m.App("myApp", {
			initialPage: "oPage"
		});
		app.addPage(oPage);
		return app;
	}


});

Note : if I switch the Model2 to default Model, I can see the data in the View instaed of empty rows with same code,But just by changing

oTable2.bindAggregation("items", "/Categories", colItems);
instaed of 
oTable2.bindAggregation("items", "Model2>/Categories", colItems);

I am using North wind service for my Model2 http://services.odata.org/V2/Northwind/Northwind.svc/Categories?$format=json

[Joseph_BERTHE · Accepted solution]

Hello,

First of all, please do not create Fiori application with Javascript views, it is not the SAP Best Practices, and in maintenance it is awfull.... believe me 😉

For your issue, the binding properties is not correct for your second table. You wrote :

var txtNAME4 = new sap.m.Text("txtNAME4", {
			text: "{CategoryID}"
		});

And it should be this :

var txtNAME4 = new sap.m.Text("txtNAME4", {
			text: "{Model2>CategoryID}"
		});

Regards,

Joseph

[former_member556957 · Accepted solution]

Hello Joseph, Thanks a lot, it resolved my problem, and working perfect..

I infact tried debugging but didnt able to get model instance in my view i tried with

var oModel =sap.ui.getCore().getModel("Model2");

But oModel resulted undefined. How can we get the model instance in the view level in this secnario to see content in the model? or atleast at the controller level. Even I am not able to get the default model instance in the view level.

Yes I know that sap recomends to create a view in XML, But I am trying to expore All different types of views.

[Joseph_BERTHE · Accepted solution]

Good to know. If its working, please mark as answered your question 😉

Regards,

Joseph

[Former Member]

The reason you are seeing empty lines is because your Model2 contains records which are binded to the table using aggregation. However, when displaying your view, the view renderer is not able to identify the Columns that you added to the table in your model... 

You would have to use {Model2>CategoryName} as your column....