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

🏷️

This is about what a base controller in SAPUI5 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.

Therefore, the base controller holds basic functionalities which occur in multiple controllers. And because each controller inherits from the base controller, each controller features those basic functionalities then. But without the need to implement the functionalities in each controller but only once in the base controller.

Plus, if you want to make any changes in such as function in the base controller, the changes get reflected in each controller.

Therefore, instead of to implement 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 use it.

Or another example, you need a method which calculates a something in multiple controllers. Would it not be handy to have that method in one place instead of to implement it in each controller that uses it?

Here is how you use the base controller:

The base controller goes into 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.

Let’s take a look at an example 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 which is supposed to use the basic functionalities from the base controller needs to inherit the base controller:

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

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

     ...

  });

)};

Then you are good to go to 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);
 
    },
 
    ...
 
  });
 
});

🙌 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