SAP UI5 and Fiori Training

AnubhavTrainings.
com presents
LIVE Demo
SAP UI5 and

Fiori Training
with OData
& WebIDE
Anubhav Oberoy
Telecast begins on
August 3rd 2020 / 7 AM IST
UI5 is easy 01
UI5 Foundation
HTML5 | CSS | JS | jQuery
Learning SAP UI5 and Fiori is easy
with Anubhav.
We should “never do copy paste”

SAP UI5 Framework
of code until we learn core concepts 02 MVC | SDK | WebIDE | Controls
SAP Fiori UX
03 UX | Design | Develop | Deliver
SAP NetWeaver OData

04 Expose data from ECC, S/4HANA
anubhavtrainings.com 2
What is SAPUI5?
SAP UI5 is SAP’s new UI technology. Using this framework we can build web applications
which can run on any device, any platform, any browser.
SAP UI5 is a framework
A framework is a collection of libraries e.g. sap.m, sap.ui.layout
Each library is a collection of Classes e.g. Button, Input, Table, List, Select, CheckBox….
Each class is a collection of attributes, methods and events e.g. text, getText(), press
How am I going to
Where an I going code?
How to test?
to develop? Initialize
Output
SAP WebIDE Architecture
organize
anubhavtrainings.com
MVC Architecture
Controller
Processing - Logic
{what}
View
I/O – what will user Model
see Data
Button
FAQs
Here are some
Questions you asked
What will be the duration of the training, and pre-

What I need requisite?
to know? The duration of the course is 40 Hours, and there is no pre-requisite
other than basic programming skills.
The timing does not suite me so can I go for video

Fast-Track mode?
Course Yes, you can opt for video mode training of our most recent batch and
ask your questions over the email. This option also applies those who
want fast-track learning and not want to be with existing batch.
What tool do I need to learn and where do I
get?
Tool Setup?
We will build all the apps on SAP WebIDE tool and in our next class we
will see how to install the tool in your system or get cloud access.
WebIDE absolutely free for single developer.
What about server to practice OData?

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

Course 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
Production system.
I am new to SAP UI5, can I learn?
First Time? 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
We DO NOT NEED Java to learn the course at all.
Missed a If I miss a class how to refer?

Session Each class will be recorded and you can watch is once done. So even
you miss or not miss the class, you always can watch class recordings.
Please visit
www.anubhavtrainings.com/faqs
More
SAP WebIDE tool
Web + IDE = Web browser + Integrated Development Environment
WebIDE Personal Edition WebIDE Full Stack Edition

1. Is available in trial mode for single developer 1. Is available in cloud as also trial
2. You can install this in your computer 2. There is no installation in our local machine
3. It will require some space in your system 3. There is no pre-requisite on system
4. This requires pre-requisite as JDK configuration
Advantage 4. Just need to open a trial a/c on SCP
5. We can run the WebIDE PE even when we are not Advantage
connected to internet. 5. You can switch devices.
6. All projects will be in local machine 6. Runs on internet hence anywhere I can access
Disadvantage Disadvantage
7. Sometimes if you system does not support JDK or some 7. Lack of internet will cause issue accessing
system config is missing it is hard to detect issue as why 8. Projects are on internet
the webide is not running. Those who try WebIDE PE and unable to install in your
system, please switch to full stack
Anubhav will use PE of WebIDE anubhavtrainings.com

WebIDE personal edition
Pre-requisite
1. Winrar software installed in our system
2. Check JDK version using cmd  java -version
3. JDK installed in our system, supported JDK is 1.8
Steps:
4. Download SAP webIDE personal edition from here
5. Copy the downloaded zip file to a new computer folder called d:/webide
6. Right click and choose Extract Here which is a winrar option
7. After extraction, we see a folder called eclipse in our folder d:/webide
8. Right click on Orion.exe and choose compatibility and check Run as Admin optionApply
9. Double click on Orion exe now and black window should come and stay
10. Open browser (Chrome) and type http://localhost:8080/webide/index.html
WebIDE Full stack
1. Create a trial account on http://cloudplatform.sap.com
2. Go to account cockpit and click Launch WebIDE full stack
What is HTML5?
HTML stands for Hyper Text Markup Language, it is used to develop static web content.
- It is used to create pages w/o logic
- It’s a markup – what you write is what you get
- It has been foundation for the web development since many years
- It is tag based e.g. <tagName property=“”>CONTENT</tagName>
- W3C world wide web consortium, all major browser vendors are part of it
- An HTML document/page consist of 2 tags 1. body 2.head Year Version
1991 HTML
<head> 1993 HTML 2.0
1997 HTML 3
2000 HTML 4.0
<body> 2014 HTML 5
Funda Fox
1. Browsers understand HTML directly
2. It is not a programming language
3. HTML is all tag based, sometimes we have ending tags and sometimes we don’t have
ending tags
4. We can learn all the tags of the HTML on https://www.w3schools.com/
5. HTML is a tree data structure and when we run this we also get this tree in output and
this output TREE is called DOM (Document Object Model) – Runtime structure of the HTML
6. Every browser offer a tool called developer toolbar, you can open using key F12
7. Every HTML element has a property called id property which makes the element
UNIQUE on entire page
Difference between HTML & HTML5
1. HTML5 is just the latest version of HTML
2. HTML5 is more advanced in terms of features as compared to HTML
3. In HTML5 W3C made rules more liberal, some tags will work w/o having an ending tag at
all e.g. img, input
4. W3C introduced many type properties for the HTML tags
5. HTML5 has capability to perform an auto validation when a server request is made.
6. Doc type declaration is not mandatory
7. Now W3C supports direct support for AUDIO and VIDEO tags
8. HTML5 supports website structural elements like <header><footer><section><article>
There is nothing like magic

