UI5
No Comments

How to Call a Method Every Time When a View Is Displayed in SAP UI5?

Orange handset.

Two options exist in SAP UI5 to execute code every time a view is invoked, for example, to call a custom function or method, or do a CRUD (create, read, update, delete) statement.

The two options to invoke code every time a view is called are:

  1. lifecycle hooks in a view’s controller
  2. routing mechanisms such as the route matched events

Lifecycle Hooks in a View’s Controller

In SAP UI5 exist two lifecycle hooks in a view’s controller to call custom code every time a view is invoked:

  1. To execute code every time before the view is re-rendered, put the code in the view’s controller onBeforeRendering lifecycle hook.
  2. To execute code every time the view is rendered, put the code in the view’s controller onAfterRendering lifecycle hook.

Besides the onBeforeRendering and onAfterRendering hooks exist the onInit and onExit lifecycle hooks in a controller. But on the contrary to the onBeforeRendering and onAfterRendering hooks, the onInit and onExit hooks get only called once for each view instance – after the instantiation and the destroying of a view.

Here is an example of how to use the onBeforeRendering and onAfterRendering hooks in a controller:

// in your controller
 
sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
  
  return Controller.extend("my.app.controller.View1", function() {

    // hook gets invoked before the view gets rendered
    onBeforeRendering: function("view gets rendered") {
 
      this._console();
 
    },

    // hook gets invoked after the view is rendered  
    onAfterRendering: function("view is rendered") {
 
      this._console();
 
    },
 
    _console: function(sStatus) {
 
      sap.base.Log.info(sStatus);
    
    }

  });
  
});

Routing Mechanisms – Route Matched and Route Pattern Matched Events

If your application uses the SAP UI5 routing framework, then you can make use of its mechanisms to invoke custom code every time a view gets called.

An URL of an SAP UI5 application has an URL hash. For example, if the URL is …

webapp/index.html#/products/3

… then the URL hash is …

#/products/3

That URL hash can be checked via events of the SAP UI5 router. And every time the URL hash is valid an event gets fired. Therefore, every time a view gets called and hence, its URL gets invoked such a router event fires.

  1. On the one hand, that router events check if the correct URL for a view is called and contains, for example, a valid parameter such as an object ID.
  2. And on the other hand, that router events get fired every time a valid URL invokes the view.

Use the routeMatched or routePatternMatched event of the router:

  1. routeMatched event: Gets called every time the hash of the URL matches any route, sub-route, or nested-route of the pattern of the current view.
  2. routePatternMatched event: Gets called every time the hash of the URL matches the route of the pattern of the current view.

Two steps are necessary to set up the router events:

  1. set up routing in the SAP UI5 application in the manifest.json
  2. set up the events in the controller of the XML view

Set Up Routing in the SAP UI5 Application in the manifest.json

The routing of an SAP UI5 application and its routes and patterns for its views are set up in the manifest.json. For example:

// routing setup in the manifest.json

{
  "_version": "1.12.0",
  
  "sap.app": {

    ...
  
  },
	
  "sap.ui": {
    
     ...
  
  },
	
  "sap.ui5": {
    
    ...

    "routing": {
      
      "config": {

        ...
      
      },
      
      "routes": [{
      
        "pattern": "",
        "name": "rootHome",
        "target": "home"
     
      }, 

      {
    
        "pattern": "products",
        "name": "productsList",
        "target": "products"
   
      }, 

      {
	
        "pattern": "products/{productId}",
        "name": "product",
        "target": "product"

      }],

      "targets": {
	
        "home": {
	
          "viewId": "home",
          "viewName": "Home"

        },
        
        "employees": {
					
          "viewId": "productsList",
          "viewName": "ProductsList"
				
        },
	
        "employee": {
					
          "viewId": "product",
          "viewName": "Product"

        }
			
      }
		
    }

  }

}

Three valid routes and patterns are defined in the above manifest.json:

  1. <your_app>#
  2. <your_app>#/products
  3. <your_app>#/products/product/<productId>

To clarify further the difference between the routeMatched and routePatternMatched events, which event would fire for which route or pattern in the following.

For example, the events are attached to the router in the controller of the Product.view.xml which has the pattern products/{productId}:

  1. routeMatched would fire for:
    • <your_app>#
    • <your_app>#/products
    • <your_app>#/products/product/<productId>
  2. routePatternMatch would fire for:
    • <your_app>#/products/product/<productId>

Set Up the Events in the Controller of the XML View

Set up in the controller of the XML view one of the routers events – routeMatched or RoutePatternMatched.

For example, the controller of the product view for which a route and pattern was set up above in the manifest.json.

The route for the Product.view.xml is <your_app>#/products/product/<productId> and the URL hash is #/products/product/<productId> as stated in the manifest.json.

The XML view itself stays as it is. The router events need to be implemented in the view’s controller. First, the routeMatched event …

// Product.view.xml controller
// manifest.json routing pattern: products/{productId}
// URL: <your_app>#/products/product/<productId>
// URL hash: #/products/product/<productId>
// routeMatched event

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
 
  return Controller.extend("my.app.controller.products.Product", function() {
 
    onInit: function() {

      var oRouter = this.getRouter();

      // attach routeMatched event
      oRouter.getRoute("product").attachRouteMatched(this._onRouteMatched, this);

    },

    _onRouteMatched: function(oEvent) {

      // gets called for ...#/
      // gets called for ...#/products/
      // gets called for ...#/products/Product/<productId>
      // for example: ...#/products/Product/1 . 
      // or #/products/Product/123

    }
 
  });

});

… and second, the routePatternMatch event …

// Product.view.xml controller
// manifest.json routing pattern: products/{productId}
// URL: <your_app>#/products/product/<productId>
// URL hash: #/products/product/<productId>
// routePatternMatched event

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
 
  return Controller.extend("my.app.controller.products.Product", function() {
 
    onInit: function() {

      var oRouter = this.getRouter();

      // attach routePatternMatched event
      oRouter.getRoute("product").attachRoutePatternMatched(this._onRoutePatternMatched, this);

    },

    _onRoutePatternMatched: function(oEvent) {

      // gets called for ...#/products/Product/<productId>
      // for example: ...#/products/Product/1
      // or ...#/products/Product/123

    }
 
  });

});

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu