Introduction 

The present version of UI5: 1.46.10 have 226 controls with different properties. But when we develop our application, sometimes we reach a point where the properties available for a certain control lags in fulfilling our requirement.

thanks @ Dennis Seah  for the suggested edit.

What to do if the control lags fulfilling our requirement?

Well UI5 gives us the ability to extend our control with new properties.

Extending the control means we can inherit our control’s basic functionality and add new features to it. This is how many controls work. Let’s take sap.m.VBox which extends properties of flexBox. that is, whatever functionality possible on Flex Box is possible with VBox on top of it’s own properties. A custom control will allow us to extend VBox and provide it some new properties.

The VBox has limitations. We cannot change its background color .

So we add a new property to add this functionality to VBox. We create a new control with this feature. This control will be called a Custom control.

Create a VBox which can have background color :

Procedure  :

• Open webide and create a new project with ui5 template.
• We assign ID to our Page.

• <!-- View -->
  <mvc:View controllerName="customControl.controller.Home" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
  	displayBlock="true" xmlns="sap.m">
  	<App>
  		<pages>
  			<Page title="{i18n>title}" id="VBox">
  				<content>
  				</content>
  			</Page>
  		</pages>
  	</App>
  </mvc:View>

• Now we add a VBox into our page from controller :

• sap.ui.define([
  	"sap/ui/core/mvc/Controller",
  ], function(Controller {
  	"use strict";
  
  	return Controller.extend("customControl.controller.Home", {
  		onInit : function(){
  		// creating a vbox with label into it
  			var Box = new sap.m.VBox({
  				width : "10rem",
  				items : new sap.m.Label({text: "hello"})
  			});
                // placing it into our view
  				this.getView().byId("VBox").addContent(Box);
  		}
  	});
  });

• We get the output as :
• 
• Vbox with no color and neither can we add Background Color. Sad right. 🙁

Now we will extend the VBox Property for background color.

Steps : Create a folder called control in your project.

Create a file with name  customVBox.js

The folder structure looks like this :

Now let’s extend the properties.

Write the following code into customVBox.js

sap.ui.define([
  "sap/m/VBox"
], function(VBox) {
  "use strict";

  return VBox.extend("customVBox", {
    metadata: {
      properties : {
        "backgroundColor" : "sap.ui.core.CSSColor"
      }
    },
    onAfterRendering : function() {
      // make sure that onAfterRendering function in VBox is not overwritten
      if (VBox.prototype.onAfterRendering) {
        VBox.prototype.onAfterRendering.apply(this, arguments);
      }
      if (this.getBackgroundColor()) {
        this.$().css("background-color", this.getBackgroundColor());
      }
    },
    renderer: {	}
  });
});

• Now we need to call our custom control into the view.
• Once it is called we use it instead of VBox, and set the background color property.

The controller :

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	//calling the custom control from a folderinside project say control , giving its file name
	"customControl/control/customVBox"
], function(Controller, customVBox) {
	"use strict";

	return Controller.extend("customControl.controller.Home", {
		onInit: function() {

			var Box = new customVBox({
				width: "10rem",
				backgroundColor: "yellow",
				items: [
					new sap.m.Text({
						text: "hello"
					})
				]
			});
			this.getView().byId("VBox").addContent(Box);
		}
	});
});

The property we created for setting background color is set now and we pass the color.

This is how it looks like now :

Hurrey! we are done with creating a VBox with background color.

With the same procedure we can create any other additional property for our control.