Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Can't use app.to

Hi Community,

I,m trying to build a navigaton for my Solution.
Its a Page with some tiles. I want those tiles to work as navigation points into other pages.

Whenever i try to use my code, its tells me "Uncaught TypeError: app.to is not a function".
I'm not able to figure out why its not working, because i already used this method for and comparable Navigaton.At first, here is my Code:

The index.html:

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <script  id="sap-ui-bootstrap" type="text/javascript"

        src="resources/sap-ui-core.js"

    data-sap-ui-theme="sap_bluecrystal"

    data-sap-ui-xx-bindingSyntax="complex"

    data-sap-ui-libs="sap.m, sap.ui.table">

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <script>

  sap.ui.localResources("view");

  var app = new sap.m.App({initialPage:"entry"});

  var page = sap.ui.view({id:"entry", viewName:"view.entry", type:sap.ui.core.mvc.ViewType.JS});

  app.addPage(page);

  app.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

Here my controller (entry.controller.js)

jQuery.sap.require("jquery.sap.history");

jQuery.sap.require("sap.m.InstanceManager");

sap.ui

  .controller(

  "view.entry",

  {

  onInit : function() {

  var historyDefaultHandler = function(navType) {

  if (navType === jQuery.sap.history.NavType.Back) {

  this.navBack(this.getDefaultPage());

  } else {

  this.navTo(this.getDefaultPage(), null, false);

  }

  };

  var historyPageHandler = function(params, navType) {

  if (!params || !params.id) {

  jQuery.sap.log.error("invalid parameter: "

  + params);

  } else {

  if (navType === jQuery.sap.history.NavType.Back) {

  this.navBack(params.id);

  } else {

  this.navTo(params.id, params.data, false);

  }

  }

  };

  jQuery.sap.history({

  routes : [ {

  // This handler is executed when you navigate

  // back to the history state on the path "page"

  path : "page",

  handler : jQuery

  .proxy(historyPageHandler, this)

  } ],

  // The default handler is executed when you navigate

  // back to the history state with an empty hash

  defaultHandler : jQuery.proxy(

  historyDefaultHandler, this)

  });

  // subscribe to event bus

  var bus = sap.ui.getCore().getEventBus();

  bus.subscribe("nav", "to", this.navHandler, this);

  bus.subscribe("nav", "backToPage", this.navHandler,

  this);

  bus.subscribe("nav", "back", this.navHandler, this);

  bus.subscribe("nav", "virtual", this.navHandler, this);

  this.bus = bus;

  },

  doNavOnSelect : function(event) {

  this.bus.publish("nav", "to", {

  id : event

  });

  },

  navHandler : function(channelId, eventId, data) {

  var app = this.getView();

  if (eventId === "to") {

  this.navTo(data.id, data.data, true);

  } else if (eventId === "backToPage" && data && data.id) {

  app.backToPage(data.id);

  } else if (eventId === "back") {

  if (data && data.id) {

  this.navBack(data.id);

  } else {

  jQuery.sap.history.back();

  }

  } else if (eventId === "virtual") {

  jQuery.sap.history.addVirtualHistory();

  } else {

  jQuery.sap.log

  .error("'nav' event cannot be processed. There's no handler registered for event with id: "

  + eventId);

  }

  },

  navTo : function(id, data, writeHistory) {

  if (id === undefined) {

  // invalid parameter

  jQuery.sap.log

  .error("navTo failed due to missing id");

  } else {

  var app = this.getView();

  // navigate in the app control

  app.to(id, "slide", data);

  }

  },

  navBack : function(id) {

  if (!id) {

  // invalid parameter

  jQuery.sap.log

  .error("navBack - parameters id must be given");

  } else {

  // close open popovers

  if (sap.m.InstanceManager.hasOpenPopover()) {

  sap.m.InstanceManager.closeAllPopovers();

  }

  // close open dialogs

  if (sap.m.InstanceManager.hasOpenDialog()) {

  sap.m.InstanceManager.closeAllDialogs();

  jQuery.sap.log

  .info("navBack - closed dialog(s)");

  }

  // ... and navigate back

  var app = this.getView().app;

  var currentId = (app.getCurrentPage()) ? app

  .getCurrentPage().getId() : null;

  if (currentId !== id) {

  app.backToPage(id);

  jQuery.sap.log.info("navBack - back to page: "

  + id);

  }

  }

  }

  });

and my view (entry.view.js):

sap.ui.jsview("view.entry",

  {

  getControllerName : function() {

  return "view.entry";

  },

  createContent : function(oController) {

  // set MainPage

  var mainTileContainer = new sap.m.TileContainer(

  mainTileContainer, {});

  var menuModel = new sap.ui.model.json.JSONModel(

  "model/menuNoI18n.json");

  menuModel.attachRequestCompleted(null, function() {

  function navFn(target) {

  return function() {

  oController.doNavOnSelect(target);

  }

  }

  var data = null, m = 0, menu = null;

  data = menuModel.getData();

  if (data && data.Menu) {

  for (m = 0; m < data.Menu.length; m++) {

  menu = data.Menu[m];

  mainTileContainer.addTile(new sap.m.StandardTile({

  icon : menu.icon,

  title : menu.title,

  info : menu.description,

  press : navFn(menu.targetPage)

  }));

  }

  }

  });

  var app = new sap.m.Page({

  setShowHeader : true,

  title : "Welcome w/out i18n",

  footer : new sap.m.Bar({

  contentMiddle : [ new sap.m.Link("version", {

  text : "0.20"

  }) ]

  })

  });

  app.setEnableScrolling(false);

  app.setShowHeader(true);

  app.addContent(mainTileContainer);

  return app;

  }

  });

In the debugger I were able to see that the Problem comes frome line 106 [  app.to(id, "slide", data); ]

I hope someone got an idea why app.to cant be found here.

Regards
Dain

Former Member
Former Member replied

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question