UI5 AND FIORI

TRAINING
ON VS Code and BAS
www.anubhavtrainings.com
Join us now for a free Demo +91 8448454549
Agenda 2

Who is this Overview of Our use case FAQs and

course for the course for Demo Q&A

www.anubhavtrainings.com
Presentation www.slidemodel.com
 Who is this Course for Technical Advocate –
Ryan Kenn

01 Working in an industry
UX Designer – Jackie
Daniel with other UI
technology and want to
A UX Designer, she be a UI developer with
would like to start 02 SAPUI5
development of UI5
applications
Rahul M
03 -Application
Developer
Fresher - Soham
Sharma
Working as an ABAP
consultant, want to
Fresher with no 04
build apps on ECC or
experience, and aspire
S/4HANA
to become a full-stack
developer
. www.anubhavtrainings.com
3
Overview of the course 4

1. FUNDAMENTALS 3. FIORI UX

Create Fiori Applications

Learn the core concepts of
using Mobile library with
HTML5, CSS, JS, jQuery
latest concepts
Setup BAS 

4. ODATA
2. SAPUI5 DEVELOPMENT

Understand SAP UI5

Build Services in Gateway
framework and SDK and build
system and expose ERP Data
using MVC architecture.
to Fiori Apps

www.anubhavtrainings.com
Presentation www.slidemodel.com
 www.anubhavtrainings.com

40 HOURS TRAINING

The Course is designed for absolute beginner/ABAP Developers who

have never worked on UI5 and aspire to transform their Dialog/WD
programs to Fiori UX Apps.

6
What do we do today? 6

Launch Dev Tool

Start Business Application Studio in BTP

Create Project
01 Create New UI5 Project

02 MVC Architecture

Model, View, Controller

03
Test Our App

04 Run the App preview in BAS

Run In Browser
05
Run the Application in the browser

www.anubhavtrainings.com
Presentation www.slidemodel.com
What is SAP UI5
SAP UI5 is SAP’s Latest UI technology, which is successor of SAPGUI, Webdynpro and BSP. SAPUI5 is a 
framework which is used to develop responsive web applications.

Framework – collection of libraries 
Library – collection of classes e.g. sap.m, sap.ui.layout.
Class – collection of attributes, events, functions and aggregations e.g. sap.m.Button, Text, Input, Switch, List

Responsive – an application which adapt itself according the device.

Processing
Controller

Screen Data
View model

8 www.anubhavtrainings.com
Development Tool
Business Application Studio
VS Code
BAS

• Is provided by SAP • Is provided by Microsoft

• Which is available in trial mode and once trial • Provide similar capabilities with no cost, lifetime
finish, as single developer you can extend trial free
• For productive development in your company, you • VS code is not designed as multi-cloud however,
need to pay subscription fee to use BAS whatever we cover related to Fiori in this course.
• BAS is a multi-cloud development tool which We can develop all of it in VS Code. If your
allows us to develop cloud workflows, HANA company do not want other cloud dev, only want
native, Fiori, Hybrid app, CAP fiori dev. Use VS code to save cost.
• BAS is available as part of BTP platform. There is • VS Code needs to be installed in our local
no installation required to use BAS. computer.
• BAS is pre-configured with all the required • We need to install important components in our
components needed to develop fiori apps. system to use VS Code for Fiori development
• BAS cannot work w/o internet connectivity. • It works offline in your local computer.
• BAS is just a baby of VS Code. • This is the original tool.

Anubhav recommend students to use VS Code (cost).

8 www.anubhavtrainings.com
 BTP and BAS
BTP – Business Technology platform –SAP 
It is a Platform as a Service in the cloud to design, develop, test, delivery, manage end to end
application without any initial investment for development teams.

SAP Provide a free trial for 1 year for BTP

https://account.hanatrial.ondemand.com/trial/#/home/trial

BAS Tool – is a tool as a service to develop application on cloud. Which means no 
installation is required in local computer.

Dev space is a linux

virtual machine.
Dev Developers own
mkdir myfirstproject Dev Dev Dev Dev
space space pre-configured
cd myfirstproject/ space space space space
touch anubhav.html 4GB for a specific type of
development.
BAS – Development tool as a service
In trial we can only
create 2 dev space
BTP – Hardware, OS, Networking – 100GB and run one at a time.
8 www.anubhavtrainings.com
VS Code
Provided by Microsoft and free for lifetime.
Pre-requisite
1. Node JS – v16
Windows 64-bit Installer: https://nodejs.org/dist/v16.16.0/node-v16.16.0-x64.msi
2. Check if node is installed – node –v
3. Setup SAP UI5 tooling
npm install -g @ui5/cli (test using command ui5 --help)
npm install -g @sap/ux-ui5-tooling (test using command fiori --help)

Main Course
https://code.visualstudio.com/download

1. We need to create a directory in computer where we want to keep all our projects (workspace)

8 www.anubhavtrainings.com
HTML5
HTML stands for HyperText Markup Language, it is used to create static web content.
• HTML is not a programming language
• HTML page is also called as HTML Document
• There were different version of HTML which came since the inception
• W3C (World Wide Web Consortium) is the organization which drives the versions of HTML
Year Version
HTML 1991
HTML 2.0 1993
<html>
HTML 3 1997
HTML X 2000
<head>
HTML5 2014

• HTML5 is merely latest version of HTML

• HTML pages are easy to design, all browsers directly understand HTML
• An HTML page consists of 2 parts – Header (Brain), Body (Content) <body>
• The users can only see the body
• HTML is a tag based markup (html element syntax)
<tagname prop=“val”>CONTENT</tagname>
CONTENT
https://www.w3schools.com/html/ www.anubhavtrainings.com
8
Funda Fox

There is Nothing
like Magic
8 www.anubhavtrainings.com
Funda Fox
• HTML is a tree data structure
• We can have nesting of element one another
• This tree data structure can also be seen at runtime (when we test it in browser)
• We can use F12 key of keyboard which will open browser development tools (any browser)
• We can check Elements Section to observe this tree data structure
• This tree data structure is called DOM (Document Object Model)

8 www.anubhavtrainings.com
Client-Server Architecture

Request (header + body(optional))

port
Browser
Response (text, json, xml, html) Server
(Chrome, Firefox, IE)
(Response header + Body)
Client

Three ways to make request

Form Submit
Ajax
HTTPRequest
Request
GET – Read data
POST – Create Data No Copy paste code
PUT – Change Data
DELETE – Remove Data
PATCH – Adapt few data
8 www.anubhavtrainings.com
Exercise
Add 3 images on the screen,
1. When we click on any image, it should open some website
2. Align the images in a straight line

Add border for each image

Make sure they are responsive
Add a margin of 5 px

8 www.anubhavtrainings.com
Block level elements in HTML
We can design modern websites using modular blocks. There are 2 block level elements in HTML
1. div – division tag, it is used to create block of element. It does not have its own footprint but used to GROUP 
and ORGANIZE the content on the page. Div always starts from new line.
2. Span – inline element, it keeps all the content in a single line. But still allow creation of group.

