How to navigate from master page to detail page view using routing mechanism?

Question

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "RoutNav/model/models"
], function (UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("RoutNav.Component", {
        metadata: {
            manifest: "json",
            rootView: "RoutNav.view.View1",

            routes: [
                {
                    pattern: "",
                    name: "Master",
                    view: "Master",
                    targetAggregation: "masterPages",
                    targetControl: "idAppControl",
                    subroutes: [
                        {
                            pattern: "tab:",
                            name: "Detail",
                            view: "Detail"
                        }
                    ]
                }
            ]
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");
        }
    });
});

I have tried this, in master.view.xml page I have just given a title. It's not working.

Answer 1

"routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewPath": "mc7prod.view",
            "viewType": "XML",
            "controlAggregation": "pages",
            "clearTarget": "false"
     },
     "routes": [
     {
        "pattern": "",
        "name": "Index",
        "view": "Index",
        "targetControl": "appId"
     },
     {
        "pattern": "split",
        "name": "AppMasterDetail",
        "view": "AppMasterDetail",
        "targetControl": "appId",
        "subroutes": [
            {
                "pattern": "master/{entity}",
                "name": "master",
                "view": "TS_Master",
                "targetAggregation": "masterPages",
                "preservePageInSpplitContainer": true,
                "targetControl": "idAppMaDeControl",
                "subroutes": [
                    {
                        "pattern": "detail/{entity}",
                        "name": "detail",
                        "view": "TS_Detail",
                        "targetAggregation": "detailPages"
                    }
                ]}]
        },

Answer 2

Steps to navigate master to detail..using JSON

1. Master.view.xml

<List id="list" growing="true" mode="SingleSelectMaster"
    growingThreshold="100" growingScrollToLoad="true" select="onSelect"
    noDataText="No Data">
</List>

2. Master.controller.js

    navBack: function(){
		var oRouter = new sap.ui.core.UIComponent.getRouterFor(this);
		oRouter.myNavBack("S1");
	},
	onInit: function(){
		this.data = new sap.ui.model.json.JSONModel("Model/data.json");
		sap.ui.getCore().setModel(this.data);
		
		var list = this.getView().byId("list");
		list.bindItems("/employees", new sap.m.StandardListItem({
			title: "{fname}"
		}));
		list.setModel(this.data);
	},
	onSelect: function(evt){
		var index = evt.getParameter("listItem").getBindingContext().getPath();
		index.charAt(index.length-1)-2;
		
		var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
		oRouter.navTo("Detail", {
			key : evt.getParameter("listItem").getTitle()			
		});
	}

3. Detail.view.xml

<Table onSelect="onpress" id="table" class="sapUiSmallMarginTop">
   <headerToolbar>
		<Toolbar>
			<Title level="H2" text="Personal Details" />
			<ToolbarSpacer />
			<Button press="onTableSettings" icon="sap-icon://drop-down-list" />
		</Toolbar>
	</headerToolbar>
		<columns>
			<Column>
				<Text text="Last_Name" key="name"/>
			</Column>
			<Column>
				<Text text="Mobile" />
			</Column>
			<Column>
		    	<Text text="Age" key="Age" />
			</Column>
		</columns>
	</Table>

3. Detail.controller.js

onInit : function() {
		this.getRouter().attachRoutePatternMatched(this.onRouteMatched, this);

	},

	onRouteMatched : function(oEvent) {
		// debugger;
		this.data = new sap.ui.model.json.JSONModel("Model/data.json");
		this.getView().setModel(this.data);

		var dataKey = oEvent.getParameter("arguments").key;
	
		this.getView().getModel().attachRequestCompleted(function() {
			var data2 = this.getView().getModel().getData().employees;
			var otable = this.getView().byId("table");

			for (var i = 0; i < data2.length; i++) {
				if (data2[i].fname === dataKey) {
					otable.bindItems("/employees", new sap.m.ColumnListItem({
						cells : [ new sap.m.Text({
							text : "{lname}",
						}), new sap.m.Text({
							text : "{mobile}"
						}), new sap.m.Text({
							text : "{age}"
						}) ]
					}));
				}
				otable.setModel(this.data);
			}
		}, this);

	},
	getRouter : function() {
		return sap.ui.core.UIComponent.getRouterFor(this);
	},

5. Component.js

 routing : {
      config : {
        routerClass : Application_Name.MyRouter,
        viewType : "XML",
        viewPath : "Application_Name.view",
        targetAggregation : "detailPages",
        transition: "slide",
        clearTarget : false
      },
      routes : [
        {
          pattern : "",
          name : "main",
          view : "Master",
          targetAggregation : "masterPages",
          targetControl : "idAppControl",
	          subroutes : [
	                       {
	    	            	   pattern:"Detail/{key}",
	    			    	   name: "Detail",
	    			    	   view: "Detail",
	    			    	   targetAggregation: "detailPages",
	    	               }
          ]
        }
      ]
    }

6. MyRouter.js

Just find and replace you Application_Name in MyRouter.js file

jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.declare("Application_Name.MyRouter");

sap.ui.core.routing.Router.extend("Application_Name.MyRouter", {

	constructor : function() {
		sap.ui.core.routing.Router.apply(this, arguments);
		this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this);
	},

	myNavBack : function(sRoute, mData) {
		var oHistory = sap.ui.core.routing.History.getInstance();
		var sPreviousHash = oHistory.getPreviousHash();

		//The history contains a previous entry
		if (sPreviousHash !== undefined) {
			window.history.go(-1);
		} else {
			var bReplace = true; // otherwise we go backwards with a forward history
			this.navTo(sRoute, mData, bReplace);
		}
	},
	myNavToWithoutHash : function (oOptions) {
		var oSplitApp = this._findSplitApp(oOptions.currentView);

		// Load view, add it to the page aggregation, and navigate to it
		var oView = this.getView(oOptions.targetViewName, oOptions.targetViewType);
		oSplitApp.addPage(oView, oOptions.isMaster);
		oSplitApp.to(oView.getId(), oOptions.transition || "show", oOptions.data);
	},

	backWithoutHash : function (oCurrentView, bIsMaster) {
		var sBackMethod = bIsMaster ? "backMaster" : "backDetail";
		this._findSplitApp(oCurrentView)[sBackMethod]();
	},

	destroy : function() {
		sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments);
		this._oRouteMatchedHandler.destroy();
	},

	_findSplitApp : function(oControl) {
		var sAncestorControlName = "idAppControl";

		if (oControl instanceof sap.ui.core.mvc.View && oControl.byId(sAncestorControlName)) {
			return oControl.byId(sAncestorControlName);
		}

		return oControl.getParent() ? this._findSplitApp(oControl.getParent(), sAncestorControlName) : null;
	}

});

Don't forget to add MyRouter.js file

Answer 3

you missing config code

 routing : {
      config : {
        routerClass : Application_Name.MyRouter,
        viewType : "XML",
        viewPath : "Application_Name.view",
        targetAggregation : "detailPages",
        transition: "slide",
        clearTarget : false
      },
      routes : [
        {
            pattern : "",
            name : "Master",
            view : "Master",
            targetAggregation : "masterPages",
            targetControl : "idAppControl",
            subroutes : [
                {
                    pattern : "tab:",
                    name : "Detail",
                    view : "Detail"
                }
            ]
        }
    ]
 }