Issue extending a controller that extends another controller

In my SAPUI5 application I have a controller (Produzione-Stato) that extend another controller (ExcelGenerator). In the Component.js file I have added the following property:

customizing: {
       "sap.ui.controllerExtensions": {
            "cabot.ui.wt.controller.Produzione-Stato": {
                controllerName: "cabot.ui.wt.controller.ExcelGenerator",
                },
       }
}

The application works fine at this stage. However I would like the ExcelGenerator controller to extend another controller (say C2ExcelGenerator). I have tried to modify the Component.js file by adding the following:

customizing: {
       "sap.ui.controllerExtensions": {
            "cabot.ui.wt.controller.Produzione-Stato": {
                controllerName: "cabot.ui.wt.controller.ExcelGenerator",
                },
            "cabot.ui.wt.controller.ExcelGenerator": {
                 controllerName: "cabot.ui.wt.controller.C2ExcelGenerator",
                },
       }
}

This however throws exceptions errors. What is the correct approach to extend controllers on a multilevel stage or to have a controller that extend more than one controller? Thanks in advance!

1 answer

  • answered 2018-01-08 17:31 Péter Cataño

    Using typed controllers with the extend syntax the questioned scenario would look like:

    Produzione-Stato.controller.js:

    sap.ui.define([
        "sap/ui/core/mvc/Controller"
    ], function(Controller) {
        return Controller.extend("cabot.ui.wt.controller.Produzione-Stato", {
            onInit: function() {}
            ...
        });
    });
    

    ExcelGenerator.controller.js:

    sap.ui.define([
        "cabot/ui/wt/controller/Produzione-Stato"
    ], function(PSController) {
        return PSController.extend("cabot.ui.wt.controller.ExcelGenerator", {
            onInit: function() {
                PSController.prototype.onInit.apply(this, arguments);
            }
            ...
        });
    });
    

    C2ExcelGenerator.controller.js:

    sap.ui.define([
        "cabot/ui/wt/controller/ExcelGenerator"
    ], function(EGController) {
        return EGController.extend("cabot.ui.wt.controller.C2ExcelGenerator", {
            onInit: function() {
                EGController.prototype.onInit.apply(this, arguments);
            }
            ...
        });
    });
    

    The chaining of the lifecycle methods is not done automatically. You can control on your own, if or when to call the parent lifecycle methods. In addition, you can always access the methods defined in the original controller.

    About typed controller extension in Controller Replacement