When we group content, we provide a class property also, class represent a classification, grouping.

8 www.anubhavtrainings.com
CSS
CSS Stands for Cascading Style Sheets, it is used to format / beautify / prettify the HTML content. The CSS was
introduced to overcome tag based styling.

<p>I love India</p>

<p>I <color value=“red”><b>Love</b></color><color value=“blue”><em>India</em></color></p>

How can we apply CSS?

• Inline CSS – where the css code is applied in the line itself. Targeting single element on the page at a time. It is 
not reusable. It also cause heavy maintenance.
<tagName style=“prop:val;prop:val”></tagName>
• Internal CSS – In this case the style code will be written at page level. This is completely reusable style code. It 
will cause less maintenance because style code have potential to change multiple element style together. It is
written in style tag.

selector { Selector will identify the element(s) which we target

prop: value; tagName
prop: value;
}
.className
#id
• External CSS – We use link tag to connect to an external css file.
8 www.anubhavtrainings.com
Responsive web design
A web-design which adapt itself according to different devices. The advantage is that the application will auto
adapt according to device you run, this way we write code ONLY ONCE.

Box Model
A box model indicates the position and relative position of the HTML elements on the page.
margin

border border
padding padding

element element

8 www.anubhavtrainings.com
Java Script
Java Script is browser’s programming language. Java and Java Script are completely different in their design,
purpose and usage.

Types of JS
• Client Side JS – When our JS Code runs in the browser, we call it as client side java script. Java Script is the 
only language which browser understand automatically. We can test JS directly in browser console. It is
considered to be very fast execution. We use it to develop web application, also SAP UI5 applications. This
course is 99% of time we will work with client side js.

• Server Side JS – When the JS Code runs on the server side, its called server side java script. Example of 
server side js is NODE JS. The purpose is to read data from db, manipulate data, business logic, send mail.

8 www.anubhavtrainings.com
Three ways to use JS code
1. Inline JS – the java script code will be written at element level, this code is not reusable. We always write js 
code against an event. Whenever user does an activity on the UI and event will trigger like onclick, ondblclick,
ondrag.. We can check complete list of JS events here
2. Internal JS – the java script code is written at page level, it will be written inside <script> tag. This code will be
fully reusable. We write our code inside functions.
3. External JS – the java script code will be written outside the HTML page, and can be linked through the 
<script> with src property. The code is always written inside a file with extension as .js

Funda Fox
• Java script is a case-sensitive programming language, if we write iloveindia OR iLoveIndia (both are different)
• Every JS statement ends with semi-colon (;)
• When we create variables, we do not need to specify the data type. Based on assigned value system will
assign data type automatically.
• JS follows camel case naming convention – first letter is always small and next consecutive word’s first letter is 
caps. Iloveindia  iLoveIndia wearelearningjs  weAreLearningJs
• This naming convention is used to create variable and functions.
• Symbols are very important
( ) – parenthesis
{ } – curly braces
[  ] – bracket
8• JS is asynchronous non blocking programming language www.anubhavtrainings.com
Output functions in JS
Alert
Console.log
Document.write
Element.innerText

Functions in JS
There are 2 ways we can create functions in JS
1. Anonymous function
function (p1, p2){
code;
}
2. Named function
function functionName(p1,p2){
code;
}

8 www.anubhavtrainings.com
Built-in object
document – it is an object of DOM. It represents the object of our html which can be used to traverse and
manipulate html element(s). It provides functions like getElementById, getElementsByClassName,
getElementsByName. To get access of the html element object.

window – it is the object of browser window, which will help us accessing browser object to open, close etc.

How to create variables in JS

var to create a variable which acts as global variable. Use let which creates a variable for local scope within the
function. In addition we can use const to define constant which can be used to create constants which will never
change its value.

Console is your best friend.

Whenever there is an error, please check console

8 www.anubhavtrainings.com
Types of variables
Singleton variable array objects

Just hold one value Multiple value of same data It can hold multiple values
type of different data type
When we assign another
value, it overwrite These values inside array Objects are like structures
are called items in abap
var x = 10;
The index of first item starts
with zero 0

var arr = [ i0, i1, i2 ]; JSON – Java script object

notation
Table of records arr.length
{
Array of JSON
prop: value,
prop: value,
prop: value
}
8 www.anubhavtrainings.com
Funda fox
In js, the = is assignment operator.
== comparison
=== compare value as well as data type

What JS can do?

• It can validate user input
• It can show output
• It can change css at runtime
• Manipulate the dom
• Write business logic
• Check data consistencies
• Processing logic

We can use chaining in js.

8 www.anubhavtrainings.com
Debug Shortcuts
Open F12, go to sources tab, locate file and setup breakpoint

ABAP JS
Step over F6 F10
Step inside F5 F11
Continue execution F8 F8
Step out F7 Shift+F11

Exercise:
Make the magic button work like toggle to change color between green and black.

8 www.anubhavtrainings.com
Async Non Blocking
UI Class 1 Class 2

synchronous
Wait for
processing to
finish
BLOCKED

Not Blocked Asynchronous

Callback functions
Promise

Not every function in JS is asynchronous, only few functions will behave like this.

8 www.anubhavtrainings.com
Title
<>

JS library = Collection of functions

Mycode.js

Index.html

8 www.anubhavtrainings.com
Introduction of jQuery
jQuery is a JS library, the purpose is to write less and do more
It is used to simplify JS code
• Open Source
• Used by top industry players like google, nextflix, SAP, Microsoft
• Available in local and internet version
• Simple to use
• Best practice
• SAP UI5 is built on top of jQuery

Syntax
$(selector).function();
Selector
tagname
.classname
#id

8 www.anubhavtrainings.com
Node JS
It is a framework which allows us to run java script code outside the browser. It is capable of
- Checking user input
- Validating data
- Send email
- DB lookup
- Business logic
- Calling external apis
v16
Nodejs.org

Java Script V8  Node JS

Browser
Server
Java Script

8 www.anubhavtrainings.com
Start node project
1. Create a new directory – mkdir mynodeproject > cd mynodeproject
2. Mark this project as node project – npm init

Node package manager – npm

It is worlds biggest reusable code repository, we have billions of code repository posted by millions of developers
on community. It has modules to do everything from pdf to excel, sending emails to running web servers.

Some node modules gets installed along with node js but some we need to import from npm over internet in our
computer.

8 www.anubhavtrainings.com
What is SAP UI5
SAP UI5 is a framework to develop responsive web applications.
Framework – collection libraries 
Library – Collection of classes HTML+CSS+JS
Class – Collection of functions, attributes, events and aggregations

project

sap.m sap.viz sap.ui.comp

Renderer
sap.ui.table sap.ui.layout Sap.ui.suite

sap.ui.core sap.ui.core.mvc sap.ui.unifed

