Skip to Content
Author's profile photo Former Member

Create custom control – Bubble

Hello Everyone, I would like to explain how to create a bubble in SAP UI5 using third party library such as D3.

In our daily day work life of meeting the business requirements and expectations of clients. Many a times we do come across a situation where customer needs some different kind of graphical visualization to show the values to get more delightful user experience. So In such cases during implementation we face find difficulties in finding a right control from the SAPUI5 library.

In such cases SAPUI5 provides a feature of called “custom control” where we can create any kind of control we desire to create and can be reused for multiple times.

So lets start to create a custom control.

First create a javascript file by name convenient to you for ex: Bubble.js

Import the third party library( I am using D3 library to create circle and other shapes. we can use simple html svg even to create without using D3.

But I prefer using D3 since it is already available in SAPUI5 standard third party library)“sap/ui/thirdparty/d3”);

Declare the package name as you wish.“myAppName.ui.control.viz.Bubble”);


Implement the body of drawBubble method to draw the bubble.


Then you are done with custom control. Now lets see how to use it in a view.

Import the custom control name space in the view and use it as shown below.


Now run the app on a web app preview or on your server. You could see the bubble with the color and text you have set in the xml.


You can also download the attached files to run on your eclipse having folder structure as shown below. Rename attached .txt files to .js files




Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nigel James
      Nigel James

      Thanks I am going to review this and use it as a base for further D3 controlls.