Sunday, 04 August 2019 23:15

SAPUI5 – Custom Control in UI5

Written by
Rate this item
(0 votes)

We cannot always use the out of the box features provided by the software. One size does not fit all. That is the reason, we have these multi-million

dollar projects to fit the clients business needs and processes. This limitation is for all products irrespective of whether it is SAP, Oracle or any other. Similarly, sometimes we need to create Custom Controls in SAPUI5. This article is to demonstrate the creation of new controls which SAP doesn’t offers. Its time to become the creator (God of SAPUI5). ?

By the way, did you know SAPUI5 keeps Promises? Check my previous tutorial – Promises in SAPUI5.

I will show a simple demonstration where you can Add Properties, Events and Display a new button that we created and use in SAPUI5 application

Step 1:- Create a sample SAPUI5 project in WebIDE

Step 2:- Create a folder – Custom

Step 3:- Create a js file

For demo purpose I have named it Sagar (means Ocean in Sanskrit). ?

Also Read – My First ABAP Program in S/4HANA.

Step 4:- Provide a control name

com/sampleCustom/Custom/Sagar which will be extended to sap/ui/core/Control

Metadata consists of the properties, aggregations, associations and events. For demo purpose I have provided the properties width and height and an event hover.

In the renderer function you will write the HTML content and I have bound the meta properties to the button I have created.

For the demonstration of event I have created hover and for the dynamic passing values I have created a property text.

To trigger the events make sure on render you add an extra line of code


Also Check CRUD Operations in OData Services

Step 5:- Use the custom control and define function in controller & view

Take note of xmlns:Sagar=”com.sampleCustom.Custom” and hover function “fnHover”.

Define the fnHover function as below.

Testing Time

Now keep move cursor on that new control, look the event hover is triggered

Hope this tutorial was easy to understand and assimilate. This is one of the simplest article I have written. Do check the more from the Author section at the end of this article for more complex and practical tutorials from me.

If you have any question, feel free to put it in the comment section. I reply to each and every query or suggestions or criticism.

Join our SAP Technical Telegram Group for daily discussion and learning. You need to install Telegram App first and then click the link in your mobile device. You may also install it in your desktop.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 299 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.