SAPUI5: UI5’s Custom Control

We occasionally find ourselves unable to utilize the software’s built-in functionality. Not everyone fits into one size. We have these multi-million dollar projects because they match the business needs and procedures of our clients. This restriction applies to all products, regardless of whether they are made by SAP, Oracle, or another company. In a similar vein, SAPUI5 occasionally requires the creation of Custom Controls. The purpose of this article is to show how to create new controls that SAP does not provide. It’s time to take on the role of creation (SAPUI5 God).

I’ll walk you through a quick demo of how to add properties, events, and a new button that we made and used in the SAPUI5 application.

Step 1: Open the WebIDE and create an example SAPUI5 project.

Step 2: Make a Custom folder

Step 3: Make a file in JS

I’ve given it the demo name Sagar, which translates to “ocean” in Sanskrit.

Step4: Give the control name.

This will be expanded to sap/ui/core/Control at com/sampleCustom/Custom/Sagar

The characteristics, aggregates, associations, and events make up metadata. I’ve included the parameters width, height, and event hover for demo purposes.

You will write the HTML content in the renderer method, and I have bound the button’s meta properties.

I made a property text for the dynamic passing values and a hover text for the event example.

To trigger the events Make sure to add an additional line of code during render.

WriteControlData(oControl) oRm.write;

Step 5: Define a function in the controller and view using the custom control.

xmlns:Sagar=”com.sampleCustom.Custom” and the hover method “fnHover” should be noted.

Define the function fnHover as follows.

Testing Time

Continue dragging the cursor over that new control to see if the event hover is activated.

I hope it was simple for you to comprehend and apply this instruction. One of the easiest articles I’ve ever written is this one.For more in-depth and useful instructions from me, be sure to check out the part titled “More from the Author” at the conclusion of this post.

Please feel free to ask any questions you may have in the comments area. I respond to every question, recommendation, and critique.


you may be interested in this blog here:-

How can I see the values ​​of variables in OpenSolver as they change?

Navigating SAP’s E070 Table in SAP: The Heartbeat of Transport Management

  • Related Posts

    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    Automatically Fill Test Data in FM & BAPIs for SE37. We often come across many issues with the upload programs that we develop to facilitate mass upload. The most boring work…

    Fetching Data from Memory Stack Using New Tool (in Debugger)

    Fetching Data from Memory Stack Using New Tool (in Debugger) Commonly we get a necessity to add approvals for standard exchanges wherein the field esteem isn’t straightforwardly open in client…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    • By Varad
    • May 6, 2025
    • 9 views
    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    Fetching Data from Memory Stack Using New Tool (in Debugger)

    • By Varad
    • May 5, 2025
    • 23 views
    Fetching Data from Memory Stack Using New Tool (in Debugger)

    How to Debug any Work Item in SAP Workflow?

    • By Varad
    • May 4, 2025
    • 25 views
    How to Debug any Work Item in SAP Workflow?

    External Debugging of an Application of another SAP User in other Location in another Machine/System

    • By Varad
    • May 3, 2025
    • 39 views
    External Debugging of an Application of another SAP User in other Location in another Machine/System

    How to Debug any Work Item in SAP Workflow?

    • By Varad
    • May 2, 2025
    • 31 views
    How to Debug any Work Item in SAP Workflow?

    Fetching Data from Memory Stack Using New Tool (in Debugger)

    • By Varad
    • May 1, 2025
    • 41 views
    Fetching Data from Memory Stack Using New Tool (in Debugger)