Skip to Content
0
May 04, 2020 at 02:27 AM

Master/Details binding with bindElement issue

140 Views

Hello Experts,

I am doing a simple demo app , MasterView contains items and when any item clicked same item will be shown on detail view.

Issue: able to navigate to details view from master view. but data which is selected in master view is not getting displayed on the detail view.

below is the code ,please help me with what mistakes i am doing ,Please check my code in Mastercontroller.js file below where i am setting context to detail view.

Component.js

sap.ui.define(["sap/ui/core/UIComponent"],function(UIComponent){
	return UIComponent.extend("root.Component",{
		metadata:{}, //Manifest file if you are using  
		init:function(){
			UIComponent.prototype.init.apply(this); 
		},
		createContent:function(){
			//create View instances	
			var oAppView  = new sap.ui.view("idappview",{
				viewName:"root.view.App",
				type:"XML"
			}); 

Index.html

<!DOCTYPE html>
<html>
	<head>
		<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-libs="sap.m"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-resourceroots='{"root":"./"}'
		data-sap-ui-bindingSyntax="complex">
		</script>
		<script>
	var oComponentContainer = new sap.ui.core.ComponentContainer("idcc",{
				name:"root"
			});
			oComponentContainer.placeAt("UIArea");
		</script>
	</head>
	<body class="sapUiBody">
		<div id="UIArea">	
		</div>
	</body>
</html>

model.js

sap.ui.define(["sap/ui/model/json/JSONModel"],function(JSONModel){
	return {	
		createJSONModel:function(){
			var oModel = new JSONModel();
			oModel.loadData("models/data/products.json");
			return oModel;		
		}	
	};	
});

DetailView.XML

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="root.controller.Details"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="Details">
		<content>
			<ObjectHeader id ="idoh"
					intro="{ShipperName}"
					title="{ProductName}"
					icon="sap-icon://product"
					number="{Quantity}">
			</ObjectHeader>
		</content>
	</Page>
</mvc:View>

MasterController.js

onInit: function () {
         var omodel = model.createJSONModel();
         this.getView().setModel(omodel);
},
onNext: function(oEvent){
var sPath = oEvent.getParameter("listItem").getBindingContextPath();
var oApp = this.getView().getParent();
var oView2 = oApp.getPages()[1];
oView2.bindElement(sPath);
oApp.to("iddetview");
}