Routing in Split Application

Routing in Split Application
Here, we will implement routing in a Split screen application. The scenario is, there would be 3 Pages, one is the master Page and other two are the detail Pages and we will show navigation to one detail page to another through the click of a list Item on the first detail page.

Routing in general and within a full screen Application

 Routing Within Split Application



Follow these simple steps:
1.       Create a SAPUI5 Project, name it accordingly.
Here, I have named it as Splitapp_routing
Create 4 views and controllers.
·         App.view.js and App.controller.js
·         masterpage.view.js and masterpage.controller.js. 
·         detailpage.view.js and detailpage.controller.js
·         detailpage1.view.js and detailpage1.controller.js
 I have defined routes in the Component.js this time unlike my last post, where I have defined the routes in index.html.
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 src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
      data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-xx-bindingSyntax="Complex"
      data-sap-ui-resourceroots='{
"com.Spiltapp_routing":"./"
}'
      data-sap-ui-preload='async'>
            </script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>
            sap.ui.getCore().attachInit(function (){
            new sap.m.Shell("Shell",{
                  title:"Routing",
                  app: new sap.ui.core.ComponentContainer({
                        name : 'com.Spiltapp_routing'
                  })
            }).placeAt("content");
            })
            </script>

</head>
<body class="sapUiBody" role="application">
      <div id="content"></div>
</body>
</html> 
App.view,js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.App", {

      /** Specifies the Controller belonging to this View.
       * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
       * @memberOf spiltapp_routing.App
       */
      getControllerName : function() {
            return "com.Spiltapp_routing.spiltapp_routing.App";
      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
       * Since the Controller is given to this method, its event handlers can be attached right away.
       * @memberOf spiltapp_routing.App
       */
      createContent : function(oController) {
            this.setDisplayBlock(true);
            this.oApp = new sap.m.SplitApp("SplitApp",{});

            return this.oApp;
      }

});
masterpage.view.js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.masterpage", {
     
      getControllerName : function() {
            return "com.Spiltapp_routing.spiltapp_routing.masterpage";
      },
      createContent : function(oController) {
           

                        var list = new sap.m.List("lists", {
                  items : {
                        path : "/Product",
                        template : new sap.m.ObjectListItem("abc", {

                              title : "{Product Name}",
                              number : "{Price}",
                              intro : "{Plant}",
                              icon : "{image}",
                              type : "Active",

                              attributes : [ {
                                    text : "{Product ID}"
                              }, {
                                    text : "{value}"
                              } ],

                              firstStatus : {

                                    text : "{Status}"
                              },

                              press : function(oEvent) {
                                    oController.itempressed();
                              }})
}
           
});
            return new sap.m.Page({
                  title: "default Master",
                  content: [
                            list
                 
                  ]
            });
      }});
 masterpage.controller.js
onInit: function() {
            var model1 = new sap.ui.model.json.JSONModel();
            model1.loadData("model/detail.json");
           sap.ui.getCore().setModel(model1);
   },   
itempressed: function(oEvent) { 
            debugger;
              // Get instance of router
              router = sap.ui.core.routing.Router.getRouter("appRouter");       
              router.navTo("detailpage"); 
           } 
Detailpage.view.js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.detailpage", {

      getControllerName : function() {
            return "com.Spiltapp_routing.spiltapp_routing.detailpage";
      },
      createContent : function(oController) {
            var list = new sap.m.List({
                  items : {
                        path : "/Product",
                        template : new sap.m.ObjectListItem({

                              title : "{Product Name}",
                              number : "{Price}",
                              intro : "{Plant}",
                              icon : "{image}",
                              type : "Active",

                              attributes : [ {
                                    text : "{Product ID}"
                              }, {
                                    text : "{value}"
                              } ],

                              firstStatus : {

                                    text : "{Status}"
                              },

                              press : function() {
                                    var oRouter = sap.ui.core.routing.Router
                                                .getRouter("appRouter");
                                    oRouter.navTo("detailpage1");

                              }
                        })
                  }

            });
           
            return new sap.m.Page({
                  title: "Default Detail",
           
                  content: [
                            list
                 
                  ]
            });
      }

});

detailpage.controller.js
onInit: function() {
            var model1 = new sap.ui.model.json.JSONModel();
            model1.loadData("model/detail.json");
           sap.ui.getCore().setModel(model1);
      },
