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

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);
				oRm.openEnd();
				oRm.renderControl(oControl.getAggregation("_combobox"));
				oRm.close("div");
			}
		});
	}

);

Mention the created control in view.xml