Extending Apps in SAPUI5 - Controller Extension



In my previous blog, you learned how to extend a view, modify and replace a view, and in this blog you will learn about how to extend a controller in sapui5. SAPUI5 supports the extension of a base controller by merging the delivered standard controller with a custom controller on JavaScript.

The SAPUI5 controller extension concept does not use inheritance. Instead, methods of the custom controller override standard methods with the same name. The following controller lifecycle methods are, however, an exception to this rule: onInit, onExit, onBeforeRendering, onAfterRendering. For these methods, the controller methods of your custom application are called either after (for onInit and onAfterRendering), or before (for onExit and onBeforeRendering) the standard lifecycle methods.

The following examples show, how controller extension concept in SAPUI5 works. The following code snippet shows the standard controller App.controller.js of the delivered standard application:

sap.ui.controller("samples.components.ext.sap.App", {
onInit : function () {
console.log("samples.components.ext.sap.App - onInit");
},

Random: function() {
alert("this is an original standard action");
},

StandardFunction: function() {
alert("this is another original standard action");
}
});
https://www.blogger.com/blogger.g?blogID=3826368468004556615#editor/target=post;postID=5955897131642738070;onPublishedMenu=overviewstats;onClosedMenu=overviewstats;postNum=0;src=link
The following code snippet represents the custom controller CustomApp.controller.js:


sap.ui.controller("samples.components.ext.customer.CustomApp", {
onInit : function () {
console.log("samples.components.ext.customer.CustomApp - onInit");
},

Random: function() {
alert("this is a customer action");
},

CustomFunction: function() {
alert("this is another customer action");
}
});


The following customizing merges the two controllers:



customizing: {
"sap.ui.controllerExtensions": {
"samples.components.ext.sap.App": {
controllerName: "samples.components.ext.customer.CustomApp"
}
},

As a result, the samples.components.ext.customer.CustomApp controller functions are merged when the controller samples.components.ext.sap.App is called. After initialization, the log contains the following messages:


samples.components.ext.sap.App - onInit

samples.components.ext.customer.CustomApp – onInit


The Random method of the new controller overwrites the doSomething method of the standard controller. Thus, if the method is invoked, an alert popup with the following text appears: this is a customer action.
The StandardFunction method remains available without changes, as no method with the same name exists in the new controller.
The CustomFunction method is additionally available and you can use it, for example, in a view extension.
The controller extensions are applied to all controllers with the specified name within the customized component, regardless of whether the controller is instantiated explicitly or belongs to a view.


In view, there are extension points, similarly in controllers, there are hooks. Hooks are extension points in the controller code that are used to make controller extensions more stable. So, in the next tutorial, you will learn how to place hooks in the controllers.


Previous
Next Post »