Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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)

jQuery.sap.require("sap/ui/thirdparty/d3");

Declare the package name as you wish.

jQuery.sap.declare("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

Thanks,

Vinay

1 Comment