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:

Reusability

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

Consistency

Components maintain a unified design and behavior throughout the website.

Scalability

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.

Collaboration

Tool enable parallel development and better code organization.

Configuring a Custom UI5 control

General

Extended Control

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

Name

Name of the new object

Description

Gives description to object

Icon

Select a UI5 icon

Package

Adds the new object in a Package

Definition

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.write("<div");
        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.writeStyles();
        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.write(">");
        oRm.writeEscaped(oControl.getText()); // write another Control property, with protection
        // against cross-site-scripting
        oRm.write("</div>");

    }

});

Stylesheet

In the tab you can apply to the object custom CSS

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

Properties

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