CODEWITHSUNDEEP
javascriptsapui5
Matthijs Mennens
Matthijs Mennens

Reputation: 1145

Overriding method of standard control in SAPUI5

Is there a way to override a method of a standard control in SAPUI5? I want to override the method '_getAppointmentsSorted' of CalendarRow.js

I tried copy pasting the entire file and changing the method, but then I get the following error:

failed to load 'be/amistaAdminPlanning/controls/MyCalendarRowRenderer.js' from ./controls/MyCalendarRowRenderer.js: 404 - Not Found

I tried to fix this error by specifying the renderer like this:

    renderer: function(oRm, oControl) {
        sap.ui.unified.CalendarRowRenderer.render(oRm, oControl); 
    }

The CalendarRowRenderer is found, but the render method doesn't execute like it should and following error message pops up:

Cannot read property 'getId' of undefined in CalendarRowRenderer.js?eval:6

Anyone any idea why it behaves like this?

EXTENSION

sap.ui.unified.CalendarRow.extend("be.amistaAdminPlanning.controls.MyCalendarRow", {
    renderer: function(oRm, oControl) {
        sap.ui.unified.CalendarRowRenderer.render(oRm, oControl);
    }
});

function _getAppointmentsSorted() {

    var aAppointments = this.getAppointments();

    aAppointments.sort(function(oApp1, oApp2) {

        var iResult = oApp1.getStartDate() - oApp2.getStartDate();

        if (iResult == 0) {
            iResult = oApp2.getEndDate() - oApp1.getEndDate();
        }

        return iResult;

    });

    return aAppointments;

}

Upvotes: 0

Views: 4799

Answers (2)

sachad
sachad

Reputation: 307

I didn't test it in details but I think that following should work:

Create a file app_name_space/control/CalendarRowCustom.js Folder 'control' is on the same level like 'controller', 'view' folders.

Fill CalendarRowCustom.js with following content:

sap.ui.define(
  ['sap/ui/unified/CalendarRow'],

  function(CalendarRow) {
    "use strict";
    return CalendarRow.extend("app_name_space.control.CalendarRowCustom",{
      _getAppointmentsSorted: function() {
        // Here goes your custom code
    },
    renderer: {}
  });
 }
);

According to this example in Documentation, renderer: {} should inherit the functionality from the parent control.

Then you should be able to use your custom control in a view like this:

<mvc:View controllerName="..." xmlns:html="http://www.w3.org/1999/xhtml"
   xmlns:mvc="sap.ui.core.mvc" xmlns:cust="app_name_space.control">

    <cust:CalendarRowCustom />

</mvc:View>

Substitute "app_name_space" with your defined namespace in the View as well as in the Control.

Upvotes: 0

sachad
sachad

Reputation: 307

Instead of "copy pasting the entire file" you should create your own custom control for example CalendarRowExtended and override the function in the custom control.

These links may be useful:

Extending TextField Rendering

Extending Buttons with Additional Events

Edit: Sorry, didn't see the comment from Christoph as it was written a few minutes before me. But I guess the idea was the same.

Upvotes: 1

Related Questions