Routing in Full Screen Application



Routing in Application
Here, we will implement routing in a full screen application. The scenario is, there would be 3 Pages, and we will show navigation to every page through buttons.



Follow these simple steps:
1.       Create a SAPUI5 Project, name it accordingly.

Here, I have named it as “nav”, you can choose your own project name.

2.       Create 3 views and 3controllers, since we are showing navigation among these 3 pages.

Here, I have created 3 views and 3 controllers with the name new.view.js, new2.view.js, new3.view.js and new.controller.js, new2.controller.js, new3.controller.js.

3.       Start coding in the index.html file for the adding the routes. This is not the best way for routing, since we add the routes in component.js file, which is made separately. Still, in this project we will add routes in index.html file.
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">
            </script>
            <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

            <script>
           
                        sap.ui.localResources("nav");//we have provided the local path,                                                                   //else we will have to define the full path in the routes every time.
                        var app = new sap.m.App("appId");
                        app.placeAt("content");
                       
                 var myroutes = [{
                   
                 pattern: "",
                 name:"new",
                 view:"nav.new",
                 viewType:sap.ui.core.mvc.ViewType.JS,
                 targetControl: "appId",
                 clearTarget: true,
                 callback: function(){
                   myCallback(this);
                 }
                 },
                 {
                   
                     pattern: ["new2","new2"],
                     name:"new2",
                     view:"nav.new2",
                     viewType:sap.ui.core.mvc.ViewType.JS,
                     targetControl: "appId",
                     clearTarget: true,
                     callback: function(){
                         myCallback(this);
                     }
                
                 },
{
                   
                     pattern: ["new3","new3"],
                     name:"new3",
                     view:"nav.new3",
                     viewType:sap.ui.core.mvc.ViewType.JS,
                     targetControl: "appId",
                     clearTarget: true,
                     callback: function(){
                         myCallback(this);
                     }
                
                 }
                 ];
                
                 var myCallback = function($this)
                 {
                   var viewId = "id" + $this.name;
                   var view = sap.ui.getCore().byId(viewId);
                   
                 if(view == undefined){
                   view = sap.ui.view({
                         id:viewId,
                         viewName:$this.view,
                         type: sap.ui.core.mvc.ViewType.JS
                   });
                   
                   app.addPage(view);
                 }
                 app.to(viewId);
                 };
                
                 var router = new sap.ui.core.routing.Router(myroutes);
                 router.register("appRouter");
                 router.initialize();
                
                
                
            </script>

      </head>
      <body class="sapUiBody" role="application">
            <div id="content"></div>
      </body>
</html>

·         Here callback function defines the default view, or if the view is not found then what viewhas to be loaded.
·         We define the router using the class sap.ui.core.routing.Router(myroutes)
·         Then we register the router, so that it could be used anywhere within the application.
·         Then we Initialise the router.

4.       Create buttons in each Page, for navigating from one Page to another.

new.view.js
sap.ui.jsview("nav.new", {
      getControllerName : function() {
            return "nav.new";
      },

       
      createContent : function(oController) {
        var button = new sap.m.Button({
            text: "to view 2",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new2");
            }
        }) ;
    
        return new sap.m.Page({
                  title:"Page 1",
                  content: [
button
                  ]
            });
    }
}); 


new2.view.js
            var button1 = new sap.m.Button("button1", {
            text: "to view 3",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new3");
            }
        }) ;
            var button2 = new sap.m.Button("button2", {
            text: "to view 1",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new");
            }
        }) ;
Place the buttons in page’s content.
new3.view.js
var button3 = new sap.m.Button("button3" ,{
            text: "to view 2",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                var oHashChanger = new sap.ui.core.routing.HashChanger();
                oHashChanger.setHash(oRouter.getURL("new2"));
            }
        }) ;

Output
Page 1
Page 2
Page 3
Hope it Helped!!! Thanks…..

Previous
Next Post »

7 comments

Click here for comments
Anonymous
admin
27 May 2016 at 06:07 ×

Awesome bro and keep updating

Reply
avatar
Sanjo Thomas
admin
28 May 2016 at 05:13 ×

Happy to know, you like it!

Reply
avatar
Unknown
admin
18 July 2016 at 05:58 ×

Hey, i'm a new bee to sapui5.
can anyone help me with XML views.

Reply
avatar
Sanjo Thomas
admin
18 July 2016 at 21:39 ×

Hi Farooq, XML views are the recommended by SAP, rather than using javascript views in sap ui5.

Unlike Javascript view, where you can write both UI and backend logic in the JS view, but in XML view only the UI is mentioned in the XML views and the logic is written in its controller.js.

So I would recommend you to start working with XML views. Take the help of SAPUI5 explored https://sapui5.netweaver.ondemand.com/sdk/explored.html. In this see the sample code for important controls like list, table etc. and then you will get a better understanding regarding xml views.

Reply
avatar
Unknown
admin
13 December 2016 at 08:21 ×

Very much helpful.

Reply
avatar
Unknown
admin
17 February 2017 at 03:05 ×

Uncaught TypeError: sap.ui.core.routing.Router is not a constructor
i am getting this error while executing the index.html\

Reply
avatar