SAPUI5 – Custom Control in UI5

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).

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).

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

oRm.writeControlData(oControl);

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