Navigation Problem

[#1]

Hello,

I want to navigate through my detail pages in my sapui5 application.

I have tried different ways, I used Target, Router with different functions like:

this.getOwnerComponent().getTargets().display("Detail2");

this.getOwnerComponent().getRouter().navTo("Detail2");

this.getRouter().navTo("Detail2");

this.getRouter().getTargets().display("Detail2");

But in all of them I face with an error that is like:

Uncaught TypeError: Cannot read property 'getTargets' of undefined

Uncaught TypeError: Cannot read property 'getRouter' of undefined

....

Can anyone help me that what can be the problem?

Regards

Sep

[saivellanki]

Hi Sep,

Check this sample: Plunker

Navigation logic is in app.controller.js file

Best Regards,

Sai Vellanki.

[sinaei]

Hi Sai,

Thank alot for your response, when I use this function I have this error:

sap.ui.core.UIComponent.getRouterFor is not a function

I do not know what can be the problem... In all the function I will see this kinds of error.

This is my Main.view . here I define my splitapp

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
  controllerName="splitrouting.Main" xmlns:html="http://www.w3.org/1999/xhtml">

  <SplitApp id="appId">

   <masterPages>  
   <mvc:XMLView viewName="splitrouting.Master" id="master" />  
  </masterPages>  
  <detailPages>  
   <mvc:XMLView viewName="splitrouting.Detail" id="Detail1" />  
   <mvc:XMLView viewName="splitrouting.Detail2" id="Detail2" />  
  </detailPages>  
  </SplitApp>

</core:View>

This is my Component.js

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
  "use strict";


  return UIComponent.extend("splitrouting.Component", {


  metadata: {
  manifest: "json"
  },


  init: function () {
  UIComponent.prototype.init.apply(this, arguments);
  this.getRouter().initialize();
  }
  });


});

Detail.controller

sap.ui.controller("splitrouting.Detail", {
onPress : function () {

  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.navTo("Detail2");
}

This is Detail2.controller

sap.ui.controller("splitrouting.Detail2", {



  onInit: function() {


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

and this is msnifest.json

{
  "sap.ui5": {
  "_version": "1.1.0",
  "rootView": "splitrouting.Main",
  "dependencies": {
   "minUI5Version": "1.30",
   "libs": {
  "sap.m": {}
   }
  },

  },

  "routing": {
   "config": {
  "routerClass": "sap.m.routing.Router",
  "viewType": "XML",
  "viewPath": "splirouting",
  "controlId": "appId",
  "controlAggregation": "detailPages"
   },
   "routes": [
  {
   "pattern": "",
   "name": "Main",
   "target": "Main"
  },
  {
   "pattern": "",
   "name": "Detail",
   "target": "Detail"
  },
  {
   "pattern": "/Detail2",
   "name": "Detail2",
   "target": "Detail2"
  }
   ],
   "targets": {
  "Main": {
   "viewName": "Main"
  },
  "Detail": {
   "viewName": "Detail"
  },
  "Detail2": {
   "viewName": "Detail2"
  }
   }
  }
  }
}

could you please take a look at these code and see if you can see something is wrong?

Thanks alot

sep,

[Former Member]

Hi s sin,

Please check your manifest.json file. I am getting a few mistakes when i paste your code into https://jsonformatter.curiousconcept.com/

[sinaei]

Thanks Daniel,

I make it ok, but the same error..

Uncaught TypeError: sap.ui.core.UIComponent.getRouterFor is not a function

[saivellanki]

Yeah Daniel is right!

You have one extra comma, one extra closing brace.

Your manifest will be something like this:

{
  "sap.ui5": {
  "_version": "1.1.0",
  "rootView": "splitrouting.Main",
  "dependencies": {
  "minUI5Version": "1.30",
  "libs": {
  "sap.m": {}
  }
  }
  },
  "routing": {
  "config": {
  "routerClass": "sap.m.routing.Router",
  "viewType": "XML",
  "viewPath": "splirouting",
  "controlId": "appId",
  "controlAggregation": "detailPages"
  },
  "routes": [{
  "pattern": "",
  "name": "Main",
  "target": "Main"
  }, {
  "pattern": "",
  "name": "Detail",
  "target": "Detail"
  }, {
  "pattern": "/Detail2",
  "name": "Detail2",
  "target": "Detail2"
  }],
  "targets": {
  "Main": {
  "viewName": "Main"
  },
  "Detail": {
  "viewName": "Detail"
  },
  "Detail2": {
  "viewName": "Detail2"
  }
  }
  }
}

Regards,

Sai Vellanki.

[sinaei]

Yes you are right,

I have changed it. but again the error is appear

Uncaught TypeError: sap.ui.core.UIComponent.getRouterFor is not a function

what this error can related to?

I am working on it more than 10 days, but always the same error.

I think maybe I am missing some minor part.

Thanks

[Former Member]

Does the error occur at Detail or Detai2 view?

[sinaei]

The error accure in the first page, When I run my index,html file. I can not see my splitapp and master detail pages, and I have this error in my debug

[Former Member]

Please try to add into your Detail.controller

in your onInit method

this._oRouter = sap.ui.core.UIComponent.getRouterFor(this);

and please change your method call in the onPress method like

this._oRouter.navTo("yourView");

[sinaei]

Thanks, I changed it.

maybe it is a problem with  this function. becuase again there is this error.

Uncaught TypeError: sap.ui.core.UIComponent.getRouterFor is not a function

[Private_Member_63124]

I had the same problem. My solution was start again the project based on SAPUI5 Walkthrough.

Regards

[sinaei]

Hi Pablo,

Thanks for you reply, The same as me, I started again base on SAPUI5 walkthrough. and is working, I dont know maybe BaseController.js and Controller.js are mandatory,

Reagrads

Sin