This is how to execute a method every time a view is displayed in SAPUI5.
There are two ways to accomplish this.
Learn both from this article.
Let’s get started!
How to Call a Method Every Time a View Is Displayed in SAPUI5?
SAPUI5 offers two ways to execute code every time a view is invoked:
- Life cycle hooks in a view’s controller
- Routing mechanisms such as the route matched events
For example, to call a custom method, or to do a CRUD request (create, read, update, delete).
#1 SAPUI5 Life Cycle Hooks in a View’s Controller
In SAPUI5, there are two lifecycle hooks for views’ controllers that call custom code every time a view is invoked:
- onBeforeRendering: execute code every time before a view is re-rendered.
- onAfterRendering: execute code every time a view is rendered.
Besides the onBeforeRendering and onAfterRendering life cycle hooks, there are also the onInit and onExit hooks.
On the other hand, the onBeforeRendering and onAfterRendering hooks get only called once for each view instance: after the instantiation and the destruction of a view.
Here’s 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);
}
...#2 SAPUI5 Routing Mechanisms: Route Matched and Route Pattern Matched Events
If your application uses the SAPUI5 routing framework (it should), you can make use of its mechanisms to invoke your own code every time a view is called.
An SAPUI5 URL has an URL hash.
For example, if the URL is webapp/index.html#/products/3, the URL hash is #/products/3.
The routeMatched and routePatternMatched events check the URL hash against the routing settings in the manifest.json.
Every time the URL hash matches, the event will get fired.
Every time you navigate to a view and hence, its URL, a router event fires.
To make it more clear:
- On the one hand, the router events check if the correct URL for a view is called and includes, for example, a valid parameter such as an object ID.
- On the other hand, that router events get fired whenever a view is invoked via a valid routing URL.
Confused whether to use routeMatched or routePatternMatched?
Here’s the difference between routeMatched and routePatternMatched events:
- routeMatched: Gets called every time the hash of the URL matches any route, sub-route, or nested-route of the routing pattern of the current view.
- routePatternMatched: Gets called every time the hash of the URL matches the route of the routing pattern of the current view.
Two steps are necessary to set up the router events:
- Set up routing in the SAPUI5 application manifest.json.
- Set up the events in the XML view controller.
#1 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 manifest.json above:
- <your_app># (Home)
- <your_app>#/products (Products)
- <your_app>#/products/product/<productId> (Product)
To clarify the differences between the routeMatched and routePatternMatched events, which one will fire when the routes or patterns are successfully matched 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}:
- routeMatched fires for:
- <your_app>#
- <your_app>#/products
- <your_app>#/products/product/<productId>
- routePatternMatch fires for:
- <your_app>#/products/product/<productId>
#2 Set up the Events in the XML View’s Controller
routeMatched and RoutePatternMatched go in the onInit method 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
}
});
});