Extended control with new aggregation causes error "Cannot add direct child without default aggregation defined for control"

Question

I have to make an extension for IconTabBar so it would have an action button on the right in the line with tabs. So I've added a file to a project which extends sap.m.IconTabBar, with the following code:

sap.ui.define([
  "sap/m/IconTabBar",
  "sap/m/IconTabBarRenderer"
], function (IconTabBar, IconTabBarRenderer) {
  "use strict";

  return IconTabBar.extend("nmsp.controls.IconTabBar", {
    renderer: IconTabBarRenderer,
    aggregations: {
      button: {
        type: "sap.m.Button",
        multiple: false
      }
    }
  });
});

and I've added it to my view as follows:

<cust:IconTabBar xmlns:cust="nmsp.controls">
  <cust:items>
    <!-- ... -->
  </cust:items>
  <cust:content>
    <!-- ... -->
  </cust:content>
<cust:IconTabBar >

Everything was ok so far but when I try to add my new aggregation:

<cust:IconTabBar xmlns:cust="nmsp.controls">
  <cust:items>
    <!-- ... -->
  </cust:items>
  <cust:button>
    <Button text="Upload new" />
  </cust:button>
  <cust:content>
    <!-- ... -->
  </cust:content>
<cust:IconTabBar>

loading of the page fails with tripled error "Cannot add direct child without default aggregation defined for control ...".

IconTabBar doesn't even have a default aggregation. I know, that namespace is ok because when I load app without new aggregation, UI5 inspector shows that the rendered control is nmsp.IconTabBar.

I know that it wouldn't be visible without changes in a renderer method, but why does it break everything?

Answer 1

Your custom control is missing a metadata object to which the aggregations belongs. So it should be:

return IconTabBar.extend("nmsp.controls.IconTabBar", {
  metadata: { // <-- add aggregations, properties, etc. to the metadata
    aggregations: {
      // ...
    }
  },
  // ...
});