Skip to Content
Author's profile photo Wouter Lemaire

Navigate between single full view and split view

Hi,

After you’ve generated your custom fiori application by using the SAPWebIDE you’ll have a split view which contains a master and detail view. If you haven’t generated your application, follow previous tutorial:

Generate your custom Fiori application with SAPWebIDE On-Premise using Gateway On-Premise

The SAPWebIDE will have generated something like this. A container “App.js” which will contain your master en detail views and master view and detail view:

sapui splitapp.png

Great that you can generate a splitview! But what if you want another view before the split view? What if you want a login view? Or a tile container?

In this tutorial I’ll explain you how to achieve this. First start by creating a new view which we’ll use as a tile container. So you’ll have something like this:

sapui splitapp en full.png

We have a single full view and a split view with the master and detail view. Now we’ll need something to connect the single fulle view and the splitview. Therefore we add a new view which will act as a container for single views. We’ll place it on top of the single full view and the splitview. It will contain the “sap.m.App” component. This will enable us to connect the single full view with the splitview.

sapui splitapp final.png

We’ll use the “masterApp” to embed the single full view and the splitview. The splitview will embed the master and detail view. For the real connection we’ll need to configure the router component in the “component.js”.

To see how, just follow this tutorial:

In the next tutorial we’ll see how to organize your project before it is getting too big!

Organize your UI5 project

Kind regards,

Wouter

