SAP UI5 app development using SAP Business Application Studio

Hello All

These days i am working on new learning’s. This blog explains a basic workaround on custom controls development and I have used SAP Business Application Studio as my IDE tool.

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

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.

Comments are accepted 🙂

Thank you!!

#EnhanceLearning

BR//Dhanasupriya Sidagam