Client-Server Architecture
Request-Response Architecture
Form submit
HTTPObject Request Header + Body(content)
Using AJAX
request
Server
Browser
Java, ABAP, .NET,
(client) response
Python
Header + Body(content)
Header.RequestType
GET – Just read data from server DB
POST – Create new data inside server CRUD
Create, Read, Update
PUT – Update data inside server and Delete
DELETE – Delete Data inside server

Exercise
Design an un-ordered list with following texts
UI5 and Fiori
ABAP on HANA
Fiori Launchpad
SAP Analytics cloud
Each li is a clickable link and when we click it should take to one of the youtube video for the
topic from below channel
https://www.youtube.com/channel/UCzEPlO_nyhiE1MkZiufl9iw/videos
Block level elements
In order to structure the HTML content we use the block level elements. In modern world
there is not a single web page which does not use these block elements.
<div> - division tag – used to group elements. When ever we put div tag, the element always
starts from a new line
To provide some identification to group of elements we can add classification(class)
property at div level
<span> - inline element – again used for grouping elements (HTML element),but the
elements grouped using span does not starts with a new line.
Table
head tr th th th
tr td td
td td
tr
td td
body tr td td
tr
iframe
Display another DOM inside a DOM
One HTML document inside another.
Exercise 02
Design a table with a link to click. The table will have name of IPL teams
Team Name Captain

KKR Sourav Ganguly
RR Shen Watson
RCB IPL Mongia
What is CSS
CSS stands for cascading style sheets, it is used for styling the HTML content.
<h2>I love India</h2>
 <h2><color value=“blue”>I</color><em><b>love</b></em><color
value=“yellow”><bold>India</bold></color></h2>
We can apply styling/formatting and coloring using CSS with 3 ways
1. Inline styling – when we apply style at one particular element level
<tagName style=“”>Content</tagName>
2. Internal styling
The style code is written at the level of page, this allows us to apply style
simultaneously on multiple HTML elements on the page
3. External Styling
Applied as a reusable file, when the style code is kept in a separate file and used in
HTML page using link tag
Internal Style Syntax
selector {
prop: value;
prop: value;
prop: value;
prop: value;
}
Selector –
Tagname – all elements having same tag will be considered
.classname – all elements sharing same class will be considered
#id – all the elements with exact id will be considered
Responsive web app
A web design which adapts itself according the device is called responsive web design.
Box Model in CSS margin
border
HTML Element HTML Element
padding padding
<Text Here>
1. Put 3 images in a straight line

2. Check W3C and find zebra coloring styling for tables
Initially things are DIFFICULT

In the middle they are MESSY
At the end they are AMAZING
Pseudo classes
There are options to add pseudo classes in CSS where we can add event based handling for
e.g. when a click happens, or when I mouse over on an image the size should change…
HOVER
FOCUS
Selector:pseudoclass{
…
…
}
Java Script
Java script (JS) is the browser’s programming language. It is the only programming language
which browser UNDERSTAND directly. This is the MOST used programming language on
planet earth. Java and Java Script are completely different languages on their design,.
Purpose and usage.
Funda Fox
1. Browser directly understand JS
2. JS has 2 pre-defined objects called document and window
1. document object is the object of DOM – Runtime structure of HTML elements in a tree
2. window – it is the object of browser window
These objects has predefined methods which we use often. E.g.
--everything is an object
var objectField = document.getElementById();
getElementsByClassName
getElementsByTagName
Funda Fox
1. JS is case-sensitive A a – these two are different
2. Naming conversion is the first letter of every word is small and next consecutive word’s
first letter is caps – camel case naming convension
Iloveindia – I love india  iLoveIndia
Wearelearningjavascript  weAreLearningJavaScript
All the methods, properties, events etc.
3. Each line in JS ends with semi-column (;)
4. We can test our JS code directly in the console.
var oInp = document.getElementById("name")
oInp
Console is your best friend

What are all JS can do?
1. It can show output to use (e.g. alert)
2. JS can validate data
3. JS can change the DOM at runtime
4. We can use JS to manipulate CSS at runtime
5. Read values from screen
6. Application logic which we want in the browser, is written in JS
There are 3 ways we can write JS