SAP UI5 Design Time Component SAP UI5 Runtime Component

8 www.anubhavtrainings.com
SAPUI5 SDK (Software Development Kit)
Provided by SAP to understand, learn, build, SAP UI5 applications including complete documentation.

https://sapui5.hana.ondemand.com

8 www.anubhavtrainings.com
MVC Architecture
Any application in software development which have a User Interaction (User interface) should use the MVC
pattern to design the app.

<<action>> Processing <<update>>

<<notify>> Controller

<<notify>>

I/O Data
Data binding
View (Screen) Model

Data binding is a process to connect our model to the view so that the data exchange can happen between the model and
the view.

8 www.anubhavtrainings.com
Start First UI5 project
prerequisite
• Node JS
• Install SAP UI5 tooling – it is a node js based module which helps developers to develop and test application in their local 
environment. npm install -g @ui5/cli npm install -g @sap/ux-ui5-tooling
• VS Code
Main steps
• First we create a folder inside our system which is our project
• Create a new folder called webapp it is a best practice as per sap’s gold standard to build ui5 project, the UI5 tooling will 
detect our project properly only if we have this folder. All the productive files will be kept inside this folder.
• We will create an application descriptor file called webapp>manifest.json which will contain the information about our
application. Added identifier for our app. This is very basic info we need for UI5 tooling to detect our app as UI5 project
• We create launcher file webapp>index.html in this file we will first load SAP UI5 from internet (CDN).
• We will add now the bootstrap code to load sap ui5 framework from CDN (Code to load/initilize SAPUI5 framework when we
start our app)
• We will add the library name, theme which we want to load, root folder name (this is called alias/namespace)
• We can now add the UI5 tooling in place to start and test our project.
• Open terminal in command prompt and navigate to the project directory and our own project directory. First run the npm init
command because ui5 tooling is supported by node js.
• Now execute ui5 init command to initialize ui5 tooling. This will create a new file called ui5.yaml
• To test our project in local computer, we use now the ui5 serve

8 www.anubhavtrainings.com
Views
It is the user interface which user can see. There are 4 types of views in SAPUI5
1. JS View – 1%
2. XML View – 99-100%
3. HTML View – 0%
4. JSON View – 0%

Why XML Views?

• Light weight
• Gold standard – all top industry frameworks will use the XML View like android, Angular, React
• Parsing of XML view is faster than JS view
• Respecting the MVC

8 www.anubhavtrainings.com
Funda Foxes
1. The library names always starts with small letters
2. The control class always starts from capital letter and follow camel case
3. It is a best practice to provide controller name same as the view name so that later when we have many views
and many controllers, we can know which view is for which controller.
4. In SAP UI5, if we see a class, we can simply replace dot with slash to get the module name of that class
5. In JS, the inheritance is depicted using extend keyword
6. We can have one controller for several views. But vice-versa not possible.
7. Whenever we try to find a property, function, event or aggregation inside of a class, and we cannot find the
one, we can go and check the parent class (super class).
8. Every property inside a control have setter and getter methods. For example, if we have a property called text
property, we will have setText and getText functions
9. When we work with SAP UI5, we never obtain the object of UI control using the document api of JS. Rather
obtain the UI5 object using sap.ui.getCore() – is a global UI5 function which provide the object of running
application. Using this application object, we can obtain UI element object by using function byId(“controlId”)
10. In js views, the id generated in DOM for control is same as what was provided in the view.
11. In XML views, the id generated in the DOM will be viewId--controlId
12. If we just want to use control id alone to get its object, we can use the view object rather getCore object. First
we will obtain the view object inside our controller using this.getView() after that we will call byId(‘controlId’).
This cannot be tested in control. this represents the object of the controller class.
13. SAP UI5 best practice says that we should have 1 controller for 1 view.

8 www.anubhavtrainings.com
Scaffolding Template/AMD Syntax
Controller is just a class/module. In software, we can have a class which usages another classes for reuse
purpose. This concept is called inheritance.
If I use many classes inside one class.
AMD – Asynchronous Module Definition (loading)

1s 3s 4s

C1 C2 C3

Parent Class

Myclass
reuse

Class

8 www.anubhavtrainings.com
Syntax for define a module in SAP UI5
Any JS file which you ever use except view in SAP UI5 MUST MUST follow this syntax

sap.ui.define( [ “mod1”, “mod2”, “mod3” ],

function(oD1, oD2, oD3){

});

But controller is a special JS file, To make a controller we must inherit from a standard SAP UI5 class/module
called sap/ui/core/mvc/Controller

sap.ui.define( [ “sap/ui/core/mvc/Controller” ],
function(Controller){
return Controller.extend(‘address of controller’);
});

8 www.anubhavtrainings.com
Under the hood CDN

1 Main.view.js
3
UI5 Framework 4 getControllerName
Return addressofController

2 5 createContent
C return oBtn

Index.html
5

C
Main.controller.js
6
onInit: function(){}

7 Renderer
HTML+CSS

8 www.anubhavtrainings.com
Basics of OOPS
0..n
Passenger
Passport,id,ss,age,gen.

Parent Class
Plane
Pilot, Engine, Wings

inheritance

Association is a relationship between two or more than

Child Class Child Class two classes, so our application can function together.
Passenger Plane Cargo Plane Aggregation – relation between 2 classes which is lose
coupling, both classes can function independently, it is
SHOULD have relationship.
Composition - relation between 2 classes which is
tight coupling, both classes cannot function
independently, it is MUST have relationship.

8 www.anubhavtrainings.com
SAP UI5 Control hierarchy

sap.ui.base.ManagedObjec
t

sap.ui.core.Element

sap.ui.core.Control

Column

Button View List Table

8 www.anubhavtrainings.com
What is XML
XML stands for eXtensible Markup Language, it was originally used to develop interfaces between heterogeneous
programming languages.

Internal table  XML XML  Java Collection

<xml>
ABAP Java

XML  Internal Table Java Collection  XML

XML is also a tree structure with custom tag.
<data>
<name>abc</name>
<salary>
<amount>9000</amount>
<currency>EUR</currency>
</salary>
</data>
Namespace – represent a variable in xml. Created using keyword xmlns

8 www.anubhavtrainings.com
Exercise
Create a input field inside xml view
When user enter any data in the field, and click our button, that data should display in alert popup.

8 www.anubhavtrainings.com
Hook Functions
Are the default functions of the controller class which gets called automatically at certain time by UI5 framework.
onInit – is a function which acts like constructor of a class. This function will get called whenever the UI5
framework creates the object of our controller class at the start of our application. This will be called ONLY once in
the lifecycle of the controller. We can use this function to write initialization code e.g. setting some variables,
creating models etc.

onExit - is a function which acts like destructor of a class. This function will get called whenever the UI5
framework destroys the object of our controller class at the close of our application. This will be called ONLY once
in the lifecycle of the controller. We can use this function to write clean-up code e.g. release resources occupied.