Assigned tags

      24 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Andreas Kunz
      Andreas Kunz

      Interesting tutorial! There's indeed a gap in UI5 when you want to have fullscreen and splitscreen pages within one application (well, no gap as in "can't do this" - your tutorial proves one can do - , but as in "not supported very easily"). And in fact this gap is supposedly being addressed soon. Not sure yet what the result will be, but think of something like a "SuperApp" that can have master pages, detail pages and fullscreen pages and you can navigate freely between them. Internally it might work just like you described it: an App as master and a SplitApp for the splitscreen pages. 🙂

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Thanks for the feedback! Already looking forward to test the "SuperApp" 🙂

      Author's profile photo Former Member
      Former Member

      Really great Video. Thanks. Nice to have in the SuperApp would be also an integrated expand/collapse button for the master view in landscape mode. Actually I'm resizing the width of the Master Sidebar on-demand 😉 .

      Author's profile photo Former Member
      Former Member

      Hi,

      thanks for the tutorial.

      I extended the example application from the Developer Guidelines with your code and I have one final question. When using the back button after switching to the split view, I'm not getting back to the overview.

      I wonder how your App.view.xml and controller look like. Is there a function to manage the navigation back to the overview?

      Or is it conflicting with MyRouter.js of that example?

      Kind regards,

      Michael

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Hi Michael,

      You could use the name of your route to navigate back:

      sap.ui.core.UIComponent.getRouterFor(this).navTo("route name",{});

      or just go back like this:

      window.history.go(-1);

      --> this has the disadvantage that when the master/detail page is your first page. This command wil trigger a go back on browser level

      To overcome this disadvantage you could use the myNavBack in the MyRouter.js

      Tha app.view.xml is generated in the previous tutorial:

      Generate your custom Fiori application with SAPWebIDE On-Premise using Gateway On-Premise

      It's almost empty 🙂

      <mvc:View

        xmlns:mvc="sap.ui.core.mvc"

        displayBlock="true"

        xmlns="sap.m">

        <SplitApp id="idAppControl" />

      </mvc:View>

      Kind regards,

      Wouter

      Author's profile photo Sung-Yen Yang
      Sung-Yen Yang

      Hi Wouter,

      Thanks for sharing this interesting how-to blog and I want to share one thing with you that it caused me half day to find the solution.

      In your demo, "TileContainer" in overview.view.xml didn't specify height, I know its default value is 100% if you don't specify particular value. But, it caused problem in my local WebIDE environment, tile just not shown on the screen if I didn't give value to height property in TileContainer. I use Chrome (version 40.0.2214.111 m) as well, don't know why this problem happen in my laptop. Thanks.

      Author's profile photo Mike Moram
      Mike Moram

      This is an excellent blog.

      Does anyone know if the same thing can be accomplished using scaffolding?  I understand the master and detail being subroutes, but in scaffolding you define fullScreenPageRoutes, masterPageRoutes, and detailPageRoutes.  Navigation from fullscreen to master/detail doesn't seem to work...

      Author's profile photo Dheeram Kallem
      Dheeram Kallem

      Yes we can do. I did from full screen to split screen and then to full screen.

      Author's profile photo Mike Moram
      Mike Moram

      Can you post an example of your Component.js?

      Author's profile photo Dheeram Kallem
      Dheeram Kallem

      Here is an example for routes:

      Index.html should launch App(which is a full screen) with id idMainAppControl, then the master and details is added through SplitContainer control with id idSplitContainerControl.

      routes: [{

                      pattern: "",

                      name: "_launch",

                      view: "Launch",

                      targetAggregation: "pages",

                      targetControl: "idMainAppControl",

                  }, {

                      pattern: "splitapp",

                      name: "_splitapp",

                      view: "SplitApp",

                      targetAggregation: "pages",

                      targetControl: "idMainAppControl",

                      subroutes: [{

                          pattern: "splitapp",

                          name: "_S1",

                          view: "Master",

                          targetAggregation: "masterPages",

                          targetControl: "idSplitContainerControl",

                          subroutes: [{

                              pattern: "splitapp/{index}",

                              name: "_S2",

                              view: "Detail",

                              targetAggregation: "detailPages",

                          },{

                              pattern: "splitapp/{index}/line/{lineIndex}",

                              name: "_S3",

                              view: "LineItem",

                              targetAggregation: "detailPages",

                          }               

                       }]

                  }, {

                      pattern: "fullscreen",

                      name: "_S4",

                      view: "FullScreen",

                      targetAggregation: "pages",

                      targetControl: "idMainAppControl",

                  }, {

                      pattern: "newline/{index}",

                      name: "_S5",

                      view: "NewLineItem",

                      targetAggregation: "pages",

                      targetControl: "idMainAppControl",

                  }]

      Author's profile photo Former Member
      Former Member
      Author's profile photo Vishal Randive
      Vishal Randive

      Hi Mike,

      Were you able to achieve full-screen - master -detail in scaffolding? If yes, please share.

       

       

      Author's profile photo Former Member
      Former Member

      This is an excellent blog. Thanks.

      I m looking for a routing sample from MD to Full Screen.Can you pls help me ?


      See the following thread:

      How to implement the Multi Flow pattern MD to FullScreen?

      Author's profile photo Former Member
      Former Member

      Hi,

      Thank you for your valuable post. i have implemented the same it is working for me. But now there is a new concept called targets in routing. i want to implement the same application with the help of targets. can you please help me in this. i was able to create full screen to full screen and Master detail page with the help of targets. but when i come to integrate both as you did above with the help of targets, i could not. Still facing problem with that. I need help in that.

      Regards,

      Saran

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi,

          I am using the master list page as my main page. In the master list page , i put one button to switch to grid view(Full screen view). So what code i need to write in my App.view.js

      This is my code

      -------------code starts--------

      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();

        // 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;

        }

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

      Thank you,

      JK

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Hmm as far as I can see you are not using the routing component or am I wrong? This is a total different approach. Maybe you should start a discussion and add some more information.

      Kind regards,

      Wouter

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi, i have created the separate thread few days back reg this question. you can refer that.

      How to Switch to Full screen view from master detail view

      Author's profile photo Vladimir Erakovic
      Vladimir Erakovic

      Hi Wouter,

      Can you please provide a source code for this example? Or can you explain me how to make application with structure like this: Login page -> Registration page (if user is not registered) -> Tiles menu page -> a number of pages for every tile (master detail or just one view pages). Is this possible and what is the root container that goes in index.html.

      Thank you in advance.

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      added an example project. You have to delete the .txt extension

      Author's profile photo Vladimir Erakovic
      Vladimir Erakovic

      Thank you Wouter,

      It's very useful example and I appreciate it, but can you add the project from this post - Navigation between single full view and master detail view?

      I also post a question regarding complex structure applications and maybe you could help me with it:

      How to structure complex application

      Best regards,

      Vladimir

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      I kinda lost the original project, but this example is comparable. It also contains navigation from single view to splitview.

      Kind regards,

      Wouter

      Author's profile photo Betty Jebakumar
      Betty Jebakumar

      Hi wouter,

      Thanks for the tutorial. I tried the same in web ide, but I am not able to navigate to master detail view. Master view is getting loaded but Detail view is not appearing. Its blank. Could you please help me. My routing Code:

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

      "routing": {

        "config": {

        "routerClass": "sap.m.routing.Router",

        "viewType": "XML",

        "viewPath": "myCompany.myApp.view",

        "controlId": "app",

        "controlAggregation": "pages",

        "clearTarget": false,

        "transition": "flip"

        },

        "routes": [{

        "pattern": "",

        "name": "worklist",

        "target": "worklist",

        "controlId": "app"

        }, {

        "pattern": "Products/{objectId}",

        "name": "object",

        "target": "object"

        }, {

        "pattern": "split",

        "name": "split",

        "view": "SplitContainer",

        "controlId": "app",

        "subroutes": [{

        "pattern": "split",

        "name": "master",

        "view": "Master",

        "controlId": "idSplitAppControl",

        "controlAggregation": "masterPages",

        "subroutes": [{

        "pattern": "Detail/{objectId}",

        "name": "detail",

        "view": "Detail",

        "controlAggregation": "detailPages"

        }]

        }]

        }],

        "targets": {

        "worklist": {

        "viewName": "Worklist",

        "viewId": "worklist",

        "viewLevel": 1

        },

        "object": {

        "viewName": "Object",

        "viewId": "object",

        "viewLevel": 2

        }

      }

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

      Blank Detail view.JPG

      Error:

      error.JPG

      Author's profile photo prasad doddi
      prasad doddi

      Hi Betty,
      Hope you doing good.
      Did you find the solution for that.
      Im working on same scenrio like created fiori master detail template with WEBIDE and now have to navigate from full screen to master detail screen.

      Thanks,
      Prasad Doddi

      Author's profile photo Anand Govardhan
      Anand Govardhan

      Hi Prasad,

      Did you manage to resolve the issue in navigation?

      Regards,
      Anand