Getting Started with SAPUI5 Development With Business Application Studio For Beginners

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

Working with SAP Business Application Studio

start the SAP Business Application Studio.

Create an SAP Fiori dev space with the name "UXDemo"

Choose Create Dev Space.
Enter UXDemo as Dev Space name.
Choose SAP Fiori as the application type.
Choose the Create Dev Space button.

Steps To Create the UI5 Project

Step 1: New Project from Template

Step 2: Select the SAP Fiori Application

Step 3:Create an freestyle Application, Starting with Empty Page.

Step 4: Select The Data source and Service selection

Step 5: Entity Selection

Step 6: Project Attribute Details

Step 7: Free style Application is Created.

Download the required project dependencies using command npm install.

Select Terminal → New Terminal from the SAP Business Application Studio menu.

In the terminal window that appears, type npm install and press Enter

Output 'Hello World' via the index.html Page in the Prepared SAPUI5 Project

Open the index.html page in the editor.
1. In the Explorer view of the SAP Business Application Studio, double-click webapp → index.html in the project structure
2. Add a <title> tag as a child to the <head> tag and use it to set the title of the HTML page to "Exercise Application".
  Further, add a <div> tag as a child to the <body> tag and output "Hello World" over it on the HTML page.

Test run your application by starting it from the SAP Business Application Studio.