4

I'm trying to create a base controller that has common methods and common onInit logic.

Using the extend method adds the methods from the base controller to the child controller, but the lifecycle methods get overwritten completely.

  • I tried using the override.onInit approach shown on this documentation page but it did not work.
  • I also tried with sap.ui.component like this but I couldn't get it to work at all.
    I'm not sure if it should work with the AMD syntax.

As far as I understood, the extension feature should replace common methods that have been overridden, but it should execute the lifecycle methods from both the base and extension controller on this respective order.

So my question are the following:

  1. Is this behavior possible to achieve? If so, what am I doing wrong?
  2. Is there a better way to implement it?

Example code:

Parent controller

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function (Controller) {
  "use strict";

  return Controller.extend("my.namespace.controller.App", {
    onInit: function () {
      console.log("reusable init");
    },

    // ...
  });
});

Child controller

sap.ui.define([
  "my/namespace/controller/App.controller"
], function (Controller) {
  "use strict";

  return Controller.extend("my.namespace.child.controller.App", {
    onInit: function () {
      console.log("extend init");
    },

    // ...
  });
});

This example logs only "extend init" when I run the application. I expected it to log both "reusable init" and "extend init" in this order.

I've omitted some code, but the main idea is represented on these two controllers. The only relevant metadata is that the base controller is abstract.

3
  • The documentation you have linked is relevant when extending default apps from SAP. For a simple BaseController you can use basic inheritance (see the answer below from bkr)
    – Marc
    Jun 13, 2021 at 17:16
  • Could you provide an mcve of what you've tried so far? And with which UI5 version is the app running? Jun 13, 2021 at 19:01
  • 1
    I understand the question now better. Thanks for the update. I guess what you were looking for was a Java-like OOP concept using the extend API in UI5. In that case, the classical BaseController approach would be appropriate. But if you want to let UI5 call the (lifecycle) methods, then you'd have to use one of the extension concepts. Jun 14, 2021 at 14:49

2 Answers 2

5

In many cases, when developing applications from scratch, the BaseController approach is sufficient as Benedikt explained, or you could try composition with many tiny modules, depending on your project.

The topic controller extension is lesser-known, yet worth to get to know what it's about and how extensions can also help us in application development.

The documentation does hint that the extension concepts usually target developers who want to extend existing applications with additional features. But extensions can be also used to reuse some logic in your own application development.

[Controller extensions] can be used [...] as a reusable part that is added to the original application. (Source)

There are currently two approaches:

  1. The older concept named "Component Configuration"
    (The extensions are declared in manifest.json or formerly in Component.js)

    • Supported by older UI5 versions.
    • Lifecycle methods are called in addition to the original ones (See table below).
    • Non-lifecycle methods, with the same name, are fully overwritten by the extension.
    • Simple and declarative, but it's missing the possibility to define a clear interface which methods can be extended in which order.

    See, this plunk for example.

  2. The newer concept called "Controller Extension"
    (Uses the module "sap/ui/core/mvc/ControllerExtension" and the methods section within controller's metadata)

    • Publicly documented since 1.56 but no samples so far.
    • Lifecycle methods are called in addition to the original ones (Same as the old approach).
    • Offers the possibility to define a clear interface:
      • Visibility (public: true | false)
      • Overridability (final: true | false)
      • Execution strategy (overrideExecution: "After" | "Before" | "Instead")
      • Allows extending extension methods in the base controller itself via the static ControllerExtension.override (.overrides preferred since 1.112).
    • Can be used to add reusable JS parts (Equivalent to the fragment concept).

    See this plunk for example.

Lifecycle execution order

In either case, UI5 executes the lifecycle methods in the following order by default:

Execution order Original controller code Extension code
1. onInit
2. onInit
3. onBeforeRendering
4. onBeforeRendering
5. onAfterRendering
6. onAfterRendering
7. onExit
8. onExit
1
  • 1
    Thank you very much for the explanation and examples, it helped me a lot! Jun 14, 2021 at 15:05
3

I didn't know there is an override mechanise in UI5 and it looks over-engineered... My guess is you are on an older version without proper support.

Anyhow, js-inheritance works out of the box. You need to call "super".

sap.ui.define([
        "example/BaseController"
    ], function (BaseController) {
        "use strict";
    
        return BaseController.extend("example.BaseController2", {
            onInit: function () {
                // this is the "super" call
                // same happens if you call super() on es6 classes
                BaseController.prototype.onInit.apply(this, arguments);
         }
    });
});

For more information have a look here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

5
  • I'm using "@ui5/cli": "^2.7.1" Jun 14, 2021 at 12:51
  • I think this approach will have the same behavior as I expect, but is not the best solution as the implementations of the child controller would need to explicitly call the parent constructor. If that is the only solution, dependency injection would probably be preferable over inheritance (I think) Jun 14, 2021 at 13:13
  • @LeonardoMeinerzRamos What UI5 version does the popup report if you press [Ctrl]+[Shift]+[Alt]+[P] from the app? Jun 14, 2021 at 14:16
  • I couldn't find the equivalent for this command on Mac, but sap.ui.version is "1.86.3" Jun 14, 2021 at 16:12
  • Thats how inheritance works in basically every program language. Obviously you need to call something if you want to have the functionality of the parent and add your own. Jun 14, 2021 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.