SAPUI5 - Let's Create Custom UI5 Control !

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

No alt text provided for this image

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.

No alt text provided for this image

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

No alt text provided for this image

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.

No alt text provided for this image

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.

No alt text provided for this image
No alt text provided for this image

Finally, I should see my “information button” in my input field.

Here we go!

No alt text provided for this image
No alt text provided for this image



Ramazan Kalkan

SAP ABAP & SAPUI5 Developer

4y

Perfect!

Like
Reply

To view or add a comment, sign in

Insights from the community

Others also viewed

Explore topics