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.
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.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- How to send e-mail in SAPUI5 Hybrid App?
- How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 – List Control Using Formatters
- SAPUI5 – How to Apply CSS in UI5 Apps?
- SAPUI5 – Hybrid App Tutorial
- SAPUI5 – Offline Application in 8 Steps
- SAPUI5 – Use of Formatter Function
- SAPUI5 – Voice Recognition
- SAPUI5 – Resource Model for Freshers
- How to Get Weight from the Weigh Scale/Weigh Bridge using Python for SAPUI5 Fiori Apps?
- SAP Fiori Tutorial. Part 7 – Custom Fiori App to Approve Change Requests in SOLMAN
- SAPUI5 – Promises in UI
- SAPUI5 – Binding JSON Model Data in SAPUI5 List Control using SAP Web IDE
- SAPUI5 – Custom Control in UI5
- SAPUI5 – Understanding the ObjectListItem Control of UI5
- SAPUI5 – How to Build Master Detail UI5 App along with Search?