Custom UI5 Control

With Custom UI5 Control, you can create custom UI5 objects by extending existing in order to use them in the App Designer. Custom components offer significant benefits when working on large projects or collaborating with other developers:


Components can be reused across different tabs, saving time and effort.


Components maintain a unified design and behavior throughout the website.


Components break down complexity and allow easy addition or modification of tools.

Maintenance and Updates

Changes can be made to specific tools without impacting the entire website.


Tool enable parallel development and better code organization.

Configuring a Custom UI5 control


Extended Control

Select a UI5 object. For example: sap.m.SearchField


Name of the new object


Gives description to object


Select a UI5 icon


Adds the new object in a Package


In Definition , you can apply custom logic to the object based on your needs.

Below is a code snippet for altering a sap.ui.core.Control

sap.ui.core.Control.extend("testInput", {  // Name of custom object

    // Do not change the declared name of the custom UI5 object

    metadata: {
        properties: {
            "value": "string", // in simple cases, just define the type
            "enableShadow2": {
                type: "boolean",
                defaultValue: false
            "size": {
                type: "sap.ui.core.CSSSize",
                defaultValue: "200px"
        events: {
            "hover": {}

    renderer: function(oRm, oControl) {

        oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important!
        oRm.addStyle("width", oControl.getSize()); // write the Control property size; the Control has validated it
        // to be a CSS size
        oRm.addStyle("height", oControl.getSize());
        oRm.addClass("mySquare"); // add a CSS class for styles common to all Control instances
        oRm.writeClasses(); // this call writes the above class plus enables support
        // for Square.addStyleClass(...)

        oRm.writeEscaped(oControl.getText()); // write another Control property, with protection
        // against cross-site-scripting




In the tab you can apply to the object custom CSS

    height: 30px;
    width: 100px;
    border-style: solid;
    border-color: black;
Remember to add your style class in the Definition tab


In Properties, you have the flexibility to manually adjust the Events, Properties, and more. This allows you to avoid the need for manual adjustments within the App Designer.

custom ui5 properties