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

To report this post you need to login first.

23 Comments

You must be Logged on to comment or reply to a post.

  1. 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. 🙂

    (0) 
      1. Matthieu Pelatan

        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 😉 .

        (0) 
  2. Michael Klopf

    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

    (0) 
    1. Wouter Lemaire 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

      (0) 
  3. 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.

    (0) 
  4. 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…

    (0) 
        1. 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”,

                      }]

          (0) 
  5. Saran Kumar

    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

    (0) 
  6. 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

    (0) 
    1. Wouter Lemaire 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

      (0) 
  7. 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.

    (0) 
      1. 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

        (0) 
        1. Wouter Lemaire 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

          (0) 
  8. 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

    (0) 
  9. 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

    (0) 

Leave a Reply