Creating custom SAPUI5 controls

SAPUI5 comes with a collection of large number of UI Controls which you can use but there are often occasions when you would need custom controls for your UX behavior. In this post I would like to share how easy it is to create a SAPUI5 custom control.

We will extend the SAPUI5 core control, provide our own logic for rendering, specify some properties (default) and then create an instance of this control with new properties and place it in the view.

Part 1: Extend Custom Control

sap.ui.core.Control.extend(“my.rpb”, {})

I am naming the new custom control as “my.rpb”, use your own namespace as suited, for e.g. “xyz.roundprogressbar” or so on. All UI5 controls needs to be extended from the core Control (or from existing control). I could have very well extended the existing progress bar control provided by UI5, but I didn’t for now to keep it simple and generic. In the “{}” you can supply your own method set but most importantly you need to override “renderer” and “metadata“. “renderer” allows you to use your own view display logic or define how the control would essentially be rendered on the screen. “metadata” allows you to specify customizable properties which you want to provide to the user of this control.

oRm.writeEscaped(‘0%’); // write another Control property, with XSS protection

oRm.write(‘</span>’);

oRm.write(“</div>”);

},

renderer method is supplied by two arguments, oRm and oControl. oRm is renderer manager class while the oControl refers to the instance of this control itself. Please note that since RendererManager makes a render call, this is not available inside the method, hence you need to use the oControl variable to refer to the control.

While explaining the logic is not important, you can look at the code to understand that the method basically lays out a div and SVG element to create round path for displaying the progress bar.

We have defined these 5 properties, while the first two size and radius needs to be always in sync with each other (radius to be exact half of size), others are user to provide way to customize the look and feel, you can see the previous section to understand how these properties are used.