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
