SAP UI5 - Notepad Controls

A Control is used to define the appearance and screen area. It contains properties likewidth and text. These properties are used to modify the appearance or change the data displayed by the control. You can create aggregate controls or associated controls.

Associated control of a control is defined as loosely related controls, which are not child controls or a part of the main control. Controls are used to trigger well-defined events.

Controls in SAPUI5 can be created directly using a tool or JavaScript file. Controls that are created using the extend() method are also known as Notepad controls.

The following code is used to define a Control using the Extend method −

Sap.ui.core.control.extend (sname, oDefinition);

The parameters that are passed to this control −

  • Name of the control
  • Definition of the control

The definition of a control contains information about control API, aggregations, events, etc. and implementation methods.

You can also create custom controls. Definition of custom control can contain public and private methods, metadata, and rendering method, etc.

   properties: {},
   events: {},
   aggregations: {}

publicMethod: function() {},
_privateMethod: function() {},
init: function() {}
onclick: function(e) {},
renderer: function(rm, oControl) {}

Creating a new control inherits from Button −

Sap.ui.commons.Button.extend (sname, oDefinition);

The metadata in control definition consists of objects for control properties, events, and aggregations.


  • Type: data type of control property
  • String: string for a string property
  • Int or float for number properties
  • Int[] for an integers array
  • String[] for an string array


Events are defined by the name event only. You normally pass an empty object to an event. Application use enablePreventDefault flag to interrupt the event.

Events: {
   Close: {
      enablePreventDefault : true