onBeforeRendering - is a function which acts like PBO in ABAP. This function will get called just before UI5
framework displays the view to our user for the corresponding controller of our application. This will be called
MULTIPLE times, every time BEFORE the view is displayed to the user. We can use this function to change view
controls at runtime and do some pre-processing.

onAfterRendering - This function will get called just after UI5 framework displays the view to our user for the
corresponding controller of our application. This will be called MULTIPLE times, every time AFTER the view is
displayed to the user. We can use this function to change show jquery effects and do some post-processing.

8 www.anubhavtrainings.com
Funda Fox - Aggregation
1. When we use aggregation, the name of the aggregation always starts with small letter. The aggregation will
follow its main class namespace.
2. When there is an aggregation with super or grand parent class like Control, Element class, we can pass Any
child class object as a substitute.
3. If an aggregation is a default aggregation, we can skip writing the same. But it is best practice to write your
aggregations.
4. Aggregation does not necessary always mean the object, it can also have alternative type.

8 www.anubhavtrainings.com
Exercise
1. Align the label with input fields inside simple form (hint: check sdk for simple form)
2. Set default value for all the input fields using controller code.

8 www.anubhavtrainings.com
Models
Model is an object of data. There are 4 types of model in SAP UI5
Client Side Model – When our app starts if all the data is loaded at once in client side 
JSON Model
(browser) temporarily during the lifespan of the app. It is used for manipulating data like
XML Model
internal tables in ABAP. Suitable for small set of data.
Resource Model
Server side model – When our app starts the data is requested chunk by chunk from 
OData Model
server. Data will be then fetched using this model to local model. We can write data back
using this model to server e.g. S/4HANA, ECC, BW.

Data binding is a process to connect our model to the view so that the data exchange can happen between the
model and the view.

8 www.anubhavtrainings.com
Steps to create model and use
1. Create a brand new model object
var oModel = new sap.ui.model.json.JSONModel()
var oModel = new sap.ui.model.xml.XMLModel()
var oModel = new sap.ui.model.resource.ResourceModel()
var oModel = new sap.ui.model.odata.v2.ODataModel()

2. Set or Load data into the model

oModel.setData(jsonData);
oModel.loadData(filePath);

3. Make the model aware to the application or view or control

--entire app  all the views and all controller can use our model (data share) - recommended
sap.ui.getCore().setModel(oModel)
--only one view
this.getView().setModel();
--Only to a control
this.getView().byId(controlId).setModel();

4. Perform data binding (different syntax)

8 www.anubhavtrainings.com
XPath – way to address data
If there is a curly braces, use the slash (/) and if there an array, use the slash and index (/index). The Xpath is the
only way to address the data inside our model.
1. What is the salary of our employee
{ /empStr/salary
    "empStr": {
        "empId": "1001",
        "empName": "Anubhav", 2. What is the marital status of Anubhav
        "salary": 10000,
        "currency": "AED", /empStr/mStat
        "mStat": "S",
    },
“empTab”: [ 3. Marital status of Vaibhav
{ /empTab/1/mStat
        "empId": “9001",
        "empName": “Sonia",
        "salary": 15000, 4. Salary of Sonia
        "currency": “USD",
        "mStat": "S", /empTab/0/salary
    }
{
        "empId": “9002",
        "empName": “Vaibhav",
        "salary": 5000,
        "currency": “EUR",
        "mStat": “M",
    }
]
}

8 www.anubhavtrainings.com
Exercise
Bind the checkbox with model data

Next class:
- Can we modularize further by keeping our data inside another file?
Yes, by creating a new JSON file for the data.

- Can I change data inside model at runtime?

Yes, SAP provides the standard functions to read/change data inside the model. The functions are getProperty and
setProperty

- When I change data in model, will it reflect on UI. And is vice-versa possible.
Yes. The vice-versa is possible depends on binding mode

- Concept of Binding mode

Next slide

- Can we use multiple models in one UI5 App? Wont UI5 app get confused if we have multiple?
Yes. Because we will use named model concept. To bind use the model> in binding to fetch data from named model.

- Types of bindings in UI5?

- Can we do conditional binding.
- How can I bind table to show data
8 www.anubhavtrainings.com
Binding Mode
Binding mode determines the exchange of data between the view and the model.
var oModel = sap.ui.getCore().getModel();
oModel.setProperty("/empStr", {"empId": 2000, "empName": "Ananya", "salary": 96566, "currency":"USD", smoker: false});
oModel.getProperty("/empStr/empName");
OneWay – When data is changed in the model, it reflects back to the UI, is called one way.
TwoWay - When data is changed in the model, it reflects back to the UI. also when data changed on UI, and it reflect back to the model, it is called
two way. This is default binding mode for json model.
OneTime – The data will reflect from model to the view only at the start of the app. After that they have no connection at all. One time binding mode 
used for Resource Model.

file
Model OneWay View
{
empStr: {
empName: “Anubhav”
}
} TwoWay Anubhav HHH

ECC
S/4HANA

8 www.anubhavtrainings.com
Exercise
Add a button/Switch on the UI
When we user click flip the models.

8 www.anubhavtrainings.com
Binding Types
4 Types of binding types
1. Property binding – When we bind property of a control with xpath of our model, it is called property binding. 
Example the value was a property of input control in our last exercises. This was all property binding.

2. Expression Binding – When we bind an logic expression instead of xpath to a property, it is called expression 
binding. The syntax is as below
{= expression ? true : false}

Example: make salary field read only IF employee name is Ananya

3. Aggregation Binding – when we bind an aggregation of a control with xPath, it is called aggregation binding. 
Usually aggregation binding is done with parent node of our model and children's of the control will be bound to
the child of json node.

4. Element Binding

8 www.anubhavtrainings.com
Title
The path which connects the parent control with the json parent element is called absolute path and the child
control connecting to the child path of corresponding parent is called relative path
Absolute path = /empTab
Relative path = empId because its in relation to its parent /empTab

8 www.anubhavtrainings.com
Title Model (memory)
<> empTab = 5 records
Element – it is the memory of 
each record

Table rows=“/ empTab” /empTab/0

/empTab/1

/empTab/2

/empTab/3

/empTab/4

8 www.anubhavtrainings.com
Event Objects in SAP UI5
1. Whenever an event is triggered SAP UI5 will pass a default EVENT object to the event handler function, this
event object will contain lots of important information regarding the event.
2. We will also get 3 standard functions for sure in every event object
oEvent.getParameters – this function will return all the event information e.g. rowIndex of the row which user 
selects when rowSelectionChange event was triggered. We can check these list of parameters in event
documentation inside SDK. Because every event parameters are different.
oEvent.getParameter – this function will return exact one parameter details to us
oEvent.getSource – will return the object of the source control from where the event was originated.

Problem with XML Model

1. Every data coming out of xml model is treated as STRING data only. But some of the UI controls require
Boolean or number data type.
2. Hence the binding will fail with xml model

