V GANGIREDDY SAPUI5_On_BTP Linkedin
Steps to create a sample ui5 project on sap BTP:
STEP 1: If you are in the main window of Business Application Studio (BAS):
Click on "New Project from Template."
If you are in any directory -> Click on the Menu button → choose “File” → select “New Project
from Template”.
vgangireddy09@[Link] 1
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 2: When we select “New Project from Template”, the following window appears. Select
“SAP Fiori Generator” because we are creating the UI5 application from scratch.
Choose “SAP Fiori Generator” → click on “Start”.
STEP 3: In the next window, select the template type. Choose “Basic” since we are creating a
UI5 application with an empty page (i.e., from scratch).
Click on “Next”.
vgangireddy09@[Link] 2
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 4: In the data source and service selection window, choose “None” from the drop-down
menu because we are only displaying UI elements for now.
Click on “Next”.
STEP 5: Next, a window will appear to specify the view name. By default, the view name is set
to View1. For now, we will keep the default name.
Click on Next.
vgangireddy09@[Link] 3
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 6: Now we need to enter the project attributes.
Enter the Module Name (this will be the name of your project).
Enter the Application Title, which will be displayed as the app name.
Leave the Application Namespace empty.
Keep the remaining attributes as they are.
Click on the Finish button.
vgangireddy09@[Link] 4
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 7: The project will be created and required dependencies will be installed. After
installation, a pop-up will appear asking to open the project folder.
Click on Open Folder.
STEP 8: Your project is now open and ready for development.
vgangireddy09@[Link] 5
V GANGIREDDY SAPUI5_On_BTP Linkedin
Flow of Execution of an SAP UI5 Application:
Once we run the project/UI5 application, everything that happens behind the scenes until we
get the output in the next window/browser is known as the "Flow of Execution."
Process:
1. Execution of [Link]
● The first file to be executed is [Link].
● This is the only HTML file available for the entire UI5 application.
2. Execution of [Link]
● Next, [Link] executes.
● It makes another call to [Link], which is a configuration file containing
various settings for the application.
3. [Link] and RootView Configuration
● From [Link], the system picks up a specific configuration called
RootView.
● The RootView configuration points to a specific file/view, known as the
application base view ([Link]).
4. Loading Views via the View Container and Router
● Inside the base view, there is a View Container that gets loaded.
● This View Container holds the actual views (View1, View2, etc.), which will be
loaded by the Router.
● The Router is responsible for collecting view files from the view folder and
dynamically loading them into the View Container.
● This ensures proper navigation and rendering of views within the application.
Rootview configuration: It means what is the first file/view that has load is known as “Rootview
Configuration”.
Flow diagram:
[Link]-> [Link] -> [Link] -> ROOTVIEW CONFIG -> BASE VIEW
([Link]) -> VIEW CONTAINER ([Link]) -> ACTUAL VIEWS (VIEW1, VIEW2, VIEW3,
____)
vgangireddy09@[Link] 6
V GANGIREDDY SAPUI5_On_BTP Linkedin
[Link] file:
The [Link] file is not modified by the developer. It serves a crucial purpose in the SAP UI5
application by loading SAP UI5 libraries at runtime. After this, it calls the [Link] file.
Key Functions of [Link]:
a) Loads the SAP UI5 runtime.
b) Loads a theme.
c) Assigns a namespace to the webapp folder.
SAP UI5 Themes:
Custom themes can be created using the Theme Builder. The available SAP UI5 themes include:
1. SAP_bluecrystal
2. SAP_belize
3. SAP_belize_plus
4. SAP_hcb – Designed for visually impaired users.
5. SAP_fiori_3
6. SAP_fiori_3_dark
7. SAP_horizon
8. SAP_horizon_dark
Click on the [Link] file. You will see the SAP default UI theme applied automatically. If you
want to use a different theme, you can configure it accordingly.
vgangireddy09@[Link] 7
V GANGIREDDY SAPUI5_On_BTP Linkedin
Webapp Folder (Resource Folder): When we create an UI5 application it generates a webapp
folder. The webapp folder is also referred to as the resource folder in an SAP UI5 application. It
contains six key resource files:
1. Controller
2. CSS
3. i18n (Internationalization files)
4. Model
5. Test
6. View
vgangireddy09@[Link] 8
V GANGIREDDY SAPUI5_On_BTP Linkedin
[Link] file: It acts like a global controller. If you want to use the same functionality
across all the views of your application, you can write the functionality in the [Link] file.
UI Component: It is a parent library for a component. Which is given by SAP.
vgangireddy09@[Link] 9
V GANGIREDDY SAPUI5_On_BTP Linkedin
It will make a call to the [Link] file.
View1: It is located inside the View folder. When we create a SAPUI5 application, we create a
view named View1 to define the UI layout.
vgangireddy09@[Link] 10
V GANGIREDDY SAPUI5_On_BTP Linkedin
[Link]: It should be present inside the controller folder. View1 is controlled by the
[Link] file.
[Link] File: It is a configuration file for a SAPUI5 application. It contains metadata and
settings that define the application's behavior. It has three main sections:
1. [Link] – Automatically managed by SAP, it contains application-related metadata like
ID, type, and title.
vgangireddy09@[Link] 11
V GANGIREDDY SAPUI5_On_BTP Linkedin
2. [Link] – Also handled by SAP, it defines the user interface settings.
3. sap.ui5 – Developers can modify this section to configure models, resources, routing,
and other app-specific settings.
vgangireddy09@[Link] 12
V GANGIREDDY SAPUI5_On_BTP Linkedin
Rootview configuration: It is the first view ([Link]) that needs to be loaded. This is
known as the rootView configuration in the [Link] file.
vgangireddy09@[Link] 13
V GANGIREDDY SAPUI5_On_BTP Linkedin
Mapping File (Routing):
It is located in the [Link] file within the sap.ui5 section. Routing is the process of
mapping URL patterns to the corresponding views that should be loaded. It is divided into three
parts:
1. Default Config: Contains default values; no changes are needed.
2. Routes Config: Defines the route name and pattern. When the pattern is matched, it
triggers the corresponding target.
3. Target Config: Specifies which view should be loaded when a route is triggered.
vgangireddy09@[Link] 14
V GANGIREDDY SAPUI5_On_BTP Linkedin
Now open the [Link] file it have some default code in the ui5 application.
Now open the [Link] file. This JavaScript file controls the behavior of the view1 and
handles the logic behind the UI defined in [Link]. This java script has some default
code present I have highlighted in the picture below.
vgangireddy09@[Link] 15