Pass Parameter Master to Detail Page

[kaan_ozdogan]

Hi Expert,

I use ,

master.controller.js

  var context = {

                dino: splits[0],

                revno: splits[1],

                uruntipi : splits[2],

                bindingContext : evt.getSource().getBindingContext()

            };

     // this.oRouter.navTo("Detail", context);

sap.ui.core.UIComponent.getRouterFor(this).navTo("Detail", context);

detail.controller.js

onInit : function (evt) {

          var dino ;

          var revno ;

          var uruntipi ;

    //      var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");

              this.oRouter.attachRouteMatched(function(oEvent) {

                 if (oEvent.getParameter("name") !== "Detail") {

                     return;

                         }

                         dino = oEvent.getParameter("arguments").dino;

                         revno = oEvent.getParameter("arguments").revno;

                         uruntipi = oEvent.getParameter("arguments").uruntipi;

                         bindingContext = oEvent.getParameter("arguments").bindingContext;

                          },

             this);

}

What is wrong there I get error   "Uncaught TypeError: Cannot read property 'attachRouteMatched' of undefined"

[santhu_gowdaz · Accepted solution]

I'm doing like this,

Master View,

showDetail : function(oItem) {

        // If we're on a phone device, include nav in history

        var bReplace = jQuery.device.is.phone ? false : true;

        this.getRouter().navTo("detail", {

            from: "master",

            entity: oItem.getBindingContext().getPath().substr(1),

            tab: this.sTab

        }, bReplace);

    },

Detail View,

	onRouteMatched : function(oEvent) {
	var oParameters = oEvent.getParameters();

	jQuery.when(this.oInitialLoadFinishedDeferred).then(jQuery.proxy(function () {
		var oView = this.getView();

		// When navigating in the Detail page, update the binding context
		if (oParameters.name !== "detail") {
			return;
		}

		var sEntityPath = "/" + oParameters.arguments.entity;
		this.bindView(sEntityPath);

		var oIconTabBar = oView.byId("idIconTabBar");
		oIconTabBar.getItems().forEach(function(oItem) {
			if(oItem.getKey() !== "selfInfo"){
				oItem.bindElement(oItem.getKey());
			}
		});

		// Specify the tab being focused
		var sTabKey = oParameters.arguments.tab;
		this.getEventBus().publish("Detail", "TabChanged", { sTabKey : sTabKey });

		if (oIconTabBar.getSelectedKey() !== sTabKey) {
			oIconTabBar.setSelectedKey(sTabKey);
		}
	}, this));

    }

[kaan_ozdogan · Accepted solution]

I solve this problem but I couldnt configure component.js

	metadata : {
	routing : {
	config : {
		viewType:"XML",
		viewPath:"sap.ui.demo.myFiori.view.Detail",
		targetControl:"navContainer",
		targetAggregation:"pages",
		clearTarget : false
	},
	routes : [
		{
			pattern : "",
			name:"master",
			view:"Master"
		},
		{
			pattern : "Detail",
			name : "detail",
			view : "Detail"
		}]

    }

}

});

sap.ui.demo.myFiori.init = function(){

			jQuery.sap.require("sap.ui.core.routing.History");
			jQuery.sap.require("sap.m.routing.RouteMatchedHandler");

sap.ui.demo.myFiori.init.apply(this);

			var router = this.getRouter();
			this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
			router.initialize();
			};
			sap.ui.demo.myFiori.destroy = function(){
			if(this.routeHandler){
			this.routeHandler.destroy();
			}
			sap.ui.core.UIComponent.destroy.apply(this,arguments);
			};

[santhu_gowdaz · Accepted solution]

here is my component.js,

Component.txt.zip

[kaan_ozdogan · Accepted solution]

Are you sure this compnent.js could be run.

I couldn't run to nav.to function

[santhu_gowdaz · Accepted solution]

ya sure it's run. may be in your nav view have some error. debug it, run your application in crome using F12, debug and see the error console.

[kaan_ozdogan · Accepted solution]

My code is,

Master.controller.js

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

    oRouter.navTo("Detail", imp);

Detail.controller.js

  this.router.attachRouteMatched(function(oEvent) {

                 if (oEvent.getParameter("name") !== "Detail") {

                     return;

                         }

                     imp= oEvent.getParameter("arguments").imp;

                          },

             this);

What is wrong I could't understand???

[santhu_gowdaz · Accepted solution]