8 www.anubhavtrainings.com
Resource Model
We develop applications for international audience. We would need to translate our app to different languages. A
resource model allows us to enable internationalization (i18n) for our app.

Sofia Roxana
UI5 developer KM manager

https://sapui5.hana.ondemand.com/sdk/#/topic/582ce93d326540f59d149031a44d5fb0.html

URL parameter to test app in different language

?sap-ui-language=hi

8 www.anubhavtrainings.com
Aggregation binding
Anubhav we have seen 4 different ways/syntax of doing property binding. In last class you showed aggregation
binding, can we also have different syntax to do aggregation binding.

Yes.

8 www.anubhavtrainings.com
Formatter
Formatter is a function which gets called just before the binding takes place with our UI. The purpose of formatter
is not change the original data in the model. Rather does the change just before binding takes place on the fly. The
main purpose is to show data on screen which is formatted like date formatting, currency, conversion,
transformation…
Similar concept in ABAP is called “Conversion Exits”

outcome data Model

View
Formatter
{data}
[FIELD]

Make formatter code more reusable

1. Create a new file util/lifeSaver.js
2. Add the reuse functions inside the file and return them
3. Add dependencies of our file lifesaver and create a global object formatter
4. Use the global object .formatter and called the reuse function .formatter.functionName inside of view

8 www.anubhavtrainings.com
Title

sap/ui/core/mvc/Controller

BaseController
Parent / Base Class
X

Main.controller.js Second.controller.js Third.controller.js

X X X

8 www.anubhavtrainings.com
SAP Fiori and How it is different from UI5
SAP Fiori = SAP UI5 + Guidelines

8 www.anubhavtrainings.com
Types of App

Freestyle Fiori Elements

(Current Course) – 70% Fiori Advance Course - 30%

Initialization More time Less Time Consuming

Flexibity High Low

Maintenance High Low

Skills WebDevelopment (UI5) Annotations

Backend Odata CDS View (ABAP on HANA)

Code Owner Developer SAP Owned

8 www.anubhavtrainings.com
SAP FIORI
It is SAP ‘s New user experience (UX)

What is the difference between UI and UX?

- UI is more technical but UX is more emotional/experience of users
- UI Can be changed any number of time but UX Cannot be changed
- Our goal is to make UI developed Closure to the UX

8 www.anubhavtrainings.com
 Free Style Fiori App

Index.html View Controller

How a Fiori like Application look like – More modular and include a launcher file called Component.js
Is a wrapper of our application functionality. Earlier we were putting productive code (like view creation) inside
index.html, we should never do that. All the app functionality MUST start with Component.js

App.controller BaseController

Index.html Root View

Component.js
App.view.xml
View 1 Controller 1
Container
manifest.json Control
App, SplitApp View 2 Controller 2

8 www.anubhavtrainings.com
Component.js
• It is the starting file of our application
• The launcher file of our app, all the productive code starts from here
• Index.html is merely used to test the Component.js
• If you application does not have Component.js, it is not called fiorilikeapp
• There is only and only one Component.js
• Usually kept in the root directory (webapp)
• It comes with companion file named as manifest.json (Also known as Application Descriptor file)
• Technically Component.js is a JS file which inherits from SAP UI5 standard module sap/ui/core/UIComponent
• The syntax look as below

sap.ui.define( [ ‘sap/ui/core/UIComponent’ ], 
function(UIComponent){
return UIComponent.extend(“address”, {
metadata: <link manifest file>,
init: function(){ --call the base class constructor },
createContent: function(){ --root view });
destroy: function(){ --clean up code }

});
});

8 www.anubhavtrainings.com
Title
<>

App.view.xml

App Container Control

idAppCon

View 1 View 2

Page Page

Controller 1 Controller 2
8 www.anubhavtrainings.com
List Control
A control which is capable to display multiple list items. It is a single column table.

0..n
items ListItemBase
sap.m.ListBase

DisplayListItem StandardListItem

CustomListItem InputListItem

ObjectListItem ColumnListItem
sap.m.List
ActionListItem FeedListItem

8 www.anubhavtrainings.com
Exercise
Display the availability status as Available for avocado
Also show an extra text inside the object list item as “it contains natural salt”

8 www.anubhavtrainings.com
Manifest – Application Descriptor
Recently I have joined a new project and directly was assigned some work. This new UI5 project, I have many
Questions like which views are used, how navigation is happening, are there some versioning for project, what is
project name, what kind of project it is, how many models are used, where are they…?
Manifest json is an application descriptor file which contains all of the important application properties, some
properties are just for documentation purpose and some to drive the functionality of overall application. The best
part is, it is more declarative. E.g. last time, we created model.js and lots of code to create model, if we use
manifest, just declare what you need and SAP UI5 framework will interpret and create the object automatically.
It consist of 3 import sections – sap.app, sap.ui, sap.ui5

We can check specification/documentation of manifest

https://sapui5.hana.ondemand.com/#/topic/be0cf40f61184b358b5faedaec98b2da

8 www.anubhavtrainings.com
Exercise
I would want to search based 2 criteria
1. Name
2. Type of fruit

Both search categories must work together.

---17-10-2022 – exercise

1. Enable multi select mode for list control

2. Display a toolbar in the list
3. Add a delete button for the list toolbar
4. When user click delete button by selecting multiple elements and hit delete, remove all those selected items

--18-10-2022 – exercise

Show the status of the fruit on the right side (detail view) with colors.

8 www.anubhavtrainings.com
Element Binding

8 www.anubhavtrainings.com
Worklist Fiori App
A worklist fiori app has first screen as a list and when we click list item and drill down, the second screen shows
the data of the selected item on first screen.
Sales Order Worklist App, Material Worklist, Plant Worklist, Employee Worklist, PO Worklist

8 www.anubhavtrainings.com
Master Detail Fiori App
SplitApp

masterPages detailPages

View 1 View 2

8 www.anubhavtrainings.com
m.Table v/s ui.table.Table
- Mobile table is more responsive than the UI table
- Mobile table shows columns even w/o binding for data
- Mobile is actually a multi column list
- Mobile table usage items aggregation and ui.table usage rows aggregation

8 www.anubhavtrainings.com
Modular UI - Fragments
Anubhav we have seen that we can use .js files to modularize our JS code. Can we also do the modular code for
the views as well, like in ABAP there is a concept of Sub-screen in dialog programming.

Fragments are light weight UI parts which are used to modularize View code. Fragments do not have their own
controller, they rely on the controller of host view.

2 types of fragment
1. Static fragment – just embedded inside the views
Fragment 1 2. Dynamic fragment – for which objects are created 
View
inside the controller of corresponding views..
sap/ui/core/Fragment dependency
Fragment 2 Each fragment object created in controller is the
remote control of fragment and behaves differently.

Controller
View 2