7. Inline JS
8. Internal JS - <script> tag
9. External JS
How JS is triggered
Always triggered based on events
1. User initiated – onclick, ondblclick, ondrag, ondrop, onmouseover, onkeypress
2. System initiated – onload, onunload, onresponsereceived
Funda Fox
3. Symbols are important –
( ) – parenthesis {} – curly braces [ ] – bracket
2. Syntax to declare functions
2.1 anonymous function
function(){
---code
}
2.2 named function
function myFunctionName(){
---code
}
Funda Fox
1. In js = is an assignment operator
2. And == and === are comparison operators, == only compares values, === will also
compare data type along with value
3. JS can support chaining, where o/p of a method call which returns the object is passwd
as a input to a variable.
Variables in JS
When we create a variable we do not need to specify the data type at all. Depending on the
variable, system auto detects the variable type.
Object type of variable in JS
Can contain multiple variables together
Java Script Object Notation = JSON
Validate your json using jsonlint.com
Exercise:
Create a json which has multiple employees in an ARRAY of OBJECTS
JS is called as asynchronous non-blocking IO programming.
Synchronous
View Class 1 Class 2
save
ASynchronous
View Class 1 Class 2
save
Debugging Shortcuts
F8 = F8 – continue execution to next BP
F6 = F10 – step by step on the same code
F5 = F11 – inside the code
F7 = Shift+F11 – come out of current block
BREAK-POINT.
debugger;
Exercise: adapt the title color code to toggle colors

Between black-aqua and orange-white combination.
jQuery
jQuery is a javascript library, it is used to perform more work as compared to java script by
writing less code.
Why jQuery?
- Simplifies the code and make tasks easier
- Takes care of multiple things which is difficult to achieve using plain JS like animation
- Industry standard
- FREE
2 options
1. Download and refer
2. Using CDN (Content Distribution/Delivery Network) – from internet
Jquery.com
Syntax
$(selector).action();
$ - tells browser that I want to use jQuery
selector – tag, .class, #id
Action – methods, events
Exercise:
Design 3 images back to back and when I hover on an image,
the size of the image should become bigger (animate) and
when I go out of focus, the size comes back to its original
state.
How CDN Work?
A JAX – Asynchronous Java and XML
jQuery method and it used to call server to load data.
SAP UI5
SAP UI5 is a framework to develop responsive web applications. The SAP UI5 framework has
2 major components.
SAP UI5 Design time component SAP UI5 Runtime
Control libraries Component
sap.m sap.ui.comp sap.viz
sap.ui.table sap.ui.layout …. Renderer
Each control library has so many UI Controls (Classes, Elements) e.g. Button,
Table, Switch, CheckBox, RadioButton……
Core libraries sap.ui.core sap.ui.unified
How renderer works?
var OBJNAME = new LIBRARY.CLASS(“id”,{
SAP UI5 Control prop: val, Browser
Libraries prop:val,
event:val,
});
Code UI5 Framework in

browser HTML
Objects CSS+JS
JS RENDERER
MVC Design Pattern
Design patterns are used to provide common solutions to common problem. MVC is a design
pattern suitable for cases when we have any UI involved.
<event> Processing – Controller <request>

application logic
<update> (JS)
Event <notify>
handler
I/O – View Data – Model

Data binding
What user see/interact Data is getting stored
- Property Binding
- Expression Binding
- Aggregation Binding
- Element Binding anubhavtrainings.com
Types of objects
There are 4 types of views in SAP UI5
• Java Script View – 1%