See My Master Controller,

	showDetail : function(oItem) {
	// If we're on a phone device, include nav in history
	var bReplace = jQuery.device.is.phone ? false : true;
	this.getRouter().navTo("detail", {
		from: "master",
		entity: oItem.getBindingContext().getPath().substr(1),
		tab: this.sTab
	}, bReplace);

    },

    getRouter : function () {

return sap.ui.core.UIComponent.getRouterFor(this);

    },

Detail Controller,

init()

{

this.getRouter().attachRouteMatched(this.onRouteMatched, this);

},

getRouter : function () {

        return sap.ui.core.UIComponent.getRouterFor(this);

    },

onRouteMatched : function(oEvent) {

        var oParameters = oEvent.getParameters();

        jQuery.when(this.oInitialLoadFinishedDeferred).then(jQuery.proxy(function () {

            var oView = this.getView();

            // When navigating in the Detail page, update the binding context

            if (oParameters.name !== "detail") {

                return;

            }

            var sEntityPath = "/" + oParameters.arguments.entity;

            this.bindView(sEntityPath);

        }, this));

    },

[kaan_ozdogan · Accepted solution]

Did you do anything component.js or others for configure router.

[santhu_gowdaz · Accepted solution]

i'm already shared my component.js with you.

[kaan_ozdogan · Accepted solution]

Ohhh !! My brain is firing

There is a problem that attachRouteMatched is not define when I use your component.js

This code isnot get error But isnot to run to nav.to function

metadata : {

	routing: {
	config: { // default values for routing
	viewType : "XML",
	viewPath: "sap.ui.demo.myFiori.view.Master",
	clearTarget: false
	},
	routes: { // contains routing configuration objects
	"myRouteName" : {
	name :"myrouter" ,
	pattern : "Detail",
	view : "myViewId"
	}
	}
	}

    }

[santhu_gowdaz · Accepted solution]

what is the issue?

debug it properly, put breakpoint on nav.to() and Detail init() methods.

[Former Member]

Try the below code...

Component.js

---------------------------------

routing :

        {

  config :

  {

  viewType : "XML",

  viewPath : "abc.view",

  targetAggregation : "detailPages",

  targetControl:"idAppControl",

  clearTarget : false

  },

  routes : [

  {

  pattern : "",

  name : "master",

  view : "Master",

  targetAggregation : "masterPages",

  viewLevel : 0,

  preservePageInSplitContainer : true,

  subroutes : [

  {

  pattern : "master/{Unit}/{Article}/{Supplier}/{frDate}/{toDate}/detail/{Mblnr}/{Mjahr}",

  name : "detail",

  view : "Detail",

  viewLevel : 2,

  targetAggregation : "detailPages",

  }     ]

  },

  ]

  }

--------------------------------------------------

Master controller.js

var bReplace = jQuery.device.is.phone ? false : true;

  var path = oItem.getBindingContextPath()

  var index = parseInt(path.lastIndexOf('/') +1);

  var model = this.getView().byId('list').getModel('Your Model name');

this.getRouter().navTo("detail", {

  Unit:model.getProperty(path).Werks,

  Article:parseInt(model.getProperty(path).Matnr),

  Supplier:parseInt(model.getProperty(path).Lifnr),

  frDate:this.getRouter()._oRouter._prevRoutes[0].params[3],

  toDate:this.getRouter()._oRouter._prevRoutes[0].params[4],

  Mblnr: model.getProperty(path).Mblnr,

  Mjahr: model.getProperty(path).Mjahr

  }, bReplace);

[Former Member]

Dear Kaan,

You can debug your code using the Developer Tools of Google Chrome (which I would highly recommend).

You can find more information about it here:

Debugging JavaScript - Google Chrome

It looks like your "this.oRouter" statement returns a undefiend "attachRouteMatched" function, so what I suspect is that "this.oRouter" is not available in the context of the onInit.

Which could be right, cause I dont see you setting the router anywhere, and its not always available since "this" is dependand on the context you are in at that time.

You can also take a look at this link for further information on the SAPUI5 router:

Step 3: Navigation and Routing - SAPUI5 Developer Guide - SAP Library

Good luck!

Caspár

[Former Member]

Hi Kaan,

You have to create an MyRouter.js file and in your Detail.controller you have to require that Router like:

jQuery.sap.require("sap.m.routing.RouteMatchedHandler");

  jQuery.sap.require("Your Project Path.MyRouter");

Message was edited by: Kuldeep Singh