8 Controller 2 www.anubhavtrainings.com
When to use static fragment
My company have a requirement to add address of employees on UI. Employees have 2 types of addresses
1. Home address
2. Tenant Address
Typically an address data contain fields like street, flatno, landmark, city, postal, country, area, block, sector, region

Address

8 www.anubhavtrainings.com
Scenario
My manager provided new set of requirement for the supplier table
1. Add a toolbar with filter button in supplier table and when click the filter, open a popup which displays the list of
all the suppliers
2. Add value help (f4) for the cities input field, when user choose value help show a popup with all the cities
inside. After selection of city, populate same on UI field inside table.

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Challenges in Current Application
ü When we join a new project, we don’t know how many views are used in this app and what is the navigation between the 
views.
ü Each developer thinks differently, some dev put code to create view object inside Component.js and Some developers put it
in App.Controller etc.. If we want to check the code, we need to go through so many files. Today we don’t have a common 
standard to create our view objects.
ü The code used to create view object sap.ui.view is deprecated.
ü We have created all the view objects at the start of our app itself. It will pile up the view objects and increase the load time
and consume more memory. Ideally load the view when its needed.
ü We have done the element binding, where we merged the code of view 2 inside view 1 controller. This is an anti-pattern. It
will become difficult to introduce new views in the middle.
ü When we use browser back and forward button, they are not working properly.
ü When we search, slice and dice data, filter, arrive to a data which was out of 1 h of hard work and app restarts, ideally the
app should reload the same state where we were. E.g. Amazon
ü Like amazon keep hash tag/ pattern / end point for each of the product, we also want that feature similarly in our app.
ü When we copy the URL and open in another browser tab/ share it with colleagues, They should see the same state of the
application what I see on my browser. The application must load the same state of the UI.

Router
8 www.anubhavtrainings.com
What is Router
It is an object which controls the view instantiation and overall navigation of our application (going from one view to
another). Router requires, a special routing configuration, which will be provided by the developer inside
manifest.json file.
If the configuration is missed, the application will dump.
The Router object is available with sap standard module sap/ui/core/UIComponent which is the parent class of our
Component.js. Steps to implement router are
1. Get the object of Router
2. Call the initialize method of router object – which will read the configuration

Exercise
Implement RMH in View1 controller to also change selection of list item when route changes.

8 www.anubhavtrainings.com
Title

V1 V2

Item 0 Supp 0
Item 1 RMH Supp 1 RMH V3
Item 2 Supp 2
…. …

oRouter oRouter

8 www.anubhavtrainings.com
Exercise
Design a pie chart which shows distribution of the fruits for the selected supplier.

https://www.youtube.com/watch?v=0LC6DtYWWOM

8 www.anubhavtrainings.com
OData Services
OData stands for open data protocol it was originally developed by OASIS and later acquired by Microsoft. It is
an open source. OData is used to create REST based services. REST stands for Representational State Transfer
also known as Stateless protocol. Whenever we use oData and call a service, the request will be received by
server and server will process the data and send the response. There is no state which is persisted inside the
server, this allows millions of requests which can be served without having large number of computing resources
involved.

SAPGUI Browser C

OData

SAP Server
10GB Web Server
~20Sessions

Stateful Stateless
We are running applications in mobile/browsers and there is way a browser can not call directly our SAP
modules like Function module, report, program, interface, class, BAPI, Exits, Smart forms, CDS view etc. We
need a web service in the middle.
8 www.anubhavtrainings.com
How a service look like
Documentation - https://www.odata.org/
Microsoft provides a sample odata service for learning purpose so that we can experience odata services and
understand the protocol.
Entity Type – it represent the skeleton of the data. An entity type defines the structure of our data like fields, key 
fields, data type of each field, length, default value etc. A product entity type contains productId, (key), name,
description, price, currency, discount…
Entity Set – Represents an end point from where we can perform CURD (Create, Update, Read and Delete) 
operations. Entity set is created corresponding to an Entity Type. E.g. we can create ProductSet entityset from
product entity type.
1. Access Service document – Shows collection of entity types and entity sets
SO
https://services.odata.org/V3/Northwind/Northwind.svc/
SO_I
2. Service metadata document – Shows complete details of all the entity types - /$metadata
https://services.odata.org/V3/Northwind/Northwind.svc/$metadata

1 database table = one entity type = one entityset

A join at database level transforms to “association” at odata level

8 www.anubhavtrainings.com
How to consume data using OData
1. Read all the products (SELECT * FROM products)
https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json
Add JSONVue plugin

2. Read only top 3 products (SELECT * UPTO ROWS n FROM dbtab) – Pagination
https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json&$skip=10&$top=3

3. Filter the data (SELECT * FROM dbtab WHERE condition) – Filtering
https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json&$filter=CategoryID%20eq%202

SELECT * FROM dbtab WHERE ProductName LIKE ‘%Cola%’

https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json&$filter=substringof(%27cola%27,%
20ProductName)%20eq%20true

4. Read only certain properties (SELECT col1, col2 FROM dbtab)

https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json&$select=ProductID,ProductName,
Discontinued

5. Count the number of records (SELECT COUNT(*) FROM dbtab)

https://services.odata.org/V3/Northwind/Northwind.svc/Products/$count
8 www.anubhavtrainings.com
Title
<>
2.00.00
App
Pagination
Load data chunk by chunk
Top = 10
Next Chunk
Skip = 10, Top = 10
Next Chunk
Skip = 20, Top = 10

SAP Server
Product – 20 trillion products

8 www.anubhavtrainings.com
URL Format
http(s)://SERVERNAME:PORT/pathprefix/SERVICENAME?pname=val&pnam=val&pname=val

Read data for single Record by KEY  (SELECT SINGLE * FROM dbtab WHERE key = ‘’)
https://services.odata.org/V3/Northwind/Northwind.svc/Products(11)?$format=json

https://services.odata.org/V3/Northwind/Northwind.svc/Orders(10248)?$format=json

Association – Relationship between 2 entities. To fetch the data between 2 related entities, odata creates a 
navigation property.
(SELECT * FROM tab1 INNER JOIN tab2 ON join_condition)

https://services.odata.org/V3/Northwind/Northwind.svc/Orders(10248)?$format=json&$expand=Order_Details,Empl
oyee

8 www.anubhavtrainings.com
Support for OData and Fiori
SAP_IWFND
SAP_GWFND
SAP Fiori – SAP_UI
If any customer want to adapt OData and Fiori, they need to upgrade their systems to SAP NW7.4 which includes
these components. But upgrading SAP system is a long process which involve several teams and need weeks of
planning and execution.

