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”.
[email protected] 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”.
[email protected] 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.
[email protected] 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.
[email protected] 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.
[email protected] 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 index.html
● The first file to be executed is index.html.
● This is the only HTML file available for the entire UI5 application.
2. Execution of Component.js
● Next, Component.js executes.
● It makes another call to manifest.json, which is a configuration file containing
various settings for the application.
3. Manifest.json and RootView Configuration
● From manifest.json, the system picks up a specific configuration called
RootView.
● The RootView configuration points to a specific file/view, known as the
application base view (APP.VIEW.XML).
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:
INDEX.HTML-> COMPONENT.JS -> MANIFEST.JSON -> ROOTVIEW CONFIG -> BASE VIEW
(APP.VIEW.XML) -> VIEW CONTAINER (SAP.M.APP) -> ACTUAL VIEWS (VIEW1, VIEW2, VIEW3,
____)
[email protected] 6
V GANGIREDDY SAPUI5_On_BTP Linkedin
INDEX.HTML file:
The index.html 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 Component.js file.
Key Functions of index.html:
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 index.html file. You will see the SAP default UI theme applied automatically. If you
want to use a different theme, you can configure it accordingly.
[email protected] 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
[email protected] 8
V GANGIREDDY SAPUI5_On_BTP Linkedin
COMPONENT.js 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 Component.js file.
UI Component: It is a parent library for a component. Which is given by SAP.
[email protected] 9
V GANGIREDDY SAPUI5_On_BTP Linkedin
It will make a call to the Manifest.Json 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.
[email protected] 10
V GANGIREDDY SAPUI5_On_BTP Linkedin
View1.Controller.js: It should be present inside the controller folder. View1 is controlled by the
View1.Controller.js file.
Manifest.json 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. sap.app – Automatically managed by SAP, it contains application-related metadata like
ID, type, and title.
[email protected] 11
V GANGIREDDY SAPUI5_On_BTP Linkedin
2. sap.ui – 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.
[email protected] 12
V GANGIREDDY SAPUI5_On_BTP Linkedin
Rootview configuration: It is the first view (App.view.xml) that needs to be loaded. This is
known as the rootView configuration in the manifest.json file.
[email protected] 13
V GANGIREDDY SAPUI5_On_BTP Linkedin
Mapping File (Routing):
It is located in the manifest.json 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.
[email protected] 14
V GANGIREDDY SAPUI5_On_BTP Linkedin
Now open the View1.view.xml file it have some default code in the ui5 application.
Now open the View1.controller.js file. This JavaScript file controls the behavior of the view1 and
handles the logic behind the UI defined in View1.view.xml. This java script has some default
code present I have highlighted in the picture below.
[email protected] 15