• XML View – 99%
• JSON View – 0%
• HTML View – 0%
Models
• JSON Model
• Resource Model
• XML Model
• OData Model
UI5 SDK(Software Development Kit)
Is the central place where we can find all the documentation and API references along with
samples and demo apps.
Funda Fox:
1. Every JS file except views, will start with declaration using sap.ui.define, this JS file is
also considered as a class.
2. When we write the declaration we can pass all the dependent classes (custom,
standard) in the array [dep1, dep2, dep4]
3. Each class an object will automatically gets created and passed to the function next to it
as a parameter.
sap.ui.define([dep1, dep2, sdep3],
The UI5 will create all the dep.
Object asynchronous. This is why function(o1, o2, so3){
the syntax is called AMD return {};
(Asynchronous module loading) – }
scaffolding template );
Controller JS
1. Scaffolding will come
2. In order to create a controller JS file, we have to use a standard controller class provided
by SAP called sap/ui/core/mvc/Controller as a super class to declare controller
3. In js the inheritance is depicted using extend keyword
4. Typically in UI5 sdk class name are always has dot (.), but to use them as a dependency
in another class we use their MODULE name, the module name is created by JUST
replacing . With a slash /
5. View Syntax
sap.ui.jsview(“path of the view”, {
getControllerName: function(){ //this will return our controller name },
createContent: function(){ //this function will return the content of the view}
});
Exercise
Design a view with an input field and a button
When we press button, show the data entered inside input field to the popup.
Initially things are HARD

In the middle they are MESSY
At the end they are AMAZING
How the App Runs behind the scenes
3
Create object of the view, View
getControllerName getControllerName: function(){
Returns the controller address
1 Address Address of }
controller 4
createContent: function(oAnubhav){
Returns the object of UI Controls
ex.html C Passed to View
2 SAP UI5 Framework }
6
Create the Controller (class)
5
view object
C Create controller object
onInit: function(){
--initialization code
}
7 Clickofbutton – app logic
Basics of OOPS
Passenger
0..*
Plane
color, size, airline
Fly(), landing()
1..* Wings
Passenger Plane Cargo Plane

No_of_seats Size_to_carry
Association
1. Aggregation – lose coupling, both objects can function independently, GOOD to have relation
2. Composition – tight coupling, both cannot function independently, MUST have relationship
Funda Fox
1. Whenever we see a UI Control, and it has a property, there will be setter and getter
method for that property. E.g. if we have a input field with property called value, the
control will have setValue and getValue methods.
2. When we have an event for a control, we will have fireEvent, attachEvent, detachEvent
methods available.
3. In UI5 a control can have association with other controls. Most of them are
AGGREGATION type (lose coupling).
4. If a method, property or Event is not there is the class, check the parent class.
5. When we need to access a control object (UI element) in SAP UI5 controller, we cannot
use the document.getElementById() because it will give HTML element object. So to get
the object of the UI5 control, we can use the sap.ui.getCore() api and call its byId(“id”)
method to get object of UI5 control.
sap.ui.getCore()– API which gives us the object of Runtime instance of Running App
Control Hierarchy in UI5
sap.ui.base.ManagedObject
sap.ui.core.Element
sap.ui.core.Control
visible, common
extend
Button View Input Table
Exercise
Convert Yday exercise code to Controller as app logic.
Funda Fox
1. When we want to work in controller, we can access the instance (object) of the
controller with the control methods using this pointer.
2. We can also get the object of a view inside the control using this.getView()
3. Using this.getView().byId() we can get the UI element object inside of a view
4. Can we have more than one view in our app ? – Yes
5. Can multiple Views allowed to use SAME controller ? – YES
6. Is vice versa possible (one view refer multiple controllers)? -- NO
7. What is the best practice ? – 1:1
What is XML?
XML stands for eXtensible Markup Language, it is used for communication between multiple
hetrogeneous technologies.
SAP Portal
ABAP <xml> Java
Create and convert XML Create and convert XML

If_ixml
Funda Fox
1. It was initially built for communication
2. It is a tree data structure
3. UNLIKE HTML, we can have custom tags
4. Each programming language has to comply to XML standard by providing standard
classes to work with XML. E.g. ABAP has an interface if_ixml
XML  Own Data Type Own Data Type  XML
Parsing Rendering
Why XML view not JS View?
1. Since in JS view someone less experienced can end up writing application logic, which is a violation of MVC. But i
XML view there is no way one can write processing logic
2. XML views are industry standard now for open source technologies
3. The processing of XML  HTML is faster then JS
Namespace in XML View
When we create a XML view, all the control IDs will automatically changed by UI5 renderer by app
viewId– before control Id hence sap.ui.getCore().byId() was unable to detect the control just BY co
So to get the object instance using getCore() we use viewId—controlId
The name of aggregation always starts with small letter.
It is always reference to an object.
The aggregation name MUST follow same namespace as its parent
Exercise
1. Label has to be in align with input fields, fix this issue.
2. Add a new button below simple form on click of that button, salary should increase by
10% and must be visible on UI as increased salary.
Hook Methods
3. onInit: is a function like constructor of a class. This method gets called ONLY ONCE in the
lifecycle of a controller. When the app starts and UI5 framework creates the object of
the controller, the system will call this method. We can add our initialization code like
creating a model object, setting up variable values etc.
4. onBeforeRendering: is called also automatically by UI5. this method will be called
EVERYTIME, Just before the view is displayed to the end user. If we want to change the
view settings before its visible to the user dynamically, we can do such pre-processing
inside the beforeRendering.
5. onAfterRendering: this is called by UI5 again and again, everytime AFTER the view is
displayed to the user. We can use this for effects and UI changes. anubhavtrainings.com
Hook methods
4. onExit: is like destructor of the class, which gets called when the object of the class
(controller) is destroyed by SAP UI5. We can use this for any clean-up code.
Models
A model is an object of data. It encapsulates all the values which needs to
displayed/manipulated as data for application.
There are 4 models
JSON Model Client Side Model: where all the data is kept on client-side(browser).
XML Model This type of model suitable for manipulation of the data and usually
Resource Model holds local data which is small in size.
Server Side Model: where all the data is kept on server. This model is
ODataModel used for communication to the server and load the data depending on
v1,v2,v4
need. Suitable for real-time applications which access ECC,S/4HANA
data.
Steps to create model in SAP UI5
1. Create a brand new object of model in SAP UI5
var oModel = sap.ui.model.json.JSONModel
sap.ui.model.xml.XMLModel
sap.ui.model.resource.ResourceModel
sap.ui.model.odata.v2.ODataModel
2. Load or set the data to this brand new model
oModel.setData(rawData) oModel.loadData(file)
3. Set/Make the model aware to the application, view, control
sap.ui.getCore().setModel(oModel)
this.getView().setModel(oModel)
this.getView().byId(‘id’).setModel(oModel)
4. Binding to make the data visible on screen
4 types of syntaxes to bind data with UI Controls
Binding Path
{ Model
View
"empStr": {
"empId": 1010,
"empName": "Ananya",
"salary": 9500,
"curr": "EUR",
"smoker": false
},
"empTab": []
}
Every curly braces is a slash (/) and every array item is (/index) to make the path. Path is
the address of the data. The input fields must know the address to get the binding
complete. anubhavtrainings.com
Exercise
Make the checkbox bind to the model data smoker property and make sure it sets
automatically when app starts based on the value in smoker property inside the JSON.
Questions
 What is the best practice while creating model? – modular js file and json file
 Can we have multiple models, how the system will differentiate? – yes, namedmodel
1. You have taught that with the binding data between view and model exchanges, so we saw the data was
exchanging from model  view, is vice-versa also possible?
2. Can we have XML and JSON model together in a single app, how will they work together?
Binding Mode
OneWay
Model View
TwoWay
Whenever data changed in the model and reflects on the View, is called oneway binding
mode
When the data changed in the view reflects back to the model OBJECT, is called TwoWy
OneTime: When the app starts data flows from model to view after that the model and
the view has NO connection between each other.
What is the default Binding mode for JSON Model?
TwoWay
Methods we use for a model object
oModel.getProperty(“address/path”) –read values which are inside the model
oModel.setProperty(“address/path”, value) – Change the value inside the model
var oModel = sap.ui.getCore().getModel();

oModel;
oModel.getProperty("/");
oModel.getProperty("/empStr/empName");
--change data on UI
oModel.getProperty("/empStr/empName");
oModel.setProperty("/empStr/empName","The Rock");
Exercise:
Create a Switch control on top of table, when user switch on, the data should come from
packman model and when user switch off data should come from default model. On every
switch change, data should flip in our UI.
Expression Binding
Use Case: if the employee name is Anubhav, set the salary value automatically to 150000.
Expression binding is a conditional binding, where the data will come into the property
depending on the expression.
If(condition){ …..true…. } else { ……false….. }
{= condition ? True : false} ---expression
If we want to use a value from path we can use ${path} to get the value from binding.
Condition = employee name is anubhav
Output = salary value should change to 1.5 L
<Input value=“{/empStr/salary}” /> --old code
--expression binding
<Input value=“{= ${/empStr/empName} === ‘Anubhav’ ? 150000 : ${/empStr/salary} }” />
Exercise: When an employee is SMOKER, Lock the Employee name field.
XML Model
The data is going to be in the format of XML. The steps are same to create an XML Model.
All the data from XML model is treated as a string
Types of binding Type:

1. Property binding – when the value of the input field was connected to address of model,
in this case value is a property of the input field hence its called property binding.
2. Expression Binding – when we bind property of a control not just to the path, rather we
connect it to a EXPRESSION
3. Aggregation Binding-when we bind an aggregation of a control with address of model., is
called agg. Binding. In the example we connected rows agg. Of table with /empTab
Exercise:
Complete the rest of the columns of the table binding to emp name and salary
Aggregation Binding
Absolute Path: path which is provided at parent control level, typically address of
the root for all the child's.
Relative Path: relative to the parent’s address, the system will look for the address
inside the parent, bound to the child controls. anubhavtrainings.com
Funda Fox
1. Whenever an event is triggered our event handler method will get called.
2. Every event will carry an information which is what will be automatically supplied to the
event handler method as an object.
3. This object can always be used to read information about the event. E.g.
rowselectionchange event will trigger onSelect method and we can receive a DEFAULT
object as a parameter here
4. This event object which we receive will have some pre-defined methods to access the
information the event is carring
.getParameters() – return all the event parameters and their values
.getParameter(“pname”) – provide only the single parameter value
.getSource() – provide the object of SOURCE control who raised the event
Exercise:
Perform the binding with Select control to get the values from status entity of our json.
Resource Model
Is an another client side model, the purpose is not the data manipulation rather
internationalization. If we running an application in different regions and countries, we
would like to see all texts and labels to translate as per the country language.
A resource model points to a resource BUNDLE which contains files specific to different
languages for labels.
KM – Knowledge
Developer
Manager
https://help.sap.com/doc/saphelp_tm92/9.2/de-DE/83/1039835e7c4da3a8a0b49567573afe/f
rameset.htm
&sap-ui-language=CODE
Formatter
Formatter is just a function which gets called before the binding takes place. Usage of a
formatter are of variou s kinds like formatting data (date, currency formatting), data
conversion (upper/lowercase), data transformation(string to Boolean etc)…..
Model formatter View
UI and UX
UI stands for user interface but the UX stands for User Experience. The experience can only
be felt or psychological. UI is technical but the UX is emotional. We can change the UI
anytime but cannot change the UX.
Fiori UX
All about the guidelines. The underlaying technology to
build Fiori Apps is UI5. There are also some technical
rules the way we structure our app.
Initially SAP Released 25 standard apps where were
known as Fiori.
Fiori-like App
An app which has a file named as Component.js is called Fiori Like App. What is the
purpose?
• Component JS wraps the functionality of the fiori app
• It is the starting point of our app
• We can integrate Fiori App with Launchpad (central page for all Fiori Apps) only when the
app contains Component.js
• It contains details about the app like title, description, id, version
• All the models, dependencies, reusable JS and CSS, supported devices, themes
• Supported SAP UI5 versions
manifest.json
• Navigation between views along with View instantiation – Router
• ABAP deployment URL
• Which OData our app is talking
• Other Component is this app dependent
• Start of the app happens using component.js
Structure of Fiori App
View
Index.html UI Elements
UI Elements
Component.js
Index App.view.xml
Container View 1
Test manifest.json
component Control
App, SplitApp View 2
Funda Fox
1. Component.js should exist in the root directory of our app. (webapp)
2. If we wish to have manifest.json, the file also lives in same directory.
3. The name of the file MUST be Component.js
4. The file inherits from SAP Standard super-class called sap/ui/core/UIComponent
5. Will have 3 methods init, createContent, destroy
6. Baseclass.prototype.method.apply(this);
7. There is only and only one Component.js file allowed in an app.
Exercise
Design a view called View1 and add that to our Container control called App.
App Container
View 1 View 2
Next
Back
Steps
<Text Here>
Exercise
Design an search field on first screen of the View1 and on click of search button, we navigate
to second screen where we show the message box with same text entered on first screen
search field on click of save button.
List Control
It’s a single column table composed of items
header
Item 0 sap.m.ListBase
Item 1 items
Item 2 sap.m.ListItemBase
items ….
Item n sap.m.DisplayListItem sap.m.Standard
sap.m.Table sap.m.List sap.m.InputListItem sap.m.CustomL
sap.m.ObjectListItem sap.m.FeedListIt
sap.m.ColumnListItem sap.m.ActionListI
Exercise
Design a JSON which has 3 entities and each entity have more than 10+ records
{
“fruits”: [],
“suppliers” :[],
“cities”:[]
}
Fruits: name, type, color, healthBenefit, price, unit, picture, status(A, D, O) - 15
Suppliers: name, city, country, address, contactName, sinceWhen - 10
Cities: name, state, famousFor, lat, lng - 8
Next 12 hours
Manifest.json
manifest.json is also known as application descriptor file.
- Its is a gold standard and best practice for Fiori Apps. It contains all the information like
app name, version, navigation, support, dependencies, views, supported versions,
dependencies on another component
- Provides central reference for all functionality, so we can check the code of ANY sap
standard and custom apps.
- It works always with Component JS, and allows SAPUI5 framework to create most of
things for you.
Exercise:
EX1 - Enhance the object list with status of the fruits, if the fruit is
Available – Show status in GREEN Color
Out of Stock – Show it in Orange Color
Discontinued – Show in Red Color
Hint: sap.m.ObjectStatus
EX2- Whenever we select a record in the list, print all the selected records + newly selected
record fruit name in console.
EX3 – When we select a fruit on first view and navigate, the fruit name must print on top of
title of second view.
EX4 – On search field, when we enter the data to search, and hit search, the data in the list
should get filtered automatically.
EX5 – Sort the data in the list control @ runtime w/o touching the data source.
https://sapui5.hana.ondemand.com/#/topic/be
0cf40f61184b358b5faedaec98b2da.html
Fiori UX
Fiori Worklist App
An application which shows a list on the first screen and on the second screen it shows the
details, is called fiori worklist application.
Split App
Master Pages Detail Pages
View 1 View 2
Exercise:
On the view 2 put a label and whichever fruit is selected on left side, show the name of that
selected fruit inside the label of second view.
Challenges facing in the App
 When we introduce a new view (Empty View), we have to go and add code for every
empty view in the page to create a new View object every time. When another
developer wants to know, they need to search and find where the code of view
instantiation is kept.
 Anubhav we are creating all view objects in Component.js, can we also create them in
App.controller? What is the best practice to create view object.
 Imagine if a user NEVER goes to VIEW2, but we occupy the memory for View 2 already.
 Our user want to support Browser Back and Forward button, w/o workaround and on
press of back and forward the application should take us to previous state. Every
page/state of the app will have a UNIQUE end point
 When the user, Refresh the page OR share the URL of the page with others, no matter
which device it is, THE SYSTEM SHOULD RESTORE THE STATE OF UI.
Every Page of our App is considered as a UNIQUE address.
Router anubhavtrainings.com
<Text Here>
Steps to work Router
1. Get that object from the base in Component.js
2. Provide Routing configuration in manifest.json file
1. It contains all the information about Views to be created
2. What is the navigation strategy for our app – Routing path
3. End points
4. Root View – App.view.xml
3. Initialize the router
4. When we need navigation to a view, we use ROUTER object
Every page is marked as a unique end point so browser can track the history of navigation.
This end point is also known as ROUTE, PATTERN, HASHTAG….
Exercise:
Implement Route Matched Handler event in View 2 controller to read the “navya” value and
bind the view2 with the correct fruit path to show data on right side.
Fragment
Fragments are reusable UI-parts, used to modularize view code in SAP UI5.
We only use XML fragments to modularize views.
Exercise:
Convert the simple form of view 2 as a fragment and embed the same.
Enable navigation in table of suppliers, and when we click, create a new view to display
selected supplier details. (Routing, New View, Element Binding….)
View 1
Fragment
View 2
Fragments Code?
Parasite – it does cook its own food, lives on food cooked by host
A fragment does not have its own controller
It lives on the controller of host view
Example
We have customer meeting next week, before that we would like to add below functionality
to fruit store app:
Add a popup on f4 help click of the city field inside the table also in the supplier table when
user clicks on a filter button in toolbar, show all the suppliers in an popup.
• F4 Help
• Design a popup
• Enable F4
• Call the popup on F4
• Set the selected city back to table field
• Filter
• Design a tool bar and a button
• Call the popup to show all names
• Select the supplier name
• Filter data in table on selection
Exercise:
• You have implemented the code for opening the supplier popup but we select a supplier
the data in the table must filter.
• Implement the F4 Help for the city field
11th Sep
• The functionality is ok and released to customer and now they reported a medium prio
issue, when we select cities, its filtering but when we open city popup again, our last
selection auto clear. Can you please fix.
System Access – Tuesday onwards
1. FREE – use your co. system
DO NOT MAIL US FOR ISSUE ABOUT CONNECTION,
AUTHORIZATION AND SETTINGS
2. FREE – Free SAP Server by SAP ES5 Beta
https://blogs.sap.com/2017/06/16/netweaver-gateway-demo-es5-now-in-beta/
ONLY FOR READ ONLY SCENARIO – GET
3. Paid server from Anubhav Training – 2500 INR OR 40 USD per month per user
- Full support for authorization and connection issues
- Documentation and videos to configure
- Latest S/4HANA 1909 FPS2 system with latest NW 754 SP1
- All anubhav’s courses on one single system – AoH, CDS, LPD, Odata
- No RDP, you can access it from Local SAPGUI
- Which country, which co. which ISP
- Test OData locally in your browser
- Provide you the destination file for connectivity using WebIDE
- FREE SAPGUI installation from us
Drop a mail to server@anubhavtrainings.com anubhavtrainings.com
Fiori System Architecture
Presentation
Presentation Browser
Browser FIORI ONLY AND ONLY
UNDERSTAND ODATA
Gateway Server
Fiori Frontend Server
Application Layer NW 7.4 GW_FND
ABAP/Basis/Middleware RFC
Layer Backend Server
ECC
Fiori Backend Server
Database Layer
Deployment Type
Presentation Central HUB Embedded
Browser Scenario Frontend
Deployment
Gateway Server
Fiori Frontend Server Pros
NW 7.4 GW_FND - Backend does not need
One System
upgrade
RFC - Plug and play also multiple
Backend Server backend parallelly
Cons
ECC - Confusion
Fiori Backend Server - High maintenance
- High cost
- Tracing of issue is difficult
- Copy of metadata resides in HANA or
both systems Any other
Basics of OData
SEGW – To create a brand new odata service – Gateway Service Builder
/n/IWFND/MAINT_SERVICE – register the odata service – service catalog
/n/IWFND/GW_CLIENT – Gateway client – test services locally
/n/IWFND/ERROR_LOG – check the issues and trace them – error log transaction
Fiori App
ERP
ECC ODATA Services HTML App
S/4HANA JSP, Java
Suite GET, PUT, POST, DELETE
CRUD .NET, Python,
Any tech
What is OData
OData stands for Open Data Protocol. It was initially develop by OASIS company, later
acquired by Microsoft. It is an open source, any one can adapt to the technology.
It is used to expose the data from a system abstracting from the underlaying complexisty for
HTTP protocol.
$top, $skip, $filter, $count, $expand….
Do you know that we can build odata even from a non-SAP system?
Java – ODATA4J, Olingo .NODEJS – CAPM, NODATA… ABAP – current
REST – Representational State Transfer – Stateless protocol
Install these free tools
1. XML Formatter http://sts4dev.st.com:8001/sap/opu/odata/
2. JSON Formatter tool IWBEP/GWSAMPLE_BASIC/ProductSet?
$format=json
http(s)://hostname:portno/sap/opu/odata/sap/servicename_SRV?p1=val&p2=pval
<Text Here>
How to consume service
1. Service URL = Service document
A service document is a collection of all the entity sets and their allowed operations (GET,
PUT, POST, DELETE)
http://sts4dev.st.com:8001/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/
Entity Set- End point for performing CRUD on the server. It is based on Entity Type
Entity Type- Skeleton of the data, Structure of data
http://sts4dev.st.com:8001/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata
GET All Data (SELECT * FROM dbtab)
http://sts4dev.st.com:8001/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet
http://sts4dev.st.com:8001/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format
=json
<Text Here>
Loading top records (select * UP TO ROWS n)
=json&$top=2
Skip the initial records already loaded (LOOP AT itab FROM index TO index)
=json&$top=2&$skip=2
Select only required fields
=json&$select=Name,Category,SupplierName
Count the records
http://sts4dev.st.com:8001/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet/$count
GET - Reading
Single record by key (SELECT SINGLE * FROM dbtable WHERE key = value)
http://sts4dev.st.com:8001/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/BusinessPartnerSet
('0100000046’)
Getting data which is inter-related (SELECT * FROM tab INNER JOIN tab2….)
=json&$expand=ToSupplier
How to connect my WebIDE to SAP System
<Text Here>
https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/CF/en-US/
2cf47f37e34c428c97a51057733c0394.html anubhavtrainings.com
EPM Data Model
EPM model is just like a real-time data model which ready-made and can be used for demo
and training purpose. It includes Sales orders, products, BPs (suppliers and customers)
including addresses.
EPM model provides us REUSABLE function modules in SAP system, so that we can perform
all the CRUD operations
BAPI_EPM_*
BAPI_EPM_PRODUCT_GET_LIST
BAPI_EPM_PRODUCT_GET_DETAIL
BAPI_EPM_PRODUCT_CREATE
BAPI_EPM_PRODUCT_UPDATE
BAPI_EPM_PRODUCT_DELETE
BP-
BAPI_EPM_BP_GET_LIST
BAPI_EPM_BP_GET_DETAIL
BAPI_EPM_BP_UPDATE
BAPI_EPM_BP_DELETE
BAPI_EPM_BP_CREATE anubhavtrainings.com
Runtime Artifacts
The classes which are generated when a service is generated. These classes will contain the
code which is autogenerated and code which we want to write.
Metadata code CRUD method implementation

MPC DPC
Model Provider Class Data Provider Class
MPC_EXT DPC_EXT
Delta in metadata Delta in CRUD
<Text Here>
1. Go manifest and add a data source

2. Go to models and add a default model for odata connect to the data
source, (system auto creates neo-app.json, BAS xs-app.json)
3. Perform the binding
Association
Foreign key SELECT INNER
Products Supplier
JOIN…
ProductSet Association
1..1 Navigation
SupplierSet Property
Next Challenge
1. In my company, I have been asked to develop an odata where the kind of work I have to
do is not related to GET, PUT, POST, DELETE, rather I have to call a function module
which does some processing. Like close a delivery doc. Which method should I use.
2. I have been asked to trigger a workflow from odata.
3. Find out the most expensive product in the entire system.
Questions?
1. How do we know what are all standard Fiori Apps Delivered by SAP?
Fiori App Reference Library
2. How to check which odata service sap is using for their apps?
3. How to check version of the odata service?
SAP Supports ODATA V2 and V4
4. How to test a create/post call if we don’t have a Fiori App.
All the GET calls directed tested using browser
POST, PUT, DELETE
4.1 Use SAP GW client /n/IWFND/GW_CLIENT
4.2 Using third party tool called POSTMAN
PUT – Update – All the properties

PATCH – Update – Few properties
MERGE – Read + Update – System auto reads the existing record from DB, superimpose
values which we passed. anubhavtrainings.com
System Landscape
<Text Here>
https://www.youtube.com/watch?v=tTrULsKULK4
https://www.youtube.com/watch?v=dxcNcSputaE
https://www.youtube.com/watch?v=qZDnU79M75k
https://www.youtube.com/watch?v=cUHuB9Las18
<Text Here>
1) how to deal with excel file download and upload from frontend to backend.
2) download table control data to desktop.
3) how to check compatibility issues when working with IE and Chrome
4) any idea on CREATE_DEEP_ENTITY, GET_EXPANDED_ENTITY methods of Odata
5) if we don't have the UI5 app file, can we download from BSP application to webIde
<Text Here>
<Text Here>
<Text Here>
<Text Here>
<Text Here>
<Text Here>
<Text Here>
<Text Here>
Thank You
contact@anubhavtrainings.co
m

