Skip to Content

Composite Controls Cheat Sheet

UI5 provides a rich API for developers to create custom controls, but the most powerful feature, Composite Controls, often ends up being too convoluted to use due to a lack of documentation. Composite Controls use existing control implementations to build custom functionality. These controls have their own public API, but internally glue existing controls together and reuse their renderers – allowing developers to build unique functionality in no time with minimal code.


The mapping between the composite control API and the internal controls is fundamental to this approach. The best way to implement this is by overriding the mutator and getter methods for aggregations and properties of the composite control.


This document provides the list and sample implementations of methods that need to be overridden. This supports binding of aggregations and properties as well.


For using this, you simply need to copy the methods into your composite control source file, and make necessary adjustments to the _callMethodInTarget function.

  _callMethodInTarget: function (sFunctionName, sAPIName) {

     var aArgs = Array.prototype.slice.call(arguments);

     switch( sAPIName ) {

      /* Add cases for your property or aggregation name, and call the sFunctionName with the corresponding internal control

      * For example, if an internal list is defined as this._oList, and items aggregation is to be forwarded,

      *

      * case "items": this._oList[sFunctionName].apply(this._oList, aArgs.slice(1));

      *      break;

      */

      default:

      return sap.ui.core.Control.prototype[sFunctionName].apply(this, aArgs.slice(1));

     }

  },

  /**

  * Aggregation Methods

  */

  setAggregation : function (sAggregationName, oObject, bSuppressInvalidate) {

     this._callMethodInTarget("setAggregation", sAggregationName, oObject, bSuppressInvalidate);

     return this;

  },

  bindAggregation: function () {

  var args = Array.prototype.slice.call(arguments);

  this._callMethodInTarget.apply(this, ["bindAggregation"].concat(args));

  return this;

  },

  validateAggregation: function (sAggregationName, oObject, bMultiple) {

  return this._callMethodInTarget("validateAggregation", sAggregationName, oObject, bMultiple);

  },

  getAggregation: function (sAggregationName, oDefaultForCreation) {

  return this._callMethodInTarget("getAggregation", sAggregationName, oDefaultForCreation);

  },

  indexOfAggregation: function (sAggregationName, oObject) {

  return this._callMethodInTarget("indexOfAggregation", sAggregationName, oObject);

  },

  insertAggregation: function (sAggregationName, oObject, iIndex, bSuppressInvalidate) {

  this._callMethodInTarget("insertAggregation", sAggregationName, oObject, iIndex, bSuppressInvalidate);

  return this;

  },

  addAggregation: function (sAggregationName, oObject, bSuppressInvalidate) {

  this._callMethodInTarget("addAggregation", sAggregationName, oObject, bSuppressInvalidate);

  return this;

  },

  removeAggregation: function (sAggregationName, oObject, bSuppressInvalidate) {

  return this._callMethodInTarget("removeAggregation", sAggregationName, oObject, bSuppressInvalidate);

  },

  removeAllAggregation: function (sAggregationName, bSuppressInvalidate) {

  return this._callMethodInTarget("removeAllAggregation", sAggregationName, bSuppressInvalidate);

  },

  destroyAggregation: function (sAggregationName, bSuppressInvalidate) {

  this._callMethodInTarget("destroyAggregation", sAggregationName, bSuppressInvalidate);

  return this;

  },

  /**

  * Binding, Info and Path Methods

  */

  getBinding: function (sAggregationName) {

  return this._callMethodInTarget("getBinding", sAggregationName);

  },

  getBindingInfo: function (sAggregationName) {

  return this._callMethodInTarget("getBindingInfo", sAggregationName);

  },

  getBindingPath: function (sAggregationName) {

  return this._callMethodInTarget("getBindingPath", sAggregationName);

  },

  /**

  * Property Methods

  */

  setProperty: function (sPropertyName, oValue, bSuppressInvalidate) {

  this._callMethodInTarget("setProperty", sPropertyName, oValue, bSuppressInvalidate);

     return this;

  },

 

  validateProperty: function (sPropertyName, oValue) {

  return this._callMethodInTarget("validateProperty", sPropertyName, oValue);

  },

 

  getProperty: function (sPropertyName) {

  return this._callMethodInTarget("getProperty", sPropertyName);

  },

 

  bindProperty: function () {

  var args = Array.prototype.slice.call(arguments);

  this._callMethodInTarget.apply(this, ["bindProperty"].concat(args));

  return this;

}

This code has been derived from the OpenUI5 sap.m.SelectDialog control source code, and has been modified for easier consumption by developers.

Tags:

No comments