Skip to Content
Technical Articles
Author's profile photo Dhanasupriya Sidagam

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

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Juan Pablo Quintin Rodriguez
      Juan Pablo Quintin Rodriguez

      Hi. Thank you for sharing this example. Can you say me what is better SAP business application studio or SAP web IDE?. I mean to program like proyects fiori.

      Thank you and regards.

      Author's profile photo Dhanasupriya Sidagam
      Dhanasupriya Sidagam
      Blog Post Author

      Hello Juan

      I will write a blog on the differences and benefits.

      Author's profile photo saket amraotkar
      saket amraotkar

      SAP WebIDE is far better than BAS, i was under impression that WebIDE will be central tool for all SAP related development which SAP declared earlier, and all of sudden BAS, its very confusing for developers.

      Author's profile photo Srikar Nagadevara
      Srikar Nagadevara

      Hi supriya,

      Can you let me know what cases we can go for SAP Application business studio over SAP WEB IDE ?

      Author's profile photo Dhanasupriya Sidagam
      Dhanasupriya Sidagam
      Blog Post Author

      Hello Juan

      I will write a blog on the differences and benefits.

      Author's profile photo Mohammad Saif
      Mohammad Saif

      Good job. Keep up your learning and sharing spirit high.

      Author's profile photo Pedro Jorge Gonçalves Filipe
      Pedro Jorge Gonçalves Filipe

      Hi,

       

      Did someone already understood how to import an ABAP Repository Fiori App into SAP Business Application Studio ?

      It was quite simple to import ABAP repository App into WEB IDE, change the App and Deploy Fiori again to ABAP repository. Even if I use /UI5/UI5_REPOSITORY_LOAD to download the ABAP Repository App, I did not understood how to upload it on Business Studio.

       

      Any idea how to solve this gap ?

       

      Author's profile photo Debabrata Behera
      Debabrata Behera

      I am also facing same issue . Not sure Why SAP is frequently changing the IDEs . Again we have spend time to know this..

      Author's profile photo Raya Hemanth
      Raya Hemanth

      Hi,

      How to connect to ABAP repository on-premise???

      The only difference I see is development tool is migrated from SAP cloud to AWS cloud which might be more expensive for customer.