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>

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>

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>

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

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

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

Sanjo Thomas

26 September 2016 at 01:10 ×

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

Familia Muñoz

14 November 2016 at 12:11 ×

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

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.

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.

15 November 2016 at 05:17 ×

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

18 November 2016 at 11:14 ×

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

Regards

Swagat

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

Purva

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?