✒️SAP BTPFIORI / La creación de controles personalizados Por Jaime Gomez Arango
SAP BTPFIORI La creación de controles personalizados
1. Custom Controls
Custom controls in SAPUI5 allow us to create reusable UI components. When developing a new SAPUI5 application, it’s important to consider how to structure the application and what controls will be needed. Controls can be extended from existing ones or created anew.
Namespace Usage:
To avoid conflicts, avoid using the sap namespace for anything other than SAP-provided content.
2. Base Class Architecture of SAPUI5
SAPUI5 controls inherit from the base class sap.ui.core.Control, which provides essential features such as event handling, data binding, and rendering.
Inheritance Example:
// Extending an existing controlsap.m.Image.extend("custom.Image", {// custom properties and methods});// Creating a new control from the base classsap.ui.core.Control.extend("custom.MyControl", {// custom properties and methods});
3. Structure of a Custom Control
A custom control is created in the project folder, typically within a control subfolder. It consists of three main components: metadata, the init method, and the render method.
Metadata:
Defines the control's properties, aggregations, and events.
metadata: {properties: {"value": { type: "int", defaultValue: 0 }},aggregations: {"_button": { type: "sap.m.Button", multiple: false, visibility: "hidden" },"_label": { type: "sap.m.Label", multiple: false, visibility: "hidden" }},events: {"change": {}}}
4. Creating Metadata for a Custom Control
Metadata defines the structure of the control. Properties, events, and aggregations are specified in this section.
- Properties: Define the characteristics of the control.
properties: {"rating": { type: "float", defaultValue: 0 }}
- Events: Define events that the control can trigger.
events: {"rateChange": {}}
- Aggregations: Define child controls.
aggregations: {"_ratingIndicator": { type: "sap.m.RatingIndicator", multiple: false, visibility: "hidden" },"_submitButton": { type: "sap.m.Button", multiple: false, visibility: "hidden" },"_label": { type: "sap.m.Label", multiple: false, visibility: "hidden" }}
5. Initializing the Control
The init method is called by SAPUI5 when an instance of the control is created. It sets up the internal controls.
init: function() {this.setAggregation("_ratingIndicator", new sap.m.RatingIndicator());this.setAggregation("_submitButton", new sap.m.Button());this.setAggregation("_label", new sap.m.Label());}
6. Event Management
Custom controls can handle various events. The setValue method updates the control's properties and ensures proper rendering.
setValue: function(iValue) {this.setProperty("value", iValue, true);this.getAggregation("_ratingIndicator").setValue(iValue);}
Event handlers for internal controls are defined to manage user interactions.
_onRate: function(oEvent) {var iValue = oEvent.getParameter("value");this.setValue(iValue);this.fireEvent("rateChange", { value: iValue });}
7. Rendering
The render method defines how the control is displayed as HTML.
renderer: function(oRM, oControl) {oRM.write("<div");oRM.writeControlData(oControl);oRM.write(">");oRM.renderControl(oControl.getAggregation("_ratingIndicator"));oRM.renderControl(oControl.getAggregation("_submitButton"));oRM.renderControl(oControl.getAggregation("_label"));oRM.write("</div>");}
8. Using the Control in the UI
To use the custom control in a view, it must be referenced and instantiated.
- XML View:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:custom="custom.controls"><custom:MyControl rateChange="onRateChange"/></mvc:View>
- Controller:
onRateChange: function(oEvent) {var iValue = oEvent.getParameter("value");sap.m.MessageToast.show("Rated: " + iValue);}
Escanear / Compartir
Sobre el autor
Publicación académica de Jaime Eduardo Gomez Arango, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
SAP Expert
Jaime Eduardo Gomez Arango
Profesión: Ingeniero de Sistemas y Computación - España - Legajo: SW34C
✒️Autor de: 149 Publicaciones Académicas
🎓Egresado de los módulos:
Disponibilidad Laboral: FullTime
Presentación:
Ingeniero de sistemas y computación con 8 años de experiencia el desarrollo frontend & backend (react/node) y en cloud (aws), actualmente desarrollando habilidades en sap btp, ui5, abap y fiori.
Certificación Académica de Jaime Gomez
