Split-Screen Rooting with detail error Help

[Former Member]

Hi all !

I want to navigate to a split screen with a details, and i want to display the details on the split screen.

The navigation to the split screen works well but the details are not transmitted.

Someone can help me ?

Thanks.

Matt.

Code below.

// Worklist.controller.js
// My méthod for navigate


onPress: function (oEvt) {
this.getRouter().navTo("Detail", {
detailProductPath : oEvt.getSource().getBindingContext().getProperty("PostID")
});
},

// Detail.controller.js


sap.ui.define([
'sap/ui/demo/bulletinboard/controller/BaseController',
'sap/ui/model/json/JSONModel',
'sap/ui/demo/bulletinboard/model/formatter'
], function (BaseController, JSONModel, formatter) {
"use strict";

return BaseController.extend("sap.ui.demo.bulletinboard.controller.Detail", {


formatter: formatter,
		
onInit: function () {
var oViewModel = new JSONModel({
busy: false
});
this.getRouter().getRoute("detail").attachPatternMatched(this._onPostMatched, this);
this.setModel(oViewModel, "postView");
},
		
_onPostMatched: function (oEvent) {
var oViewModel = this.getModel("postView"),
oDataModel = this.getModel();
this.getView().bindElement({
path: "/Posts('" + oEvent.getParameter("arguments").postId + "')",
				
events: {
dataRequested: function () {
oDataModel.metadataLoaded().then(function () {
oViewModel.setProperty("/busy", true);
});
},
dataReceived: function () {
oViewModel.setProperty("/busy", false);
}
}
});
}
});
});

// Detail.view.xml


<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.ui.demo.bulletinboard.controller.Detail"
	xmlns:html="http://www.w3.org/1999/xhtml">
	
<App id="Detail">
<pages>
<Page >
<content>
<SlideTile class="sapUiTinyMarginTop">
<tiles>
<GenericTile 
backgroundImage="{
path:'Category',
formatter: '.formatter.backgroundTilePostView'
}"
frameType="TwoByOne"
press="pressOnTileOne">
<tileContent>
<TileContent footer="Current date">
<content>
<NewsContent
contentText="Description : {Description}" 
subheader="{ 
path:'Price', 
formatter: '.formatter.financingPossibility' 
}">
</NewsContent>
</content>
</TileContent>
</tileContent>
</GenericTile>
</tiles>
</SlideTile>
</content>
</Page>
</pages>
</App>

// manifest.json



"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "sap.ui.demo.bulletinboard.view",
				"targetAggregation": "pages",
				"async": true
			},
		"routes": [
				{
					"pattern": "",
					"name": "home",
					"view": "Home",
					"targetAggregation": "pages",
					"controlId": "app"
				},
				{
					"pattern": "Worklist",
					"name": "worklist",
					"view": "Worklist",
					"targetAggregation": "pages",
					"controlId": "app"
					
				},
				{	"pattern": "Split",
					"name": "Splitapp",
					"view": "Splitapp",
					"targetAggregation": "pages",
					"controlId": "app",
					
			  "subroutes": [{"pattern": "Split",
				"name": "Master",
				"view": "Master",
				"targetAggregation": "masterPages",
				"targetControl": "splitapp",
							
			"subroutes":[{ 
				"pattern": "Split/{detailProductPath}",                            "name": "Detail",
				"view": "Detail",
				"targetAggregation": "detailPages"
							}]
					}]
				}
			]


		}

[Former Member · Accepted solution]

I fixed the bug, it's because i gave the wrong name to the property, i gave "/Posts" but in my data json the property name is "PostID".

My corrected code is just below.

Thanks all for your help ! .

// WorkList.controller.js


onPress: function (oEvt) {
			this.getOwnerComponent().getRouter().navTo("Master", {
				// The source is the list item that got pressed
				PostID : oEvt.getSource().getBindingContext().getProperty("PostID") //<<<< HERE. 
			});
		},

// Master.controller.js



_onPostMatched: function (oEvent) {
		
			var oViewModel = this.getModel("postView"),
			
			
				oDataModel = this.getModel();
		     	this.getView().bindElement({
				
				path: "/Posts('" + oEvent.getParameter("arguments").PostID + "')", // <<< HERE
				
				events: {
				dataRequested: function () {
				oDataModel.metadataLoaded().then(function () {
						oViewModel.setProperty("/busy", true);
						});
					},
					dataReceived: function () {
						oViewModel.setProperty("/busy", false);
					}
				}
			});
		}

// json Data


{
	"PostID": "PostID_1",    // <<<< HERE
	"Title": "29'er Mountain Bike (red)",
	"Timestamp": "/Date(1428223780000)/",
	"Description": "A great mountainbike, barely used and good as new. Pedals and saddle included",
	"Category": "Bicycles",
	"Contact": "contact.me07@gmail.com",
	"Currency": "USD",
	"Price": 81,
	"Flagged": 0
  },

[Former Member]

Hi Meghal !

it's not working because i can't give a name to my model, if a do this ( code below) i have an error and my program not working.

Thanks.

//manifest.json

"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.bulletinboard.i18n.i18n"
}
},
"nameOfMyModel": { //<<<<< i give a name here.
"dataSource": "mainService",
"settings": {
"metadataUrlParams": {
"sap-documentation": "heading"
}
}
}
}

[Former Member]

please try below.

onPress: function(oItem){
			console.info(oItem);
			this.getOwnerComponent().getRouter().navTo("detail", {
				productId: oItem.getBindingContext("modelname").getProperty("ProductID")
			});
		}

onInit: function() {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.getRoute("detail").attachMatched(this._onRouteMatched, this);
		},
		_onRouteMatched: function(oEvent) {
			var oView;
			oView = this.getView();
			oView.bindElement({
				path: "/Products(" + oEvent.getParameter("arguments").productId + ")",
				model: "product",
				parameters: {
					expand: "Supplier"
				},
				events: {
					dataRequested: function(oEvent) {
						oView.setBusy(true);
					},
					dataReceived: function(oEvent) {
						console.info("issue in detail");
						oView.setBusy(false);
					}
				}
			});
		},

[Former Member]

Hi Srikanth !

I have already try but i use a mockserver so my modeljson is in webapp/localService/mockdata, and it doesn't work, i presum is differente when a don't use mockserver because normally it's working when i pass the model name in 'bindElement' method.

Now i give a name to my data in the manifest and i pass the model name in 'bindElement' method, my programe give me an error like this :

Error : Uncaught TypeError: Cannot read property 'setDefaultbindingMode' of undefined.

and

Error: Uncaught(in promise) TypeError: Cannot read property 'getModel' of undefined.

Thanks.

	
_onPostMatched: function (oEvent) {
		
var oViewModel = this.getModel("postView"),
			
			
oDataModel = this.getModel();
this.getView().bindElement({
				
path: "/Posts('" + oEvent.getParameter("arguments").postId + "')",
model : "Posts",     // HERE I ADD THE NAME IN A FUNCTION
events: {
dataRequested: function () {
oDataModel.metadataLoaded().then(function () {
							
oViewModel.setProperty("/busy", true);
});
},
dataReceived: function () {
oViewModel.setProperty("/busy", false);
}
}
});
}

// manifest.json

		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.ui.demo.bulletinboard.i18n.i18n"
				}
			},
			"Posts": {     // HERE I ADD THE NAME IN A MANIFEST
				"dataSource": "mainService",
				"settings": {
					"metadataUrlParams": {
						"sap-documentation": "heading"
					}
				}
			}

[former_member365727]

if you have a named model then you need to pass the model name in 'bindElement" method..