SAPUI5 provides a rich library of ready-to-use controls such as buttons, tables, lists, and complex visualization components. These controls cover a wide range of use cases and ensure consistent design and behavior across SAP Fiori applications. However, there are scenarios where the standard controls may not fully meet specific business or UX requirements.
To address these situations, SAPUI5 allows developers to extend existing UI5 controls. This capability enables you to enhance or customize controls without modifying the core framework, ensuring upgrade safety and maintainability.
This article explains the concept, benefits, and practical methods for extending UI5 controls effectively.
You may want to extend a UI5 control when you need to:
Create a subclass of a standard control, adding new properties or methods while inheriting existing functionality.
Wrap an existing control inside a new custom control, adding additional UI elements or behavior around it.
Override or extend the renderer to customize how the control is rendered in the DOM.
Use sap.ui.define to extend a base control, for example, extending sap.m.Button:
sap.ui.define([
"sap/m/Button"
], function(Button) {
return Button.extend("custom.control.CustomButton", {
metadata: {
properties: {
// Add a custom property
customText: { type: "string", defaultValue: "Default Custom Text" }
},
events: {
// Add a custom event
customPress: {}
}
},
// Override the onAfterRendering hook
onAfterRendering: function() {
// Call base class onAfterRendering
Button.prototype.onAfterRendering.apply(this, arguments);
// Add your custom logic here
var sText = this.getCustomText();
this.$().attr("title", sText); // Example: set tooltip with custom property
},
// Override or add event handlers
onclick: function(oEvent) {
// Fire the custom event
this.fireCustomPress();
// Call the base control’s onclick
Button.prototype.onclick.apply(this, arguments);
}
});
});
In your XML view or JavaScript, use the fully qualified name:
<custom.control.CustomButton
text="Click Me"
customText="Hello Tooltip"
customPress="onCustomPress"/>
To customize the HTML output of a control, you can override its renderer.
Example:
sap.ui.define([
"sap/m/ButtonRenderer"
], function(ButtonRenderer) {
var CustomButtonRenderer = Object.assign({}, ButtonRenderer);
CustomButtonRenderer.render = function(oRm, oControl) {
oRm.write("<button");
oRm.writeControlData(oControl);
oRm.addClass("customButtonClass");
oRm.writeClasses();
oRm.write(">");
oRm.writeEscaped(oControl.getText() + " - Extended");
oRm.write("</button>");
};
return CustomButtonRenderer;
});
Attach this renderer when extending the control by specifying renderer: CustomButtonRenderer in the control definition.
custom.control) to avoid conflicts.Extending existing UI5 controls is a powerful technique that allows developers to customize SAPUI5 applications beyond the capabilities of standard controls. By subclassing, adding properties, or overriding renderers, you can tailor controls to meet unique business requirements while maintaining SAPUI5’s upgrade safety.
Mastering control extension empowers you to build more flexible, maintainable, and feature-rich SAP Fiori applications tailored perfectly to your organization's needs.