8 www.anubhavtrainings.com
SAP Fiori Central HUB Deployment
Presentation BAS Pros
• Customers can experience Fiori without immediate
upgrade of their existing ECC systems
• Innovation without Disruption
• The Frontend server adds an extra layer of security
• If one system is down, another one keeps on going
SAP Fiori Frontend Server • We can connect multiple other systems as backend, so
SAP_GWFND, SAP_UI the front-end system work like a switch (HUB)
All Custom and Standard Fiori Apps || Fiori Launchpad || Theme
designer || OData Registration
Cons
• Cost of overall implementation goes high, basis team to
RFC manage this server
• Also replicate your users in frontend
SAP Fiori Backend Server CRM • Many information is duplicated in frontend system which
Application Layer – ECC is also available in backend hence increase redundancy
SAP_IWFND, SAP NetWeaver • Speed is compromised
Existing classes, FM, tables, Logic, Data, Develop OData code
HCM • Confusion
All the classic ECC, Suite cases, the Central HUB
deployment is still the choice. SAP Recommend to use
embedded deployment
Database layer

8 www.anubhavtrainings.com
Embedded Deployment
Pros
Presentation BAS • No Redundancy
• No Confusion
• No High Cost
• We can use single system which is enough for all
activities, as its SAP system it can still connect to other
SAP Fiori Frontend Server (FES) system from RFC
SAP_GWFND, SAP_UI Cons
All Custom and Standard Fiori Apps || Fiori Launchpad || Theme • Upgrade
designer || OData Registration LOCAL
All the S/4HANA project embedded deployment is most
recommended.
SAP Fiori Backend Server (BES)
Application Layer – ECC https://assets.cdn.sap.com/sapcom/docs/2018/02/f014893
SAP_IWFND, SAP NetWeaver 9-f27c-0010-82c7-eda71af511fa.pdf
Existing classes, FM, tables, Logic, Data, Develop OData code

Database layer

8 www.anubhavtrainings.com
How to check?
Is a system ready for work with OData and Fiori Development?
SAP_BASIS > 740
SAP_GWFND is there or not – OData development
SAP_UI – for Fiori development
Additionally check for S/4HANA = S4CORE

Is my system a Embedded v/s Central HUB?

8 www.anubhavtrainings.com
Server Access
[Recommended] Option 1: Free server – Ask your manager, basis or your company where you working.
Note – if you face any authorization or other issue, do not email us, we will shift+delete your email because we 
have no control of your company system, it is a legal issue for you if you discuss your company server with us.

Option 2: If you are a independent consultant, risk free. You can opt for training server from Anubhav Trainings
Process – Hello Team, I am taking UI5 training from Anubhav, I need S/4HANA server access, please share 
payment details to transfer funds, I will pay in INR currency.  server@anubhavtrainings.com
Cost – 2500 INR / 40 USD (per month per user) 
• This is a fully activated licensed S/4HANA OP server which can be accessed anywhere from world
• No VPN is required to access our server, just a laptop and internet
• You can access this server from your office/personal laptop
• We will provide you videos, document with screenshots and guide to connect to the server
• Our SLA is 2 hours – 7 AM – 7 PM IST
• All Anubhav’s courses can be practiced on this single server – UI5, Fiori, Launchpad, ABAP on HANA, RAP, 
SAC, WF, WD…
• Anubhav will use same server during course to teach all concepts
• 100 MBPS lease line and up 24X7
• This server can be easily connected to BAS, VS Code
• S/4HANA 2021 OP, Latest NW 756 with ABAP platform and HANA version 2.0 SP6
If you opt for server access on or before 2nd nov, you will get FREE SAPGUI installation.
8 www.anubhavtrainings.com
EPM Data Model
EPM stands for Enterprise Procurement Model, it is a real time data model which simulate real business process
of a company named ITeIO. SAP provide database tables, function modules (BAPIs) to read write data in these
tables.

Business
products addresses
partners

Sales Orders
Sales order items
Customer Supplier

Invoices ITeIO
Invoice items

stock

8 www.anubhavtrainings.com
Existing objects which we reuse
SNWD_PD – Product
SNWD_BPA – Business partner table
SNWD_TEXTS – Product Text
SNWD_SO – Sales order table
SNWD_SO_I – Sales order items table
SNWD_AD – Business partner address table

These are all part of the EPM demo data model for training and learning purpose. SAP provide below BAPIs
BAPI_EPM*
BAPI_EPM_PRODUCT_GET_LIST
In case you are using your company server with same
BAPI_EPM_PRODUCT_GET_DETAILS
BAPI/Tables, they don’t have data. You can use tcode 
BAPI_EPM_PRODUCT_CREATE
SEPM_DG
BAPI_EPM_PRODUCT_CHANGE
BAPI_EPM_PRODUCT_DELETE
BAPI_EPM_BP_GET_LIST
BAPI_EPM_BP_GET_DETAILS
BAPI_EPM_BP_CREATE
BAPI_EPM_BP_CHANGE
BAPI_EPM_BP_DELETE

8 www.anubhavtrainings.com
TCODES
SEGW – Service Gateway builder
/N/IWFND/MAINT_SERVICE – Register the service
/N/IWFND/ERROR_LOG – Analyze the errors which comes due to call of a service
/N/IWFND/GW_CLIENT – To test a service within local system

This whole graphical content will transform into an ABAP code.

8 www.anubhavtrainings.com
Runtime Artefacts
When we develop odata lots of code will be auto-generated by SAP system. This code will be kept inside classes.
There are 2 types of classes
MPC – Model Provider class – Contains the code to provide metadata of oData service
DPC – Data Provider Class – Contains the code to provide the actual data

{
---
--own MPC – Model Provider DPC – Data Provider
---
}

MPC_EXT – Model Provider  DPC_EXT – Model Provider 
Extension Extension

8 www.anubhavtrainings.com
Data Provider
For every single entity, the system will create 5 functions in DPC class
- GET All records – GET_ENTITYSET
- GET Single record by Key – GET_ENTITY
- CREATE new records – CREATE_ENTITY
- UPDATE data – UPDATE_ENTITY
- DELETE data – DELETE_ENTITY

8 www.anubhavtrainings.com
Title
<>
Table 1

Table 2

association
Entityset 1

Entityset 2

8 www.anubhavtrainings.com
Title
POST /sap/opu/odata/sap/ZNOV_ODATA_SRV/ProductSet

{
    "PRODUCT_ID" : "NV-1010",
    "TYPE_CODE" : "PR",
    "CATEGORY" : "Notebooks",
    "NAME" : "Anubhav Nov Product",
    "DESCRIPTION" : "Anubhav Test from GW Client",
    "SUPPLIER_ID" : "0100000051",
    "SUPPLIER_NAME" : "TECUM",
    "TAX_TARIF_CODE" : "1 ",
    "MEASURE_UNIT" : "EA",
    "PRICE" : "8585.00",
    "CURRENCY_CODE" : "EUR",
    "DIM_UNIT" : "CM",
    "PRODUCT_PIC_URL" : "/sap/public/bc/NWDEMO_MODEL/IMAGES/NV-1010.jpg"
}

8 www.anubhavtrainings.com
Title
Anubhav Training Server
S/4HANA OP
Internet

Internet Intranet

SAP BAS

