SAP UI5 app development using SAP Business Application Studio

This blog explains a basic workaround on custom controls development and I have used SAP Business Application Studio as my IDE tool.

Also Read: SAP Certification

Lets begin the development. Make sure to have an active subscription to SAP Business Application Studio from Cloud Foundry environment.

Click on Create Dev Space

Name the Dev Space like zdemo, choose SAP Fiori and then Create.

Check for Running state and press zdemo

From below landing page, go with New project from template

Follow the below steps to create the project.

Name your project

From the workspace, create folder control and file CustomControl.js


I used sap.m.ComboBox for demo purpose. This can be replaced by our own custom design.

sap.ui.define(["sap/ui/core/Control", "sap/m/ComboBox", "sap/ui/core/Item"],
	function (Control, ComboBox, Item) {
		"use strict";
		return Control.extend("ns.HTML5Module.control.CustomControl", {
			metadata: {

				aggregations: {
					_combobox: {
						type: "sap.ui.core.Control",
						multiple: false,
						visibility: "hidden"
			init: function () {

				this.setAggregation("_combobox", new ComboBox("idComboBox", {
					items: [
						new Item({
							key: "1",
							text: "Supriya"
						new Item({
							key: "2",
							text: "Sainath"
						new Item({
							key: "3",
							text: "Bhuvana"
			renderer: function (oRm, oControl) {
				oRm.openStart("div", oControl);


Mention the created control in view.xml

Now it’s time to run our application. Click Run from Left Pane.

Choose + sign

Proceed with below steps.

Finally the output can be seen in New Tab once we press on Expose and Open.

Leave a Reply

Your email address will not be published. Required fields are marked *