SAPUI5: How to Call a Method Every Time a View Is Displayed?

🏷️

This is about how to execute a method every time a view is displayed in SAPUI5.

There are two options to achieve this.

Learn both with this article.

Let’s get started!

How to Execute a Method Every Time a View Is Displayed in SAPUI5?

Two options exist in SAPUI5 to execute code every time a view is invoked:

  1. Life cycle hooks in a view’s controller
  2. Routing mechanisms such as the route matched events

For example, to call a custom method, or to do a CRUD (create, read, update, delete) request.

SAPUI5 Lifecycle Hooks in a View’s Controller

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

  1. onBeforeRendering: execute code every time before a view is re-rendered
  2. onAfterRendering: execute code every time a view is rendered

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

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

// in your controller
...
 
// hook gets invoked before the view gets rendered
onBeforeRendering: function() {
  
  this.log("view gets rendered);
  
},
 
// hook gets invoked after the view is rendered  
onAfterRendering: function() {
  
      this.log("view is rendered);
  
},
  
log: function(sMessage) {
  
  sap.base.Log.info(sStatus);
     
}
 
...

SAPUI5 Routing Mechanisms—Route Matched and Route Pattern Matched Events

If your application uses the SAPUI5 routing framework (it should), 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.

The routeMatched and routePatternMatched events can check the URL hash against the routing settings in the manifest.json. And every time the URL hash is valid the event gets fired. Therefore, every time you navigate to a view and hence, its URL gets invoked such a router event fires.

Again:

  1. On the one hand, the 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.

Confused whether you should use routeMatched or routePatternMatched?

Here is the difference between the routeMatched and the routePatternMatched events:

  1. routeMatched: 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: 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 SAPUI5 application in the manifest.json
  2. Set up the events in the controller of the XML view

Set Up Routing in the manifest.json

The routing of an SAPUI5 application and its routes and patterns for its views are set up in the manifest.json.

For example:

// in your manifest.json
 
...
     
"sap.ui5": {
     
  ...
 
  "routing": {
       
    "config": {
 
      ...
       
    },
       
    "routes": [{
       
      "pattern": "",
      "name": "Home",
      "target": "home"
      
    }, 
 
    {
     
      "pattern": "products",
      "name": "Products",
      "target": "products"
    
    }, 
 
    {
     
       "pattern": "products/{productId}",
       "name": "Product",
       "target": "product"
 
    }],
 
    "targets": {
     
      "home": {
     
        "viewId": "home",
        "viewName": "Home"
 
      },
         
      "employees": {
                     
        "viewId": "products",
        "viewName": "Products"
                 
      },
     
      "employee": {
                     
         "viewId": "product",
         "viewName": "Product"
 
       }
             
    }
         
  }
 
}

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

  1. <your_app># (Home)
  2. <your_app>#/products (Products)
  3. <your_app>#/products/product/<productId> (Product)

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

routeMatched and RoutePatternMatched go into the onInit mehtod of a controller.

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>.

First, an example for the routeMatched event:

// in the Product controller
// manifest.json routing pattern: products/{productId}
// URL: <your_app>#/products/product/<productId>
// URL hash: #/products/product/<productId>
 
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
 
    }
  
  });
 
});

Second, an example for the routePatternMatch event:

// in the Product controller
// manifest.json routing pattern: products/{productId}
// URL: <your_app>#/products/product/<productId>
// URL hash: #/products/product/<productId>
 
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
 
    }
  
  });
 
});

🙌 More Articles

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

Leave a Comment

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.
You need to agree with the terms to proceed

Menu