Skip to Content

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”);

Capture.PNG

Implement the body of drawBubble method to draw the bubble.

Capture.PNG

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.

Capture.PNG

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.

Capture.PNG

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

Capture.PNG

Thanks,

Vinay

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply