getting error as app.addPage while creating fiori like apps

[Former Member]

Hi,

While creating fiori like apps .I am getting following error at this.app.addPage(master, true);   as

Error Msg: Uncaught TypeError: Cannot read property 'addPage' of undefined

UI5.view.js

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

sap.ui.jsview("sap.ui.demo.myFiori.ui5component.UI5", {

  getControllerName : function() {

  return "sap.ui.demo.myFiori.ui5component.UI5";

  },

createContent : function(oController) {

  var app = new sap.m.App();

  this.setDisplayBlock(true);

  var master = sap.ui.view({id:"Master",

  viewName:"sap.ui.demo.myFiori.ui5component.master", type:sap.ui.core.mvc.ViewType.JS});

  master.getController().nav = this.getController();

  this.app.addPage(master, true);

  var detail = sap.ui.view({id:"Detail",

  viewName:"sap.ui.demo.myFiori.ui5component.detail", type:sap.ui.core.mvc.ViewType.JS});

  //app.addMasterPage(master).addDetailPage(detail);

  detail.getController().nav = this.getController();

  this.app.addPage(detail);

  //this.app.addPage(master);

  return app;

  }

});

master.view.js

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

sap.ui.jsview("sap.ui.demo.myFiori.ui5component.master", {

  getControllerName : function() {

  return "sap.ui.demo.myFiori.ui5component.master";

  },

  createContent : function(oController) {

  var list1 = new sap.m.List({

  id : "master", inset: false,

  press : function(oevent)

  {oController. handleListItemPress();}

  });

  var template = new sap.m.StandardListItem({

  title : "{SoId}"

  });

  list1.bindItems({path : "/SalesOrderCollection",template :template} );

  return list1;

master.controller.js

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

sap.ui.controller("sap.ui.demo.myFiori.ui5component.master", {

  handleListItemPress : function (evt) {

  var context = evt.getSource().getBindingContext();

  this.nav.to("Detail1", context);

  }

});

  }

});

[Former Member · Accepted solution]

Hi, But if am using app.addPage() instead of this.app.addPage() it is working fine.I am not getting why,Please some one help me out

[former_member182862 · Accepted solution]

When you createContent function, where app is instantiated, you should use app and not this.app. Maybe you can tell us why you think this.app should work and we can explain better 🙂

Thanks

-D

[Former Member · Accepted solution]

Hi Dennos,

Thank you for your reply.

upto my knowledge this.app means current instance of app,this.controller means current instace of controller

..The example in this post used this.app.

this.app = new sap.m.App();

  // load the master page

  var master = sap.ui.xmlview("Master", "sap.ui.demo.myFiori.view.Master");

  master.getController().nav = this.getController();

  this.app.addPage(master, true);

  // load the detail page

  var detail = sap.ui.xmlview("Detail", "sap.ui.demo.myFiori.view.Detail");

  detail.getController().nav = this.getController();

  this.app.addPage(detail, false);

In the same way i tried to create same app but using view's in JS insted of XML.If i am wrong please clear me.

[former_member182862 · Accepted solution]

Hi

But in your example, you have var app = new sap.m.App() and not

this.app = new sap.m.App();

-D

[Former Member · Accepted solution]

Till now i am thinking both are same . i am not getting the difference between this.app and var app .I dnt know much about that please explain with some example.I am getting same type of error at (app.getPage(pageId, master) === null) :

Uncaught TypeError: Cannot read property 'getPage' of undefined.while retriving the page from controller.

to : function (pageId, context) {

  var app = getView().app;

  // load page on demand

  var master = ("Master" === pageId);

  if (app.getPage(pageId, master) === null) {

  var page = sap.ui.view({

  id : pageId,

  viewName : "sap.ui.demo.myFiori.ui5component." + pageId,

  type : "JS"

  });

  page.getController().nav = this;

  app.addPage(page, master);

  //jQuery.sap.log.info("app controller > loaded page: " + pageId);

  }

  // show the page

  app.to(pageId);

  // set data context on the page

  if (context) {

  var page = app.getPage(pageId);

  page.setBindingContext(context);

  };

  },

  /**

  * Navigates back to a previous page

  * @param {string} pageId The id of the next page

  */

  back : function (pageId) {

  this.getView().app.backToPage(pageId);

  }

[former_member182862 · Accepted solution]

HI

I lost of context of where your code is.

In this first example, you just need to change the var app to this.app.

-D

[Former Member · Accepted solution]

Thank You Dennis,

If u dnt mine please explain the difference between var app to this.app these 2

[former_member182862 · Accepted solution]

It is more of a Javascript question then a SAPUI5 question 🙂

'var app' will have the app object available within the createContent function.

'this.app' will have the app object available within the createContent function and also outside because app is a property of View.

It is logical that you instantiate app and reference it to 'app' and you cannot expect to access it via 'this.app'. Likewise, if you reference it to 'this.app', you cannot expect to access it via 'app'

Thanks

-D

[maximilian_lenkeit · Accepted solution]

As explained by Dennis, it's really two different things.

this.app assigns a member variable/ property to the object (in your case, the UI5 view object). In other programming languages like Java, it would be the same (this.app), on ABAP, it would be me->app.

var app instead creates a local variable (within the scope of the function). In Java, this would again be something like Object app = ... and in ABAP, it would be something like DATA lv_app TYPE ...

Let me stress again that this.app and app are really two different things. To make your code work, it's important to use either one consistently through the createContent function.

- Max

[Former Member · Accepted solution]

Thank You .Now i understood

[Former Member · Accepted solution]

Thank You I got