Skip to Content
0
Jan 02, 2018 at 02:19 AM

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

4872 Views Last edit Jan 02, 2018 at 02:27 AM 2 rev

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

Attachments

cat.jpg (69.3 kB)