Skip to Content
avatar image
Former Member

Split-Screen Rooting with detail error Help

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"
							}]
					}]
				}
			]


		}
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Best Answer
    avatar image
    Former Member
    May 15 at 08:05 AM

    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
      },
    
    Add comment
    10|10000 characters needed characters exceeded

  • May 10 at 05:19 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 10 at 08:03 PM

    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);
    					}
    				}
    			});
    		},
    
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 10 at 06:27 PM

    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"
    					}
    				}
    			}
    
    

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 11 at 08:33 AM

    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"
    }
    }
    }
    }

    Add comment
    10|10000 characters needed characters exceeded