SAP Cloud
Connector
SAP BTP
ECC destination
S4HANA Dest.
BW Destination

VS
CODE
VPN

8 www.anubhavtrainings.com
Cloud Connector Setup
Pre-requisite
1. SAP jvm in our system, download from here
2. Extract the zip file and keep in C:\program files\java folder

Main Setup steps

1. Download SAP Cloud Connector from here
2. Remember port no 8443, make sure directory name, specify the java directory from step 1
3. We can start cloud connector using url – https://localhost:8443/
4. The default credentials are Administrator / manage
5. We add the SAP BTP account details
6. Also add the S/4HANA server details for connection (handshake)
7. Open the BAS tool  Service center and create new destination

8 www.anubhavtrainings.com
8 www.anubhavtrainings.com
Integration of Fiori App to Service
1. Open the manifest json file and define a data source
2. Create a default odata model and connect that to the data source defined in step 1
3. When we test we will see an error related to CORS (Cross Origin Resource Sharing) which is a browser’s 
security policy and we will overcome this issue using Fiori-tools-proxy
4. Install a SAP UI5 tooling module locally and globally  npm install @sap/ux-ui5-tooling
npm install -g @sap/ux-ui5-tooling
5. We have added a proxy as per the UI5 tooling documentation, remember this is only for BAS and VS Code to
connect to our services during development. Never hard code URL of backend inside the manifest.json. Always
use relative path in manifest.
6. Use the latest version of ui5 tooling – fiori run command to test our system
7. Connect the Odata entityset /ProductSet and replace all the properties instead of fruits (local) to Odata entities
and properties. System will automatically call the backend and the data will be loaded.
8. Support for pagination, searching of data.

8 www.anubhavtrainings.com
CORS
localhost:8080
UI5 Tooling
(ui5 serve)
Browser

Proxy
Odata  SAP Server

/s4dev.st.com:8021
SAP Server

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Sharing our UI5 project with Colleagues
1. When we share the code as zip file, we do not have any tracking. If we work in a team of 10 members, we will
see that at the end of the day, we have 10 zip files in our mailbox which is hard to manage and merge.
ü Last night my code was stable, this morning when I came to office, I made number of changes, this has led me
to corrupt my code, I pray to god to somehow to the last night stable version. As of now, we do not have any
version control.
1. When we want to change dev tools, it is a manual process to export and import. Manual processes are time
taking and error prone.
2. In a project, where several developers are working parallelly it is hard to know who has made a disruptive
change.
3. What’s the industry standard to maintain source code of our Fiori Application.

Git and Git HUB

8 www.anubhavtrainings.com
Git
It is a distributed source code repository management system. Which allows developers to track the local version
of source code in his/her own computer. This is done by creating different save points of stable version of code,
these save points are called commits.
https://git-scm.com/downloads git clone <URL> Jack
Move all files/folders to git staging
To check if git is installed Robert area
git --help git add .
master Create a save point known as
We need to create a repository
git init commit
Create a new file in project git commit -m “what is the Local git
directory .gitignore purpose”
node_modules git push -u origin master repository
webapp/junk.txt UI5 project
Move all files/folders to git
staging area
git add .
Create a save point known as
1. *Whats the remote repository
commit
URL git remote add origin
git commit -m “what is the https://github.com/soyuztechnologies/test_nov_fiori_batch.git
2. *Which branch of remote
purpose” repository we need to update
How to restore to the last stable git branch -M master
state 3. Push changes • Create new git
git reset --hard git push -u origin master account
git reset commitid • Created a PAT
Git hub token
Local git • Create a new
Local git repository repository
repository (remote)
https://github.com/soyuztechnologies/test_nov_fiori_batch
8 www.anubhavtrainings.com
Deployment

ui5 build
Dev Tools dist

1. Add deployment configuration ui5-deploy.yml

fiori add deploy-config
2. Trigger deployment
npm run deploy

Dev Qlt Prod

8 www.anubhavtrainings.com
SAP Fiori Launchpad
1. If we have 500 apps, each app has one URL, will you give 500 url to the user to test/use each app over email.
2. We do not have any proper login screen; will you add 500 login screens to each app
3. How about security, someone who is not authorized to use our app, should be able to open.

SAP Fiori Launchpad is a central access point for all the Fiori apps in our company, S/4HANA. This will provide
security by authentication / authorization to secure our apps.
Tcode - /n/UI2/FLP

Fiori Launchpad designer is a web-based tool provided by SAP to create new tiles for newly developed custom
apps and manage existing tiles of standard apps.
Tcode - /n/UI2/FLPD_CONF

First select a transport request and a package in which tiles will be locked so it can deliver to Q and P.
Catalog – Collection of tiles for a functional area like finance, sales, service, marketing etc. - ZBC_NOV_FIORI
Group – We group our tiles logically using groups, so its easy to find them in context e.g. sales representative, 
sales manager, sales executive, sales area head – CompetitorProduct-manage, ZBCG_NOV_FIORI
Role – We add the catalog and group inside the role. Assign the role to our user. (PFCG) -  ZBR_NOV_FIORI

If you interested to learn launchpad and its concepts for standard Fiori apps end to end (30 h learning)
https://www.anubhavtrainings.com/launchpad-and-extension-training
Only in video mode 60h course www.anubhavtrainings.com
8
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
Title
<>

8 www.anubhavtrainings.com
 FAQs

1. What will be the duration of the training, pre-requisite?

The duration of the course is 40 hours, and there is no pre-requisite other than basic programming skills.

2. The timing does not suite me so can I go for video mode? 
Yes, you can opt for video mode training for our most recent batch and ask your question Over the mail. 
This option also applies. Those who want fast-track learning and do not want to be with the existing batch.

3. What tool do I need to learn and where do I get?

We will build all the apps on Business Application Studio and VS Code tool.  In our next class, we will see how to 
install the tool in your system or get cloud access. VS Code is absolutely free for a single developer.

4. What about the server to practice OData?

We need the OData server only in the last 10 sessions for which we will guide you in session no. 29, where, 
how to get the OData Server, and also maybe you can use co. Server all the required components will be explained.

11
www.anubhavtrainings.com
 FAQs

5. Will you cover real-time scenarios?

Yes, we will learn end to end process of Developing the Fiori apps and finally connecting with real SAP data,
deploy and deliver apps to the Production system.

6. I am new to SAP UI5, can I learn?

Yes, this course is designed in a way that a fresher can learn because we will cover all basics like
 HTML, CSS, JavaScript and JQuery.

7. If I miss a class how to refer?

Each class will be recorded and you can watch is once done. So, even if you miss or do not miss the class,
you can also watch recordings.

8. Process to enroll for this course?

Please mail us at contact@anubhavtrainings.com

12
www.anubhavtrainings.com
 I never
Thank you dreamed about
success.
!! I worked for it.
Email us:- contact@anubhavtrainings.com

Call us:- +91 8448454549

www.anubhavtrainings.com

13