Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com

Custom Control in SAP UI5

In this tutorial, I am going to explain how to create a simple Custom Control. Custom controls are controls that are developed by us for catering our specific needs where the framework doesn’t provide option for that.

For more information on the custom control visit the document:

There are couple of ways in which the custom controls can be created.

1. Inheriting from a base control class ( sap.ui.core.Control)
2. Inheriting from an existing control which almost suits your need and you want to further enhance it to cater your needs. (e.g sap.m.Button – inheriting from button class and creating a new control )
So depends on your need, you can either create a control from scratch using sap.ui.core.Control or from existing control.

Following is a step you need to follow to create a custom Control.
1. Define a Class for Custom Control
2. Provide the metadata for the controls (i.e Properties, Aggregations and Events) that forms the control
3. Implement the logic to render the control to HTML.

Step 1: Create an Application project and Define a Component.

Enter the name for the component and click on Finish.


Create a Component Class and Implement the logic.



Instantiate the component in the index file and place it on the content region.


Now if you execute the application, the component will be invoked and the display would be empty as we have not returned any control instance in the create Content function.
We will now implement a custom control and then use it in the component create function to display the custom control.

As a part of this tutorial I am also going to cover the topic of Custom Data types which I will later use to define the data type for the properties of the custom Control.

Step 2: Create a custom data types.

Create a new folder in the web content folder with the name data types.


Create a Java script file in the datatypes folder to create a class for custom datatype.



Step 3: Define a Class for Custom Control.

In the Web Content folder, create a new folder called controls where we will define the custom controls.


In the controls folder, create a JavaScript file to implement the class for custom control.



Define the metadata section of the custom control as below. Load the required data type classes using require module.

I have specified the properties of the control with the type definition, and I have created an aggregation for the controls where the aggregation supported is of type Button controls.


This metadata declared here specifies the behavior of the control as what it can accept and define a control. The metadata defined for the standard controls can be found in their API Documentation.


Invoke the Init function for the control class which will be triggered when the control is instantiated.


Now whenever we instantiate the controls we pass the following two parameters, where the ID is the id of the control and In Settings we pass the Properties, Aggregations and Events of the controls. This will be passed on to the Init function of the control class where you can interpret the values and adjust your controls with default values in case the properties are not passed.
Note: The Setters and Getters methods are by default created for the controls.
e.g getProperty, setProperty, getAggregation , attach/detach functions.

Invoke the renderer function of the component where you specify how the control has to be converted into HTML during the rendering process. To Specify this you use the render class and define how the control should be rendered.


The API for the render manager can be found here:

Interpretation of Above code.
Header Tag:

// Header
// Style
oRm.addStyle("width", oControl.getWidth());
oRm.addStyle("height", oControl.getHeight());

This is to create a HTML Tag as Below.

Here I have asked the render manger to write the HTML code by creating a div tag using method write. And in the starting tag of div I have asked to write the control data using writeControlData method and then added the style for the control using the addStyle method by passing the values from the control respectively.
Note: The getter and setter methods for the property are created by default.
Then I have created a new Div tag to list out the values of property in HTML.

// Property
oRm.write("<div>Title: "+oControl.getTitle() +"</div>");
oRm.write("<div>Author: "+oControl.getAuthor()+"</div>");
oRm.write("<div>Price: "+oControl.getPrice().toFixed(2)+" "+oControl.getCurrencyCode() +"</div>");


Note: The Closing tag for the Header DIV tag is yet to be formed.

Then render the aggregation of the control.


Since we are using a standard button control as an Aggregation method, using renderControl method I am asking the framework to render the button control where it will invoke the renderer of the button control as specified by standard and render it on the screen with values passed to it.


And finally close the header div tag with an end tag.


The Result HTML Should look like this.

Step 4: Create the instance of the control and display the control as output.
In create content function of the component, instantiate the custom control and return it as output.


Since I have specified the button aggregation type as sap.ui.commons.Button, add the commons library in index.html page.


Execute the application.


In the elements section of developer tool you can see the HTML Code generated as specified in the rendering logic.


About Arun


  1. Want to sell more of your writing? Common sense suggests that you can only sell what you've already written. So let's look at ways in which you can write more. https://globalscience.ru/news/intznat/8890-kak-pravilno-podgotovitsya-k-ekzamenu.html

  2. During this site, you will see this shape, I fractiously propose you get limit with this system. https://vograce.com

  3. I am unable to read articles online very often, but I’m glad I did today. This is very well written and your points are well-expressed. Please, don’t ever stop writing. this website

  4. I just couldn't leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts. wiza do Kanady

  5. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! Indian vixaj online

  6. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! nzeta

  7. After reading this I thought it was extremely and very informative. I appreciate you taking the time and energy to put this information together. Eligible citizens can apply for a Turkey Visa Online through a simple online application form to obtain an approved e-Visa electronically linked to their passport.

  8. Thank you �� The international travelers who travel to Kenya need visas Kenya. That they can apply online and can get the 24*7 customer assistant.


Powered by Blogger.