'Extending a control reusing its own original renderer

I need a custom control in my app composed by a ColumnListItem followed by a (custom) progressbar spanning all the ColumnListItem width. I tried extending a sap/m/ColumnListItem adding a new custom aggregation progress and leveraging its original renderer as follows:

sap.ui.define([
  "sap/m/ColumnListItem",
  "sap/m/ColumnListItemRenderer"
], function (ColumnListItem, ColumnListItemRenderer) {
  "use strict";
  return ColumnListItem.extend("my.package.MyColumListItem", {
    metadata: {
      aggregations: {
        "progress": {
          type: "my.package.MyShadowBar",
          multiple: false
        }
      }
    },
    renderer: {
      apiVersion: 2,
      render: function (oRm, oCLI) {
        ColumnListItemRenderer.render.apply(this, arguments);
        oRm.openStart("div").style("width", "100vw").openEnd();
        oRm.renderControl(oCLI.getAggregation("progress"));
        oRm.close("div");
      }
    }
  });
});

Unfortunately, this works only at the first rendering: if I navigate elsewhere and then came back, all progressbars are rendered on top of the page and all the ColumnListItems are stacked at the bottom. I'm using SAPUI5 version 1.84.xx. I don't really understand how to implement the renderer correctly so any suggestion is welcome!

controlssapui5renderer


Solution 1:[1]

SAPUI5 technically allows overwriting existing methods from the respective *Renderer module of the parent control. Make sure to overwrite only those methods with the @protected/@public JSDoc tag in addition to automated tests for your app to stay compatible with future UI5 releases. Here is an example how the InputRenderer was extended by overwriting the protected addOuterClasses method: https://stackoverflow.com/a/67919830/5846045.

It's also possible to extend the parent *Renderer within an external renderer as explained by the API reference Renderer.extend. The extension definition stays same.

In your case, the requirement sounds like it could be achieved without extending the sap.m.ColumnListItem. Either way, here is a minimal sample that showcases both approaches: rendering the progress bar via the extended item renderer, and via the standard popin approach without any extension.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions