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

🏷️

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);
 
    },
 
    ...
 
  });
 
});

🔥 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. 

📚 More Articles

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

🚀 Upgrade Your Work Experience With Altwork (Welcome to the Future)

altwork_picture_2

The Altwork Station redefines how people interact with their computers by allowing the computer screen and keyboard to physically conform to support the user’s body while working long hours on a computer.

Submission received, thank you!

Close Window