SAP UI5 and Fiori Training

Uploaded by

Copyright:

Available Formats

You might also like

SAP UI5 and Fiori Training

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SAP UI5 and Fiori Training

Uploaded by

Copyright:

Available Formats

AnubhavTrainings.

SAP UI5 and

We should “never do copy paste”

SAP NetWeaver OData

What will be the duration of the training, and pre-

The timing does not suite me so can I go for video

What about server to practice OData?

End to End Will you cover real time scenarios?

Missed a If I miss a class how to refer?

WebIDE Personal Edition WebIDE Full Stack Edition

Anubhav will use PE of WebIDE anubhavtrainings.com

There is nothing like magic

DELETE – Delete Data inside server

Team Name Captain

Box Model in CSS margin

HTML Element HTML Element

1. Put 3 images in a straight line

Initially things are DIFFICULT

Console is your best friend

There are 3 ways we can write JS

JS is called as asynchronous non-blocking IO programming.

Exercise: adapt the title color code to toggle colors

sap.m sap.ui.comp sap.viz

sap.ui.table sap.ui.layout …. Renderer

Core libraries sap.ui.core sap.ui.unified

Code UI5 Framework in

<event> Processing – Controller <request>

I/O – View Data – Model

• Java Script View – 1%

Initially things are HARD

Passenger Plane Cargo Plane

Button View Input Table

Create and convert XML Create and convert XML

var oModel = sap.ui.getCore().getModel();

Types of binding Type:

Model formatter View

• Implement the F4 Help for the city field

Metadata code CRUD method implementation

1. Go manifest and add a data source

PUT – Update – All the properties

3) how to check compatibility issues when working with IE and Chrome

4) any idea on CREATE_DEEP_ENTITY, GET_EXPANDED_ENTITY methods of Odata

You might also like