Skip to Content

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

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

cat.jpg (69.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Jan 02 at 08:19 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 03 at 03:00 AM
    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.... 
    Add comment
    10|10000 characters needed characters exceeded