cancel
Showing results for 
Search instead for 
Did you mean: 

How to Switch to Full screen view from master detail view

Jayakrishnan
Active Participant
0 Kudos

Hi Friends,

     I am working on the Master-Detail view application(Split App Type). Now i require one full screen view to display some hierarchy information. i have placed the grid button next to the search field in master section. While pressing the grid button i have to display the Full screen view. I am using XML views through out my application. Please guide me on this.

Thank you,

JK

Accepted Solutions (1)

Accepted Solutions (1)

Jayakrishnan
Active Participant
0 Kudos

I have found the solution for this, by creating the master page like below.

-----code starts----

createContent: function (oController) {
// to avoid scroll bars on desktop the root view must be set to block display
this.setDisplayBlock(true);
appMaster =new sap.m.App("masterapp",{initialPage:"splitapp"});
var detailPage = sap.ui.view("Hierarchy",{
viewName : "sap.ui.demo.myFiori.view.Hierarchy",
type : "XML",
viewData : { component : this }
});
detailPage.getController().nav = this.getController();
// create app
this.app = new sap.m.SplitApp("splitapp");
appMaster.addPage(this.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 empty page
var empty = sap.ui.xmlview("Empty", "sap.ui.demo.myFiori.view.Empty");
this.app.addPage(empty, false);
appMaster.addPage(detailPage);
return appMaster;
}

});

---code ends----

Thank you,

JK

Answers (2)

Answers (2)

junwu
Active Contributor
0 Kudos

you want to navigate to a screen, which replace your split app. or you want the splitapp displayed in full screen mode?

Jayakrishnan
Active Participant
0 Kudos

yes i need to navigate to new screen(Full screen)

jamie_cawley
Advisor
Advisor
0 Kudos

You can use

mysplitapp.setMode(sap.m.SplitAppMode.HideMode);

Regards,

Jamie

SAP - Technology RIG

Jayakrishnan
Active Participant
0 Kudos

In which file i need to add the code. i am having App.view.js as my root view and App.controller.js is my controller file where i am doing the navigation . see the code below for more information:

------code Starts------------

App.view.js:

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

sap.ui.jsview("sap.ui.demo.myFiori.view.App", {

  getControllerName: function () {

  return "sap.ui.demo.myFiori.view.App";

  },

  createContent: function (oController) {

  // to avoid scroll bars on desktop the root view must be set to block display

  this.setDisplayBlock(true);

  // create app

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

  //var FullScreenApp= 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 empty page

  var empty = sap.ui.xmlview("Empty", "sap.ui.demo.myFiori.view.Empty");

  this.app.addPage(empty, false);

  return this.app;

  }

});

App.controller.js:

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

sap.ui.controller("sap.ui.demo.myFiori.view.App", {

  /**

  * Navigates to another page

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

  * @param {sap.ui.model.Context} context The data context to be applied to the next page (optional)

  */

  to : function (pageId, context) {

  var app = this.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.view." + pageId,

  type : "XML"

  });

  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) {

  // alert("");

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

  }

});

------code ends------------

   So when i press the button , i am calling this to function with pageID and Context .

Thank you,

Regards,

JK

jamie_cawley
Advisor
Advisor
0 Kudos

You could put

app.setMode(sap.m.SplitAppMode.HideMode);

in the controller after calling

app.to(pageId);

Regards,

Jamie

SAP - Technology RIG