SAPUI5 Controller Lifecycle Methods Explained!

What are Lifecycle Methods or Lifecycle Hooks in SAPUI5 Controller?

SAPUI5 provides predefined lifecycle methods for controller. These are also called controller lifecycle hooks. These methods are

• onInit()
• onBeforeRendering()
• onAfterRendering()
• onExit()

onInit()

This method is called upon initialization of the View. The controller can perform its internal setup in this hook. It is only called once per View instance, unlike the onBeforeRendering and onAfterRendering hooks.

If you need to modify the view before it is displayed, for example bind data to view, initialize model; it can be done inside onInit() methd.

onBeforeRendering()

This method is called every time the View is rendered, before the Renderer is called and the HTML is placed in the DOM-Tree. BOLD_It can be used to perform clean-up-tasks before re-rendering._BOLD

onAfterRendering()

This method is called every time the View is rendered, after the HTML is placed in the DOM-Tree. It can be used to apply additional changes to the DOM after the Renderer has finished.

It can be used to do post-rendering manipulations of the HTML.

onExit()

This method is called upon destruction of the View. The controller should perform its internal destruction in this hook. It is only called once per View instance, unlike the onBeforeRendering and onAfterRendering hooks.

It can be used to free resources and finalize activities.

Let’s understand with the help of an example

Note: Click here http://embed.plnkr.co/VhN8sz to see the running SAPUI5 lifecycle method example. This link may not work in IE browser.

Create a SAPUI5 Hello World application. Open view (HelloWorld.view.xml) file and paste below code.

<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="com.sap.controller.HelloWorld" >

<Button
text="Destroy View and Controller"
press="onPress"/>

</mvc:View>

Open controller (HelloWorld.controller.js) file and paste below code.

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {

return Controller.extend("com.sap.controller.HelloWorld", {

onInit: function() {
         alert("onInit function called");

},

onBeforeRendering: function() {
        alert("onBeforeRendering function called");
},

onAfterRendering: function() {
        alert("onAfterRendering function called");
},

onExit: function() {
        console.log("onExit() of controller called...");
        alert("onExit function called");
},

onPress: function(Event) {
        this.getView().destroy();
}
});
});

Save and Run the project. You will get 3 alerts one by one for onInit(), onBeforeRendering() and onAfterRendering().

Click on the button “Destroy View and Controller”, this will destroy the view and controller. Hence the onExit() method will be called and you will see an alert like below.

Difference between onInit() and onBeforeRendering()

One of the main doubt that people have is the difference between onInit() and onBeforeRendering().

onBeforeRendering() is used when you want to perform something before the view is loaded, for example you want to load oData model before the view is loaded. You might wonder that this can also be done inside onInit().

The main difference is between onInit() and onBeforeRendering() is that BOLD_onInt() is only called first time_BOLD when the view is rendering. It will not be called again and again whenever the view is re rendered again. That is why onInit() is mostly used to initialize some parameters. While onBeforeRendering() is called whenever the view is re-rendered again.

Let’s say you want to get data from OData model every time you load your view so that you can show user with the real-time data. But if you did this in onIint() then user will not be able to see the changes that are made after the first call of the service(When the view is first time rendered) doesn’t matter how many time view is re-rendered as onInit() will not be called again. That’s why you should load the data in onBeforeRendering().