Work with Sap UI5 app created in WEB IDE and Imported in BAS

[divyamandava]

I am grateful to share the concept of Work with Sap UI5 app created in WEB IDE and Imported in BAS. So, found gathering info here and there. There by I am writing this blog which would be more useful within single shot.

In this Blog I tried to make things simple and easier with some reference screenshots that helps you to work on Sap UI5 app created in WEB IDE and Imported in BAS.

Now lets get into the Show:)

Here I am using an application with JSON DATA locally.

In this blog we will cover the below topics:

1. SAP Web IDE Personal Edition SETUP


2. Create SAPUI5 application.


3. BTP Trail account setup.

Prerequisites:

Step a: Firstly, install the Orion server, and login with your own credentials.

Please refer the below link for WebIde setup with Orion server.

https://blogs.sap.com/2020/07/17/sap-web-ide-personal-edition-setup-and-create-sapui5-application-fo...

Step b: Please refer the below link for BAS Account setup.

https://blogs.sap.com/2022/05/08/creating-a-new-bas-account-from-scratch/

 

Build Sap ui5 Application Web IDE Personal Edition Setup:

 

Step 1: Go to File  and create application, here I have created the application with the project name oTable.

Now from the View1.view.xml write the code, which you can write code for visualize the UI.

In View1.controller.js, write the functionality which needs to perform the actions on the view and load the data that needs to be visualised in the UI screen.

Step 2: Next, it’s time to run the application. So, right-click on the application -----> Select Run -----> Run as -----> Component.js.

Now here we go, we can see our application running with table data in UI.

Step 3: Next, we have to download only the web app folder from the application to your local system.

Step 4:  After downloading the web app folder we need to rename it to another project name removing name from web app.

Start running the Dev Space and open Business Application Studio:

Step 5:  Now your working environment gets ready and loads your workspace.

Here is your workspace loaded, from here our real story get started.

Step 7: Click on = icon, from there you will find File -----> Import Project

After selecting import Project, a dialog box appears asking for the project (Which you renamed the web app) to get selected. So, I selected oTableee as I named web app like wise.

Step 8: Soon after the project get imported, a dialog appears as like below image asking you to    Start Migration.

 

Step 9: Once you click on that button it will have below screen asking you to enter your Sap system, Destination, Hostname, Sap Client, and Sap Ui5 preview version.

Click on Start Migration again.

Once the migration has been done, we can see all the node modules and Packages gets added to the project.

 

Step 10: Now right click on the project and open in the integrated terminal.

Soon after that a terminal will appears to you at the bottom of the screen.

Type npm init

Step 11:  npm run build

Step 12:  npm start

Click on enter if you don’t need to enter any details.

Hurray over application started running BAS, and the same screen gets displayed in UI.

 

References:

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/

https://help.sap.com/fiori_bs2013/helpdata/en/a7/1564526ba1f25fe10000000a423f68/content.htm?no_cache...

 

 

Finally We are done!!!

Kindly provide your valuable Feedback on this blog.

 

Hope its helpful,

Divya Mandava