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

UI5
Stone stack.

A base controller is a controller with basic functionalities from which the other controllers in your SAP UI5 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.

Therefore, instead of to implement basic functionalities in each controller, the basic functionalities go into the base controller. And through inheritance, each controller inherits the basic functionalities from the base controller.

And through the inheritances, each controller has the basic functionalities. But without the need to implement the functionalities in each controller but only once in 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?

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?

The base controller goes into the controller folder in your SAP UI5 application folder structure:

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

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

// 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 BaseController needs to inherit the BaseController:

// 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);

    },

    ...

  });

});
No Comments

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

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.

Menu