This is about what a SAPUI5 base controller is.

You’ll learn:

• What a base controller is
• How to use a base controller

So if you want to make use of base controller (what you should do), then this article is for you.

Let’s dive right in!

What Is a Base Controller and How to Use It in SAPUI5?

A base controller is a controller with basic functionalities from which the other controllers in your SAPUI5 application inherit.

The base controller holds basic functionalities that are used across multiple controllers.

Since each controller inherits from the base controller, they all have the same basic functions as well.

But without the need to implement it in each controller, just in the base controller.

Additionally, if you make changes in the base controller, the changes get reflected in each controller.

Therefore, instead of implementing basic functionalities in each controller, the basic functionalities go into the base controller.

For example, a basic functionality is the this.getView().getModel() method. Would it not be handy to have a method which says this.getModel() instead of this.getView().getModel() in your controllers?

Saves this .getView() every time you want to get the model in a controller.

Or, another example, you need a one-and-the-same method that calculates something in multiple controllers.

Would it not be better to have that method in one place instead of in every controller that uses it?

Here’s how to use the base controller:

The base controller goes in the controller folder in your SAPUI5 application folder structure:

|— webapp
|—— controller
|——— BaseController.js
|——— View1.controller.js
|—— i18n
|—— localService
|—— model
|—— test
|—— view
|——— View1.xml.view

The base controller itself is just another JavaScript file and it does not have the .controller prefix. Just BaseController.js and not BaseController.controller.js.

Here’s an example of a base controller:

// in your base controller
 
sap.ui.define([

  "sap/ui/core/mvc/Controller",
  "sap/ui/core/UIComponent"
], function (Controller, UIComponent) {

  "use strict";
 
  return Controller.extend("my.application.controller.BaseController", {
 
    // some basic functionalities
 
    // just this.getRouter() ...
    getRouter: function() {
     
      // ... instead of
      return UIComponent.getRouterFor(this);
 
    },
 
    // just this.getModel() ...
    getModel: function(sName) {
   
      // ... instead of
      return this.getView().getModel(sName);
 
    },
 
    // just this.setModel() ...
    setModel: function(oModel, sName) {
 
      // ... instead of
      return this.getView().setModel(oModel, sName);
 
    },
 
    // just this.getResoureBundle() ... 
    getResourceBundle: function () {
 
      // ... instead of
      return this.getOwnerComponent().getModel("i18n").getResourceBundle();
 
    },
 
    // calculate something
    randomCalculations: function(fValue1, fValue2) {
 
      // do some calculations
 
    }
 
  });
 
});

Each controller that is supposed to use basic functionalities from the base controller needs to inherit the base controller.

Here’s how:

// in your controller
 
sap.ui.define([
  "./BaseController"
], function(BaseController) {

  "use strict";
 
  return BaseController.extend("my.application.controller.BaseController", {

     ...

  });

)};

Then you can use the base controller methods in the controller:

// in your controller
 
sap.ui.define([
  "./BaseController"
], function(BaseController) {

  "use strict";
 
  return BaseController.extend("my.application.controller.BaseController", {
 
    ...
 
    onAfterRendering: function() {
       
      // use functionalities inherited from the base controller
       
      // instead of UIComponent.getRouterFor(this)
      var oRouter = this.getRouter();
 
      // instead of this.getView().getModel(sName)
      var oModel = this.getModel();
  
      // instead of this.getOwnerComponent().getModel("i18n").getResourceBundle()
      var oResourceBundle = this.getResourceBundle();
 
      // instead of implementing the method in this controller on its own
      var oRandomValue = this.doRandomCalculations(1.1, 2.2);
 
    },
 
    ...
 
  });
 
});