Skip to Content

Detail to Detailed page Navigation Issue in SplitApp

hi friends,

my application purpose is like below.

i have 1 master page and 2 detailed pages.

when i click on item in master then it will navigate to Detail page 1 .

when i click button on Detailed page 1 ,then Detailed Page 1 Should Navigate to DetailedPage 2.

from master to detail 1 navigation it was working fine,but when i try to navigation from Detail page 1 to Detailed page 2 ,,navTo("dtail2",oobj) is not working.

but when i refresh the URL at this Detailed Page2 manually ,then Detailed Page 2 is Displayed Correctly.

what might be the problem ?.

why detailed page 2 is displayed ,when i run manually,

why not navTo(<Detai2_route>,odat) is not working?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    Mar 04, 2017 at 12:34 PM

    hi firends,

    i got the solution after lots of struggling .

    i forgo the "routerClass" :"sap.m.Rrouting.Router" at "config" under "routing" in manifest.json .

    after placing this my application is working fine.

    thank you guys for supporting me

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 21, 2017 at 08:37 AM

    any error you are getting ? check console and share that if any.

    and share your routing configuration too

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 23, 2017 at 05:41 AM

    yes i am getting the following Error Messages in Console.hear i attached the screen shorts of it

    1.while Navigating between detail 1 to detail 2 page

    2.while Refreshing the detail 2 page URL.

    in the second case i.e refresh the URL of Detail page 2 i am getting o/p.

    the error messages it seems both are same . i think its a navigation problem from Detail 1 to Detail 2 page. can you help me .

    manifest.json
    {
    	"_version": "1.5.0",
    	"sap.app": {
    		"id": "sun.ui5.practiceapp3_project",
    		"type": "application",
    		"i18n": "i18n/i18n.properties",
    		"applicationVersion": {
    			"version": "1.0.0"
    		},
    		"title": "{{appTitle}}",
    		"description": "{{appDescription}}",
    		"sourceTemplate": {
    			"id": "servicecatalog.connectivityComponent",
    			"version": "0.0.0"
    		},
    		"dataSources": {
    			"Northwind.svc": {
    				"uri": "/northwind/V2/Northwind/Northwind.svc/",
    				"type": "OData",
    				"settings": {
    					"odataVersion": "2.0",
    					"localUri": "localService/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": "sun.ui5.practiceapp3_project.view.splitApp",
    			"type": "XML"
    		},
    		"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": "sun.ui5.practiceapp3_project.i18n.i18n"
    				}
    			},
    			"": {
    				"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"
    			}]
    		},
    		"routing": {
    			"config": {
    				"viewPath": "sun.ui5.practiceapp3_project.view"
    			},
    			"targets": {
    				"Customers": {
    					"viewType": "XML",
    					"transition": "slide",
    					"clearAggregation": true,
    					"viewName": "mCustomers",
    					"title": "Customers List For Master Page",
    					"viewLevel": 1,
    					"controlAggregation": "masterPages",
    					"controlId": "idSplitApp"
    				},
    				"customer": {
    					"viewType": "XML",
    					"transition": "slide",
    					"clearAggregation": true,
    					"viewName": "dCustomer",
    					"title": "Customer Details For Detailed Page",
    					"viewLevel": 2,
    					"controlAggregation": "detailPages",
    					"controlId": "idSplitApp"
    				},
    				"Orders": {
    					"viewType": "XML",
    					"transition": "slide",
    					"clearAggregation": true,
    					"viewName": "dOrders",
    					"title": "List Of Orders For Particular Customer",
    					"viewLevel": 1,
    					"controlId": "idSplitApp",
    					"controlAggregation": "detailPages"
    				}
    			},
    			"routes": [{
    				"name": "Customers",
    				"pattern": "",
    				"titleTarget": "",
    				"greedy": true,
    				"target": ["Customers", "customer"]
    			}, {
    				"name": "customer",
    				"pattern": "customer/{cID}",
    				"titleTarget": "",
    				"greedy": true,
    				"target": ["customer", "Customers"]
    			}, {
    				"name": "Orders",
    				"pattern": "orders/{cID}",
    				"titleTarget": "",
    				"greedy": true,
    				"target": ["Orders", "Customers"]
    			}]
    		}
    	}
    }
    
    Add comment
    10|10000 characters needed characters exceeded

  • Feb 23, 2017 at 06:16 AM

    detail page 1 button press Controller code:

    		onButtonPress: function(oobj) {
    				var that = this;
    				that.getOwnerComponent().getRouter().getRoute("customer").attachPatternMatched(function(oMathced) {
    					// debugger;
    				});
    				var oselId = oobj.getSource().getText();
    				var ord = {
    					cID: oselId
    				};
    				// debugger;
    				that.getOwnerComponent().getRouter().navTo("Orders", ord);
    				// debugger;
    			}
    

    detail page 2 Controller Code:

    sap.ui.define([
    	"sap/ui/core/mvc/Controller",
    	"sap/m/MessageToast",
    	"sap/ui/table/Row"
    ], function(Controller, messageToast, tabRow) {
    	"use strict";
    
    
    	return Controller.extend("sun.ui5.practiceapp3_project.controller.dOrders", {
    
    
    		/**
    		 * Called when a controller is instantiated and its View controls (if available) are already created.
    		 * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
    		 * @memberOf sun.ui5.practiceapp3_project.view.dOrders
    		 */
    		onInit: function() {
    			var that = this;
    			that.getOwnerComponent().getRouter().getRoute("Orders").attachPatternMatched(function(oMathced) {
    				var sel = oMathced.getParameter("arguments").cID;
    				that.getView().getModel().read("/Customers('" + sel + "')" + "/Orders/", {
    					success: function(oSelData) {
    						var ojson = new sap.ui.model.json.JSONModel(oSelData);
    						//ojson.SetData(oSelData);
    						that.getView().byId("idTab").setModel(ojson);
    								// that.getView().byId("idTab").bindAggregation("rows", {
    						//that.getView().byId("idForm").bindElement("/results[0]/");
    						// 	path: "/",
    						// 	template: tabRow
    						// });
    						messageToast.show("Successfully Got the Orders From CustomerID:  " + sel);
    					},
    					error: function() {
    						messageToast.show("Error While Reading Orders From CustomerID " + sel);
    					}
    				});
    
    
    			});
    		},
    		tableCellClick: function(oeve) {
    			var that = this;
    			// debugger;
    			var selval = oeve.getParameter("cellControl").getText();
    			that.getView().getModel().read("/Orders(" + selval + ")", {
    				success: function(odat) {
    					// debugger;
    					var json = new sap.ui.model.json.JSONModel(odat);
    					that.getView().byId("idForm").setModel(json);
    					that.getView().byId("idForm").bindElement("/");
    
    
    					messageToast.show("FormData Readed Successfully");
    				},
    				error: function() {
    					messageToast.show("Error While Reading The Form Data");
    				}
    			});
    		}
    
    
    		/**
    		 * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
    		 * (NOT before the first rendering! onInit() is used for that one!).
    		 * @memberOf sun.ui5.practiceapp3_project.view.dOrders
    		 */
    		//	onBeforeRendering: function() {
    		//
    		//	},
    
    
    		/**
    		 * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
    		 * This hook is the same one that SAPUI5 controls get after being rendered.
    		 * @memberOf sun.ui5.practiceapp3_project.view.dOrders
    		 */
    		//	onAfterRendering: function() {
    		//
    		//	},
    
    
    		/**
    		 * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
    		 * @memberOf sun.ui5.practiceapp3_project.view.dOrders
    		 */
    		//	onExit: function() {
    		//
    		//	}
    
    
    	});
    
    
    });
    
    Add comment
    10|10000 characters needed characters exceeded