SAPUI5 provides a rich set of pre-built controls designed to cover most common UI requirements. However, enterprise applications often require tailored user interface components to meet unique business needs or enhance user experience. This is where custom controls come into play.
Implementing custom controls in SAPUI5 allows developers to extend the UI5 control library with their own reusable and encapsulated components, fully integrated into the UI5 lifecycle, data binding, and theming infrastructure.
This article explores the process of creating, extending, and deploying custom UI5 controls effectively.
You can extend any standard UI5 control to enhance or modify behavior and appearance.
Example:
sap.ui.define([
"sap/m/Button"
], function(Button) {
return Button.extend("my.custom.Button", {
metadata: {
properties: {
customText: { type: "string", defaultValue: "Click me!" }
}
},
renderer: function(oRm, oControl) {
oRm.write("<button");
oRm.writeControlData(oControl);
oRm.write(">");
oRm.writeEscaped(oControl.getCustomText());
oRm.write("</button>");
}
});
});
Define all aspects: metadata, rendering, lifecycle hooks.
Defines the API surface of the control:
Example metadata snippet:
metadata: {
properties: {
text: { type: "string", defaultValue: "" },
enabled: { type: "boolean", defaultValue: true }
},
events: {
press: {}
}
}
Responsible for producing HTML output.
The renderer is a function receiving the RenderManager and the control instance. It must write the HTML for the control.
Example:
renderer: function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("myCustomControl");
oRm.writeClasses();
oRm.write(">");
oRm.writeEscaped(oControl.getText());
oRm.write("</div>");
}
Implement lifecycle hooks and event handlers.
Example:
onclick: function() {
this.firePress();
}
To enable data binding on properties and aggregations, define metadata accordingly. UI5 handles automatic updates when bound data changes.
Example:
metadata: {
properties: {
value: { type: "string", bindable: "bindable" }
}
}
sap.ui.core.theming.Parameters to stay consistent with the UI5 theme.Example CSS class:
.myCustomControl {
font-weight: bold;
color: #0a6ed1;
}
sap.ui.define([
"sap/ui/core/Control"
], function(Control) {
return Control.extend("my.custom.HelloWorld", {
metadata: {
properties: {
text: { type: "string", defaultValue: "Hello World" }
}
},
renderer: function(oRm, oControl) {
oRm.write("<span");
oRm.writeControlData(oControl);
oRm.write(">");
oRm.writeEscaped(oControl.getText());
oRm.write("</span>");
}
});
});
Usage in XML view:
<core:Control xmlns:core="sap.ui.core" xmlns:custom="my.custom">
<custom:HelloWorld text="Welcome to SAPUI5!" />
</core:Control>
Package custom controls as libraries or within application components. Make sure to:
Implementing custom controls in SAPUI5 empowers developers to meet unique UI requirements while maintaining consistency and integration within the SAP ecosystem. By carefully defining metadata, rendering logic, and styling, developers can create reusable and maintainable controls that enhance SAP Fiori applications’ user experience.
With practice, building custom controls becomes a powerful skill in any SAPUI5 developer’s toolkit.