Navigation between views using Routing and parameter passing between views

Hi folks,

This blog mainly explains about navigating and parameter passing between two views.

Below is the Project directory.

Steps to follow

1. Create an SAPUI5 Application Project.

INDEX.HTML

2. Create a JS file named Component.js and place it inside WebContent folder.

(It mainly comprises of four steps :Configuration, Initialization,Access and view ownership)

jQuery.sap.declare("sap.ui.demo.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.Component", {
  metadata : {
  routing : {
  config : {
  viewType : "JS",
  viewPath : "routingdemo",
  targetControl : "NavContainer",
  clearTarget : false,
  },
  routes : [
  {
  pattern : "", // which appears in URL, while you navigate
  name : "first",     // Name that is used in navTo method
  view : "FirstPage",   // this is the target view that you are navigating to
  viewPath : "routingdemo", // path of the target view
  targetAggregation : "pages" // this defines whether the target view is a [pages/content/masterpages/detailpages]
  },
 {
  pattern : "InSecondPage",
  name : "second",
  view : "SecondPage",
  viewPath : "routingdemo",
  targetAggregation : "pages"
  },
 ]
  }
  },
 init : function () {
 // 1. some very generic requires
  jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
  jQuery.sap.require("sap.ui.demo.MyRouter");
  // 2. call overridden init (calls createContent)
  sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
// 3a. monkey patch the router
  var router = this.getRouter();
  router.myNavBack = sap.ui.demo.MyRouter.myNavBack;
  // 4. initialize the router
  this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
  router.initialize();
  },
  destroy : function () {
  if (this.routeHandler) {
  this.routeHandler.destroy();
  }
  // call overridden destroy
  sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);
  },
  createContent : function () {
  // create root view
  var oView = sap.ui.view({
  id : "app",
  viewName : "routingdemo.App",
  type : "JS",
  });
var oModel = new sap.ui.model.json.JSONModel();
    
      oModel.setData(
      {
       myName : null,
        myPass : null
      }
    
      );
    
oView.setModel(oModel);
return oView;
  }
});

3. MyRouter.js (Custom Router)

jQuery.sap.declare("sap.ui.demo.MyRouter");
sap.ui.demo.MyRouter = {
  /*  * to monkey patch the router with the mobile nav back handling
  */
  myNavBack : function (route, data) {
  var history = sap.ui.core.routing.History.getInstance();
  var url = this.getURL(route, data);
  var direction = history.getDirection(url);
  if ("Backwards" === direction) {
  window.history.go(-1);
  } else {
  var replace = true; // otherwise we go backwards with a forward history
  this.navTo(route, data, replace);
  }
  },
};

4. Create an App View .

App.view.js ( In app.view we usually have a sap.m.App or sap.m.SplitApp depending upon the requirement)

sap.ui.jsview("routingdemo.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 routingdemo.App
  */
  getControllerName : function() {
  return "routingdemo.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 routingdemo.App
  */
  createContent : function(oController) {
  this.setDisplayBlock(true);
  return new sap.m.App("NavContainer");
  }
});

4. Create FirstPage View

a) FirstPage.view.js  Basic page which accepts two inputs( Name and password) on click of a button, we call a navigate function , which is wriiten in the controller part.

sap.ui.jsview("routingdemo.FirstPage", {
  getControllerName : function() {
  return "routingdemo.FirstPage";
  },
  createContent : function(oController) {
  var flexbox=new sap.m.FlexBox({direction:"Column"});
  flexbox.addItem( new sap.m.Input("name",{placeholder:"Enter UserName" value : "{/myName}"}));
  flexbox.addItem( new sap.m.Input("password",{placeholder:"Enter Password" value : "{/myPass}"}));
  flexbox.addItem( new sap.m.Button('login',{text:"Log In",
   press:function()
   {
   oController.navigate();
      }
    })
  );
  flexbox.setAlignItems("Center");
  flexbox.setJustifyContent("Center");
                  
  var page1 =new sap.m.Page({
       title: "Routing Demo",
       content:flexbox,
       });
            
  return page1;
}
});

b) FirstPage.Controller.js

(In controller we get the instance of the router in the init method and use it to navigate to the specific page. we pass the parameters between the views by using an object and binding to a modelname. We use navTo method to navigate)

sap.ui.controller("routingdemo.FirstPage", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf routingdemo.FirstPage
*/
  onInit: function()
  {
  this.router = sap.ui.core.UIComponent.getRouterFor(this);
  },
    navigate : function()
    {
 
  this.router.navTo("second");
  }
});

5. Create SecondPage View

a) SecondPage.View.js ( We can get the object in the model and use it in secondpage view ie object.myname )  object is userdefined.

sap.ui.jsview("routingdemo.SecondPage", {
  getControllerName : function() {
  return "routingdemo.SecondPage";
  },
  createContent : function(oController) {
 var flexbox=new sap.m.FlexBox({direction:"Column"});
  flexbox.addItem( new sap.m.Text({text : "{/myName}"}));
  flexbox.addItem( new sap.m.Text({text : "{/myPass}"}));
  flexbox.setAlignItems("Center");
        flexbox.setJustifyContent("Center");
                  
        var page2 =new sap.m.Page({
                       
                            content:flexbox,
                            showNavButton: true,
                            navButtonPress: function(){ oController.handleNavBack(); },
                       
        });
            
        return page2;
   
}
});

b) SecondPage.controller.js ( we navigate back by using myNavBack method ,  which we have defined in our MyRouter.js , which is a custom Router)

sap.ui.controller("routingdemo.SecondPage", {
  onInit: function() {
  this.router = sap.ui.core.UIComponent.getRouterFor(this);
  },
  handleNavBack : function(){
  this.router.myNavBack("first");
}
});

And the final output .

You can see the change in the URL,(InsecondPage). You can navigate Back by clicking on the back icon.

Hope this Blog helps.

Regards

Indrajith