detailpage1.view.js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.detailpage1", {

      getControllerName : function() {
            return "com.Spiltapp_routing.spiltapp_routing.detailpage1";
      },
      createContent : function(oController) {
            return new sap.m.Page({
                  title: "2nd detailpage",
                  showNavButton: true,

                  navButtonTap:function(){
                        var oRouter = sap.ui.core.routing.Router.getRouter("appRouter"); 
                        window.history.go(-1);
                  },
                  content: [

                            ]
            });
      }

});
detail.json
{
    "Product": [
        {   "image": "model/bag.jpg",
           
            "Product ID": "123",
            "Price": "321",
            "Product Name": "Bag",
            "value":"10",
            "Plant":"bags limited",
            "Status":"available"
        },
        {"image": "model/watch.png",
            "Product ID": "124",
            "Price": "322",
            "Product Name":"watch",
            "value":"7",
            "Plant":"watch limited",
            "Status":"unavailable"
        },
        {"image": "model/pen.png",
            "Product ID": "125",
            "Price": "323",
            "Product Name": "Pen",
            "value":"50",
            "Plant":"pen limited",
            "Status":"available"
        },
        {"image": "model/laptop.png", 
        "Product ID": "126",
            "Price": "324",
            "Product Name": "Laptop",
            "value":"15",
            "Plant":"laptop limited",
            "Status":"available"
        },
    { "image": "model/pencil.png",
    "Product ID": "127",
            "Price": "325",
            "Product Name": "pencil",
            "value":"10",
            "Plant":"pencil limited",
            "Status":"unavailable"
        },
   
    { "image": "model/bulb.png",
     "Product ID": "128",
            "Price": "326",
            "Product Name": "bulb",
            "value":"10",
            "Plant":"bulb limited",
            "Status":"available"
        }
   
   
   
    ]
   
   
}

Component.js

jQuery.sap.declare("com.Spiltapp_routing.Component");
sap.ui.core.UIComponent.extend("com.Spiltapp_routing.Component",{
    metadata : {
        rootView : "com.Spiltapp_routing.splitapp_routing.App",
        routing : {
       
            config : {
                viewType:"JS",  
                targetAggregation:"detailPages", 
                clearTarget : false 
            },
            routes : [

                      {
                pattern : "",
                name : "masterpage",
                view : "com.Spiltapp_routing.spiltapp_routing.masterpage",
                targetAggregation : "masterPages",
                targetControl : "SplitApp",
               
                subroutes : [{
                    pattern : "",
                    name : "detailpage",
                    view : "com.Spiltapp_routing.spiltapp_routing.detailpage",
                },
                {
                    pattern : "detailpage1",
                    name : "detailpage1",
                    view : "com.Spiltapp_routing.spiltapp_routing.detailpage1",
                }

              ]
            },
            {  
                pattern: "masterpage1",
                name : "masterpage1",
                view : "masterpage1",
                targetAggregation : "masterPages",
                targetControl : "SplitApp",
               
            }
            ]

                     
       
        }},
                     
       
   

init:function(){
    debugger;
    //router and hashchanger libraries
    jQuery.sap.require("sap.ui.core.routing.History");
    jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
   
    //call create content
    sap.ui.core.UIComponent.prototype.init.apply(this);
   
    var router = this.getRouter();
    this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
    router.register("appRouter");  // Assign a name to Router, so that we can access it in all controllers by using this name 
    router.initialize(); // Initialise the Router 

},

}
        );

com.Spiltapp_routing.Component.prototype.createContent = function(){
    debugger;
    var oview = sap.ui.view({id:"app",viewName:"com.Spiltapp_routing.spiltapp_routing.App",type:"JS",viewData:{ component:this }});
    var oModel = new sap.ui.model.json.JSONModel("model/detail.json");
    oview.setModel(oModel);
    return oview;
}; 

Here, in the Json, I have used many .png and .jpg images, you can use your own images.

Output


Hope, it helped. Do comment in the comment section if you liked this tutorial.
Thanks!!!

Previous
Next Post »

10 comments

Click here for comments
phani
admin
26 September 2016 at 00:49 ×

Hi. Good post

Could you please include Componenet.js file in this thread

Reply
avatar
Sanjo Thomas
admin
26 September 2016 at 01:10 ×

Sorry I missed it. Now I have updated it. Check it now.

Reply
avatar
14 November 2016 at 12:11 ×

Hi, Could you upload the code please, I would appreciate it very much :)

Reply
avatar
14 November 2016 at 12:28 ×

I change some names in controllers and views, but I can not make it work: /, if you have a little time, you could help me please, I would appreciate it a lot

I have the next error :
library-preload.js:522 Uncaught Error: failed to load 'view/App.view.js' from ../../resources/view/App.view.js: 404 - Not Found(…)

My app view exists.

Reply
avatar
Sanjo Thomas
admin
14 November 2016 at 20:51 ×

Hi, send me your demo project to sapui5tutors@gmail.com

I will check what is the error that you are facing.

Reply
avatar
15 November 2016 at 05:17 ×

Thank you. I send the project to your email from franciscobarra.sep@gmail.com

Reply
avatar
18 November 2016 at 11:14 ×

Hi, Sorry for the inconvenience, but have you been able to see my code by accident?

Regards

Reply
avatar
Swagat
admin
17 January 2018 at 04:49 ×

Their is a Spelling error in Component.js because of which "404 Not found" or "failed to load" is coming.

(between split and split.)

Given one :-

metadata : {
rootView : "com.Spiltapp_routing.splitapp_routing.App",
routing : {

correctone:-

metadata : {
rootView : "com.Spiltapp_routing.spiltapp_routing.App",
routing : {

Reply
avatar
Purva
admin
21 May 2019 at 00:12 ×

Hello, I am trying to use split app. But when I use the mobile view I get detail page first. I want master page to be displayed when I open the application on mobile view. Could you please help me with this asap?

Reply
avatar
Unknown
admin
9 September 2019 at 13:45 ×

How to add search functionality in master page if we use js view

Reply
avatar