Binding in Object Header within JS View vs XML View

Recently, I’ve developped a small UI5 application which includes an Object Header Control to display a product. All Views are written with Javascript language.

I took a simple example from explored app and I tried to convert XML code to Javascript by keeping all necessery attributes :

		var oObjectHeader = new sap.m.ObjectHeader("objectHeaderID", {
			binding: "{/ProductCollection}",
			title: "{Name}",
			number: "{ parts:[{path:'Price'},{path:'CurrencyCode'}],	type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }",
			numberUnit: "{CurrencyCode}"
		});

When I executed the application, nothing got displayed and no title was shown in the view.

After many searchs, I found out that within JS view, you have to not use binding attribute but you have to define the absolute path of your model as below :

		var oObjectHeader = new sap.m.ObjectHeader("objectHeaderID", {
			// binding: "{/ProductCollection}",
			title: "{/ProductCollection/Name}",
			number: "{ parts:[{path:'/ProductCollection/Price'},{path:'/ProductCollection/CurrencyCode'}],	type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }",
			numberUnit: "{/ProductCollection/CurrencyCode}"
		});

Regarding XML views, there is nothing to change and you have to keep binding attribute as shown in the explored site :

<ObjectHeader binding="{/ProductCollection}" title="{Name}"
        number="{ parts:[{path:'Price'},{path:'CurrencyCode'}], 
	type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }"
	numberUnit="{CurrencyCode}">
</ObjectHeader>

I hope that this blog will help you if decide to write all yours views in Javascript.

Noufal FARAH