SAPUI5 - Let's Create Custom UI5 Control !
Probably, you would say that "Why do we need Custom Control?".
Honestly, First, I asked myself too. Why do I need this? There is a way which is called the CSS. I can handle it using CSS. Actually, in my opinion, it is not a good option. If you want a good interface and reusability, you should go ahead with custom control.
Sometimes, clients can want you to implement a requirement in their application which you cannot imagine it. Let's say... they need an information button for a field in the application. You can put the information button next to the input field or you can put the button inside the input field using a fascinating way. It's up to you but the second option sounds good and we can try to use this magnificent way:)
I am writing this article to hopefully get you encouraged into building your own extremely impressive controls. It's time to become a creator!
According to our example above, it could be useful to apply custom control for this.
Let's start!
Step 1: Creating a new UI5 Project
First of all, we create a new project and some folders for your controls namespace.
Step 2: Creating a Folder and a File
You create the folder like whatever you want to be called the name. (I've created as 'control'). After that, we create a file CustomInput.js
Step 3: Prepare your own Input!
Before we continue please have a quick look at the source code. To create a Custom Control we have to extend sap.m.InputBase which is an inspiring ui5 functionality that SAP has built for us.
The Metadata section gives us the properties, aggregations, associations, and events. For instance, I have defined an event called "endButtonPress" for the info button. Also, you can see init function which is called by the SAPUI5 automatically. I've defined my custom input with a button into init function and bound the press event into it.
Ready to go for it! Let's use it!
Step 4: Use the Custom Control
And we use it in my XMLview, I import the namespace and use the custom control. Then, I've implemented the press event in the controller as I wish.
Finally, I should see my “information button” in my input field.
Here we go!
SAP ABAP & SAPUI5 Developer
4yPerfect!