Sap Ui5 and Fiori Training With Odata: Anubhav Oberoy

SAP UI5 and Fiori Training with OData
Anubhav Oberoy
http://www.onlinefioritrainings.com
For more www.onlinefioritrainings.com
Start Date: 28th Aug 2018
Expected End Date: 5th Nov 2018
Weekdays 7-8 AM India time
Duration : 40+ Hours + Complementary OOPS ABAP

What is UI5?
UI5 is a framework to create responsive Web Applications based on mvc architecture.
Framework: It is a collection of libraries which we can use to develop something on top of it. Example: sap.ui.commons,
sap.m, sap.ui.layout etc.
Responsive: An application which adapt itself according to the device you use. E.g Desktop, Mobile and tablets.
MVC: Model view controller architecture which is actually a design pattern to build UI application.
How we write typically any program?
Step 1: Initialization - Load this framework

Step 2: Data declaration – declare the control UI5 UI control
Step 3: Processing logic which is to display UI to the user – Display control on UI
Step 4: Processing logic – Application logic – Code for processing
Step 5: Output based on process
Step 6: Clean-up

An HTML file is an document which browser will understand and process.
Syntax to create a new Control object in sap ui5
var oObjectName = new libraryname.ControlName(sId, sProperties);
sId- unique control id.

sProperties: provide them in curly braces, with different attributes of a control like label, text, color, height...
Funda Fox:
Types of symbols
( ) – parenthesis
{} – Curly braces
[] – Bracket
The code is case sensitive.

for how long we will get access to the recorded training videos?
Hello Anubhav, you will be using new version of WebIDE (Full Stack)?
will there be some sessions on odata, 1) mpc 2) mpc_ext 3) srv 4) dpc 5)dpc_ext ?
npt dure you are able to see my messages.. :)
how you are going to cover course between 28 Aug - 5 Sep
how 40 hours will be covered?
weekend more hours?
why are we writing only in <script> tags?
can you please explain the use of different symbols (brackets)
can you please explain the use of different symbols (brackets)
Anubhav what happens when I miss a class??
Will certification question bank will be provided?
Will you be providing Odata server?
do u provide server access for practice ? like connection with source system to create app?
We will discus only Odata basics or end to end ?
After session, how long we can access the sessions or study materials?
Will I be able to connect my organizations SAP system for practice?
hi anubhav, as u mentioned this training will be based on webide. what if we dont hv webide at
our client place, can u just briefly explain
New comncepts
do you teach hana odata services ?
Native HANA Development Course – XSODATA, XSJS
CDS View – ABAP on HANA and S/4 HANA,Analytical Fiori Apps, Overview Page OVP, Smart
Filter Application
<
Anubhav.abap@gmail.com
9th Sep
Google calendar invite
Tomorrow 7 PM IST

UI5 and Fiori App
IDE – Integrated Dev. Environment
Eclipse Neptune
SAP WebIDE Open Source Planet 8, Planet 9
Luna, Mars, Neon, Oxygen
SAP WebIDE Personal SAP WebIDE Productive

Edition – Trail version  SAP WebIDE
Local Computer - Single Full

Pre-requisite
JDK version 1.8
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
WebIDE - https://tools.hana.ondemand.com/#sapui5
& Eclipse - http://www.eclipse.org/downloads/packages/release/oxygen/r/eclipse-ide-java-ee-developers
IDE, Programming Languages – Developer

friend – ABAP, Java, C, C++
Middleware (JRE) + Tools = JDK corr. To OS
Shell
Kernel – Operating System – DOS, Linux
32 bit, 64 bit
Assembly language – MOV A, B, ADD A
Hardware 8084

1. Download the WebIDE from tools.hana.ondemand.com
2. Please install winrar before you start installation for webide from internet Click Here
3. Copy the downloaded file and paste in your D:\MyWebIDE\ folder
4. Right click on the file which is downloaded and choose extract here, system will create an eclipse folder for you
5. To run webide, go inside the folder and Right click and choose Run as Administrator on Orion.exe file
6. Never close the orion window as long as you want to use webide.
7. Use URL to launch webide - http://localhost:8080/webide/index.html
Caution: If you using any local tomcat/server in your system WebIDE port no needs to be changed, eithr you stop tomcat or
you change port for webide.
Steps for eclipse:

8. Download eclipse
9. Extract the files
10. Go to eclipse folder and run eclipse.exe
11. First time when you run, you will get popup asking for Workspace path.
Workspace: a local computer folder where eclipse will store your files. Just give your path where you want to save files.
5. You need to install sap ui5 dev tools in eclipse.
6. Go to menu Help install new software..
7. Put url as http://tools.hana.ondemand.com/oxygen press enter
8. Select UI5 development toolkit for HTML5 and say next and finish the installation.

What is HTML?
HTML stands for HyperText Markup Language , Write and get the results. HTML is used to create static web content. HTML is
created and managed by W3C (World wide web consortium). As part of w3c, all the browser vendors are associated (IE,
Firefox, Chrome, Safari).
Year Version
1991 HTML
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2009 XHTML 2.0
2012 HTML5
HTML5 is the latest version of HTML.

Difference between HTML and HTML5?
 HTML5 is the latest version of HTML.
 The doc type declaration has been simplified to <!DOCTYPE html>
 With HTML5, you do not need end tag for every tag, some tags were excluded from ending tag e.g. Input, image
 With HTML5, new types of input were introduced like date, colour, email, number etc.
 When a request is made to the server, the automatic validation takes place in HTML5.
 Direct support for audio and video tag.
Difference between UI5 and HTML5?

 UI5 is a framework, HTML5 is a mark-up.
 UI5 is managed by SAP, HTML5 is managed by W3C.

Any HTML page is also known as HTML Document. Every HTML document consist of document type declaration, header and
body of HTML.
<tagName prop=“value”>content</tagName>
<!DOCTYPE XHTML version=“2.0” XDND SCHEMA=“XHTML/text”>

<!DOCTYPE html> <head>
Important information, who create,
purpose, keyword, size, char type, title
Funda Fox
 It is not case sensitive. Recommendation is to write code in small letters.
 Most of HTML tags end with end tag.
 Browsers directly understand HTML.
 End users will only see body of html.
 HTML is a tree data structure called DOM (Document Object Model – It
Is the representation of HTML tree data structure). <body>
Every HTML element can have a unique id property. UI Controls like button, text, labels,
input, links, images, videos etc.

How internet works and how basic web base application works?
DNS
Mapping
ip – name.com
M
Server (IP Server)
ISP 165.122.0.1
Will also known as container
because it contains all the web
projects inside.
T Web Server – Tomcat, Jboss
SAP AS
It has capability to respond to
Request
requests sent over internet.
(HTTP/HTTPS)
D Response Port – channel – type of req.
Browser

HTTP Request Types
Request Type Purpose

GET Read the data
POST Create new data
MERGE Read + Update
PUT Just update the data
DELETE Remove the data
HTML Page ? Server
Form submit
httpRequest object
Ajax Call
Get requests are not secure hence should not be used for sending password to server.

Block level elements
They do not have any footprint by them self on the screen but they play a very
important role in structuring the web content on the page.
div – division tag – it always start the content from new line hence we don't
need br tag anymore when we use div.
span – inline element - which is used to create an inline block, it doesn't start
with a new line.
thead Th Th Th
tr
table Td Td Td
tr
tbody tr Td Td Td
tr Td Td td

Iframe – it is used to embed another HTML inside your HTML page.
Browser developer toolbar (F12) - console

I love india
<p>i <em><color value=“red”>Love</color></em> India</p>
Maintenance of style code for HTML was a nightmare for developers because of high volume of nested tags, this was also
error prone.

CSS – Cascading style Sheet – boon for developers when we want to apply styling on HTML content.
1. Inline CSS – the css code will be applied to each HTML element level.
<tagName style=“prop: value; prop: value”>content</tagName>
Disadvantage is that we will have redundant code written at multiple places. This will lead to high maintenance and no
reusability.
2. Internal CSS – the css code is applied at the page level. We use a special tag inside the head of HTML page, this tag is
<style> tag. Inside the style tag, we put our style code.
<style>
selector: {
propName: value;
propName: value;.....
}
</style>
3. External CSS – the css code is kept in a separate file and its is then later linked to HTML page.
Funda Fox
4. Symbol will break you or make you
: - colon ; - semi-colon For more www.onlinefioritrainings.com
Selector : {
prop: value
}
h3
Selector:
Tagname – all the elements which has same tag will be
affected. Just put tagName as selctor. p
ClassName – all the elements which has same, you
need to tell the system that it is a class, which is done h3
by putting a dot(.) before the className.
.classname (grouping mechanism - classification)
id – single element which has an id. p
#id
h3
Disadvantage of tagName style is that it affects other
elements also, hence we always use classname based
style. It is recommend to put class names at div p
element level not at the core element levels.
h3

People are recognized in public for what they practice in private
Concise and precise answers are the keys for a sure shot success in interview
We make sure that we apply CSS in a way that our elements are adapted itself automatically based on screen width
(projector, desktop, tablet, mobile etc.). This nature is called Responsive Web Design.
Explain CSS Box Model?

Margin
Border Border
padding padding
HTML Element HTML Element

Pseudo classes in css: Is a technique to apply the css based on certain events or activity. Example when i focus on input, click
on certain element, hover my mouse on an element etc.

What is JS?
JS stands for java script it is the browsers programming language, it is the only programming language that browser can
understand directly. The Java and Java Script are two different programming languages, their purpose, design and usage are
completely different.
Types of JS?
Client Side JS: When code runs on the browser (client), it is client side JS. It makes application extremely faster. Typical JS for
web-development is client JS.
Server Side JS: Code runs on Server side, typical usage is to perform db lookup, send email, business logic, talk to another
system, offering services. Example: NodeJS, XSJS.
Usage of JS?
 Writing imperative logic and business logic as well which runs on Client side.
 Manipulation of data along with validation
 Manipulate CSS at runtime
 Use to give output to user.
 Create entire HTML content dynamically

Funda Fox:
 JS is case sensitive (70% of your issues)

Data: lv_matnr type matnr.
DATA: LV_MATNR TYPE MAtNr.
 Every statement in JS ends with semi column (;)
 We can debug JS in browser itself, by browsing source code in dev. Toolbar (F12)
 Since browser understand JS directly, we can test our js code directly in browser.
 Nami-convention in JS, the first letter is small and next consecutive word, first letter is capital (CamelCase)
iloveindia  iLoveIndia
Same applies to the name of variables, functions etc.
iamlearningnewworld  iAmLearningNewWorld
anubhaviscrazy  anubhavIsCrazy
Built-in variables
document: it is the object of DOM (runtime tree structure of HTML).
window: it is the object of the BROWSER window.
Output functions in JS
window.alert(“”) – provides a popup
document.write(“”) – change the entire DOM
HTMLelement.innerText – change the content of an HTML element
console.log() – print something in console. For more www.onlinefioritrainings.com
Ways to apply JS
1. Inline JS: JS is applied at the element level.
2. Internal JS: JS is applied at page level using <script> tag. We put the tag inside <script> element.
3. External JS: JS is referenced from an external file or from internet.
JS is event driven. When user does an activity on the UI, that’s when an event triggers which cause the JS code to trigger.
Example for event: onclick, ondblclick, onfocus, onhover, onmousedown
You can find all the list of events here

Variables in JS
Syntax:
var variableName = value;
Funda fox
We do not need to specify the data type, based on the value assigned to the variable, the data type is automatically taken.
 in js everything is an object. Nami convention for any object is : oObjectName
 in js equals to (=) is assignment operator, but (==) is comparison operator, if you want to also compare data types use (===)
if 2 == “2” {} -- true
if 2 === “2” {} – false
if 2 = 2 {} -- Incorrect if condition, this is an assignment
‘ – single quote “ – double quote both used to define literals.

() – parenthesis
{} - curly braces
[] – bracket
Structure/ Object in JS – (Equivalent to workarea in ABAP)
var objectName = { “prop”: “value”, “prop”: “value”, ......};
Java Script Object Notation (JSON)
Array: is like internal table in ABAP
var aSomeName = [ “item1”, “item2” , “item3” , “item4” ];
Fundafox:
Index of an array in JS always starts with 0
We can use .length property to calculate total no of items inside an array
 an array item can be accessed from its index
Exercise: Create an Array of objects (internal table) for employees. In which each record will be having empid, empName, sal
and currency.

Funda Fox:
In JS we can avoid creating local variables to hold intermediate objects, we can use chaining concept in JS to directly access
the variables and functions on top of return of previous method. Example as below
//Local variable was used

var oInp = document.getElementById("userName");
oInp.value;
//Same achieved by chaining

document.getElementById("userName").value;

Syntax for writing functions in JS
Anonymous function (function without name) Emp Id 10
function(param1, param2...){ Emp Name Zkas

---code
} Add Emp
Named Function
10 Zkas
function functionName(p1, p2...){
---code
}
Exercise: Design a table with Emp data, create 2 input fields on top of table with id and name, click on add employee button, it
should add employee to the table below.
Deadline – 12 hours.
Use https://jsonlint.com/ to validate your JSON.

What is collection of functions called – library
Collection of libraries is called – framework
jQuery: Is a java script library. It works on principle of write less and do more
Why jQuery?
 It is industry standard, all the big companies like Netflix, ImDB, SAP, Google, Microsoft are already using jQuery
 SAP UI5 framework is built on top of jQuery
 Simple to learn and use
 Free
 Multiple variants like jQuery UI, jQuery Mobile etc.
How to use?
We need to first reference the jQuery library in the project. There are 2 ways
1. Download the js file and reference it locally from project.
2. Reference from CDN (Content Delivery Network), lot of CDN providers like Google, MaxCDN, Microsoft, Akamai

Syntax:
$(selector).action();
$ - indicates that we want to use jQuery

selector – identifier for element(s). tagName, .className, #id
Action – css function, reusable methods in jQuery
Earlier we had used about 4-5 lines of code to change color of box content and now this is achieved with just single line of
code.
$(".box-content").css("background-color","black");
A chaining example
$(".box-content").css("background-color","green").css("color","black").css("font-family","cursive");

callbackFunction
UI5 training
Mobile Google
Is a special function which is called when a certain action is over, for example i called a service on internet to get share price.
We dont know how much time it takes to return the result. But once the result (response) has come, we want to run some
code. We use callbackFunctions for that purpose.
$(selector).fadeOut(5000, function(){
---code of callback function
});
Funda fox
Whenever we dont know the response time, blindly use callback function. We can attach callback functions to any method
who supports it like Odata service call in SAP UI5.
 In js, this pointer is used to point the object of element/class itself within the method. Like ME object inside ABAP class.
Like this inside a method of a class in java.
Example: We want to throw an error message to user when credentials are incorrect with blink effect.
Ajax stands for Asynchronous Java and XML, it is used to make a call to a service on internet and get response.
$.ajax(); //GET, POST, PUT, MERGE, DELETE

SAP UI5 Framework – Collection of SAP libraries, Each library includes number of classes which we can use to design our
responsive web application.
SAP UI5 Design Time Component SAP UI5 Run Time Component
UI5 Control Libraries

SAP UI5 server side support
sap.ui.commons sap.m
sap.ui.table
sap.ui.ux3
sap.ui.layout
sap.suite.ui
sap.ui.comp UI5 Renderer
UI5 Core Libraries
sap.ui.core sap.ui.core.mvc sap.ui.unified
HTML5, CSS, JAVA SCRIPT, JQUERY, LESS, AJAX, D3, DATAJS

Deprecated – Support for certain things has been ended, library development has been frozen, anytime this may get
removed.
Obsolete - Already been discontinued, any code using this module, will no more work.
Does browser understand ABAP, UI5, Webdynpro, BSP?

No. HTML, CSS, JS.
SAPUI5 Framework (loaded in browser)

Project Written in JS based on OpenSources
XML files
JS code Renderer
Design time
Browser
(HTML and CSS)

UI Layer(UI5, Fiori) - AngularJS
Service Layer (HTTP)
Integrations API layer (Business logic)
DB layer
DB

You never understand everything, it is important to understand system
Difference between Open UI5 and SAP UI5?
SAP UI5
sap.viz sap.ui.comp
Open UI5
Sap.m,
sap.ui.layout
SAP UI5
Core

How you use?
1. Reference the UI5 framework.

<script src=“path where the UI5 framework is placed”>
Local reference CDN

WebIDE comes pre-packaged SAP
UI5
Does ABAP code changes when you write in SE38 and SE80?
No. https://youtu.be/Am8K8jVAYwM

SAP UI5 and Open UI5 both are hosted in Akamai CDN.
CDN works?
IN
Mumbai
IN
IN
IN UI5 Framework
IN
IN Germany
IN Data Centre
Delhi
US US
Miami
US
Californi
a
1. Anubhav will you give documents during training.
Today. Work for you after 1 year. Because 1 year before we were using sap.ui.commons, and now its deprecated.
2. I will tell you where can you get documentation

SAP UI5 SDK – Software Development Kit
http://sapui5.hana.ondemand.com
Exercise: Design a user name and password screen in SAP UI5 with a login button. When you click on login button, check if its
valid and change the dom with “logon success!”.
Hints: sap.m.Input for input.

Design Pattern:
In software industry, we have common software design problems and there are now common solution to these problems.
Design pattern provides solution to these common problems, it allows you to design software in coherent way.
MVC Architecture: Many times we need to create applications which involves the user interface (screens), we can apply the
MVC design pattern.
notifies Processing adapts

Controller
response notifies
Data binding Data

IO - View Model
Mechanism by which we can

directly pair our view with the
model to exchange the data ECC
SAP UI5 framework we have verity of types
Views:
JS view – 10%
XML View – 90%
JSON view – 0%
HTML View – 0%
Models
JSON Model
XML Model
Resource Model
Odata Model
Controller
JS
Why XML views preferred?

1. Parsing(converting XML to equivalent HTML+CSS code) is faster fro XML views as compared to other.
2. When we use JS views there is chance that someone violate the MVC principle
3. Easy to understand as XML is well-known technology

What is XML?
XML stands for eXtensible Markup Language.
SAP XML Portal

ABAP Java
Every programming language has interfaces and classes to process the XML.
Parsing – Converting XML to own data type (ex. <xml> to internal table)
Rendering – converting data type to <xml>
OOPS ABAP – if_ixml, cl_xml_document......

HTML5+CSS Index.html view Controller
4
View (JS) Controller (JS)
getContollerName
1 Constructor
{
Return “anubhav” oninit: fucntion()
}
createContent(oController)
3 {
UI5 Framework
Return viewElement
}
2
C

Main Project Folder We will defined path
of root folder as a
namespace “./”
webapp spiderman
Namespace: path of the root folder. In this Index.html spiderman.views.view1

case spiderman.
views
view1
view2
controllers
Controller 1
Controller 2

Funda fox:
 F12 is best frined, any time when app doesnt work, please do an F12 once.
When we create any JS file in SAP UI5, we must use a special way of writing code, This is called scaffolding template.
Scaffolding template was introduced in SAP UI5 version 1.36, it is a way of managing all the dependencies on our controller.
SAP UI5 design time

libraries
Sap.m.button, etc..
Js file
Js file of your own

Js file of your own
Js project
file of your own
Js project
file of your own
project
project
Funda fox:
> Before scaffolding template, we used to use jQuery.sap.require() statement in SAP UI5 for managing dependencies.

sap.ui.define( All the dependencies will be put inside this array, Dependency is always
[ ], a JS dependency. They way we put is to use path with slash /.
function(){ If we want to put dependency for sap.m.Button  sap/m/Button
return {
The function will automatically receives the object of dependency.

};
}
);
In order to code a controller, we need our first dependency on SAP UI5’s standard controller class.
A
Funda fox:
 In js the inheritance is indicated by keyword called extend
 sap.ui.core.mvc.Controller is the standard class in SAP UI5 for coding controllers.
 When we use the module as a dependency we should put path with /.
B
Module path: sap/ui/core/mvc/Controller

Event and the property
Property is a attribute of a class, Event is an activity performed by user on element.
onclick=“function()”
Event is an activity
performed by user JS code which you want to run when event is fired
press Example: what to do when user click on button
anubhavAmazing() is the function
Funda fox:
 HTML object is different from UI5 element object.

Control hierarchy Can you assign a child class object to base class object?
Entire UI5 framework is built by OOPS methodology. Yes. Widening cast in OOPS.
sap.ui.core.ManagedOb
ject
sap.ui.core.Element
text
sap.ui.core.Control placeAt()
sap.m.Button sap.m.Label sap.m.InputBase sap.ui.view
sap.m.Input sap.m.Select

Funda Fox
 Whenever we look for a method, event, property, aggregation inside a class, and we could not find it, check the base class of
the control.
 Module name use the class name with / instead of . It is used to define the dependency in the scaffolding template.
 Whenever you see a property in SAP UI5 control, You will always have a setter and getter method available for that, for
example if we have a property called text, we will see setText() and getText() methods.
value = setValue() and getValue() method, width : setWidth() and getWidth()
 Whenever we see aggregation, for some of them we will have addAggName(), removeAggName(), setter and getter for them.
 For every event, there will be 3 methods, fireEventName(), attachEventName(), deattachEventName()
 To obtain the object of SAP UI5 element we use a special API provided by UI5.
• sap.ui.getCore() which gives the RUNTIME OBJECT of running application UI Core.
• inside that runtime object we have methods, one of the method byId(“”) is used to obtain the control object.
• If you using JS views, you can use the getCore().byId(). But if you use XML view, Use view object to obtain control object by
this.getView().byId(“”)
Ask Your self - 4 Anubhav SCN Question Report to SAP

1..n
Wings, engine
1
Airplane Person
width,height,airline 0
Passenger
0..n Passportno, Name, Lname,
Age, Gender
Cargo Plane Passenger Plane
Association: It is a relation ship between the classes. Our entire software is modularized in classes, in order to make the
software work, we need to make sure that all our classes function together in sync. Technically, There will an object of
associated class present in the main class. Here Airplane class will have object(S) of passenger class.
1. Aggregation: Is a loose coupling, should have relationship. Both objects can work independently. E.g. Passenger and plane.
2. Composition: Is a tight coupling, must have relationship, both objects cannot work independently. E.g. Wings and plane,
engine and plane.

In UI5 some controls are complex like they need
other controls to display data.
sap.ui.table.Column
sap.ui.table.Column
Table columns
sap.ui.table.Column
sap.ui.table.Column
var oDemo = document.getElementById("idBtn");
oDemo.setText("anubhav");
var oCore = sap.ui.getCore();

var oBtn = oCore.byId("idBtn");
oBtn.setEnabled(false);
sap.ui.getCore().byId("idBtn").setText("Wow This was an amazing class");

In an XML view, we cannot write any processing logic, which is what protect developers violating MVC principle. As we know
that SAP UI5 offers multiple libraries like sap.m, sap.ui.table, sap.ui.layout etc, we will use the concept of namespace in XML
view to identify the family of the control.
<core:View controllerName=“” xmlns=“sap.m” xmlns:anubhav=“sap.ui.layout” xmlns:core=“sap.ui.core”>

<Button text=“Welcome”>
<anubhav:Grid>
</core:View>
Whether to load or not load the

library - bootstrap
Which control belongs to which library
Funda Fox:
Whenever we use a control in XML view, system will automatically append the view id in the ID of the control.
idPwd
idXMLView--idPwd
Within a controller, inside of event handler methods, this pointer will point to current controller object. Hence with the
controller object we call APIs of the controller like getView() will give view object of the controller. And we can also call
other controller methods. For more www.onlinefioritrainings.com
Exercise: Implement
View 1 View 2
Controller 1 Controller 2
Singapore
Formatter/Utils.js
If you give more than what you get, Soon you will get more than what you gave
Exercise: Convert the current example to a JS view with MVC.
Funda fox:
When we use JS view, in the event handler method, this pointer will point to object of UI element rather than object of
controller. Ideally, we need object of controller to be able to get the view object or invoke other functions of the controller
like in XML view case.
Here we need a mechanism to pass the controller object as this pointer to the event handler
Syntax: eventHandler : [oController.methodName, oController]
Explicitly passing object of controller to

the event handler as this pointer
Example: press: [oController.anubhavAmazing, oController]

Model: Model is an object of Data.
JSON Model Client Side Model: Is a data model which holds all the data in client side (browser), when these
XML Model models are loaded, all the data is loaded. These models are used to hold data temporarily to do
Resource Model manipulation on data. Suitable for small set of data.
Server Side Model: In this data model data is loaded with a request <-> response. The data is not
OData Model stored in client. This is a channel to communicate to backend server like ECC, S/4HANA. Real-time
data read and store is done via OData model.
There is nothing like MAGIC

Step 1: Define a brand new model object
var oModel = new sap.ui.model.modellib.ModelName();

var oJSONModel = new sap.ui.model.json.JSONModel();
var oXMLModel = new sap.ui.model.xml.XMLModel();
var oResource = new sap.ui.model.resource.ResourceModel();
var oODataModel = new sap.ui.model.odata.v2.ODataModel();
Step 2: Load or set the data to the model object
oModel.setData( hardcoded_data );
oModel.loadData( file_path );
Step 3: Set the model object to the application or view or the UI Control level
--app level
sap.ui.getCore().setModel(oModel);
--View
this.getView().setModel(oModel);
--UI Control level
this.getView().byId(“controlId”).setModel(oModel);

When we want to access the data from the model in the UI, we need to do data binding.
The data binding is always done by using the address of the data. In JSON, we prepare the address of data as follows
Every curly braces {} is represented using slash /
Every array [] item is represented using index no.
Address of Anubhav Salary in structure?
{ EntitySet /empStr/salary
“empStr”: {
“empNo” : 100, Employee no for prathibha?
“empName” : “Anubhav”, /empTable/1/empNo
“salary”: 900,
“currency”: “EUR” Employee Name for employee 800?
}, /empTable/0/empName
“empTable”: [
{
“empNo” : 800,
“empName” : “Monika”,
},
{
“empNo” : 900,
“empName” : “Prathibha”,
}
]
}
Library (sap.ui.core)
Class (mvc)
ViewType
JS XML JSON HTML
sap.ui.core.mvc.ViewType.JS

Binding/Data Binding
When we connect our view UI element(s) with the model path, so that data can be exchanged between view and the model,
the concept is called as Data binding.
Types of binding
Property binding – when we connect property of a control with the path of our model, property binding. E.g. We connected
value property of Input control with the address of JSON model path.
Expression binding – We can bind the expression to a property of a UI Control, this expression is evaluated at runtime and
supplies the value to the control.
Syntax: {= expression} , {= condition : then ? that}, {= ${salary} > 50000 ? false : true}
If condition
Then
Else
That
Funda Fox:
When we do expression binding the sap ui5 by default doesn't support that, we need to explicitly tell sap ui5 to support such
binding, this is done by adding special context to sap ui5 bootstrap as
data-sap-ui-xx-bindingSyntax="complex"

Aggregation Binding – When we connect aggregation of the control with the path of our model. E.g. Rows aggregation of
table will get data from empTab entityset.
Absolute path
A path which is provided in the main control for aggregation binding is the absolute path. Typically the child of root node.
Relative Path
The child elements of the main control points to the path relative to the parent control path, is the relative path. E.g. Column
will get the data from individual records of the empTab hence the column binding path is called relative path.
Element Binding
When element (memory address – context) of a element out of multiple is connected to a control, its child control can
receive the data from parent (ref. ABSOLUTE PATH). Children UI elements will be referencing to the RELATIVE path.

SAP UI5 is the framework to create Web Application, when we want a responsive webapps, sap Fiori guidelines must be
respected. The guideline says, We should use container control to add the other controls inside a view.
1. App Control
2. Split App Control
An App control is the super parent of all the views. Each view must return a page object.
Data Model View

JSONModel
999
{
.json empStr: {
empNo: 999, Demo
empName: “Demo”,
Salary: “9565”
} 9565
}

Binding Mode
Binding mode decides how the data will be exchanged between model and the view. Any change in the model data reflects
in the view and vice-versa is all dependent on binding mode.
One-Way: When the data changed in the model reflect to the UI, it is one way binding mode.
Two-Way: When the data changed in the UI is reflect back to the model and vice-versa, it is two way binding.
One-Time: The data only connect from model to the view at launch time, after that they are disconnected completly.
APIs (Some methods of model object)

oModel.getProperty(“path”) ;– Return the value or json of the path address
oModel.setProperty(“path”, value); - Change the data inside the model object
var oModel = sap.ui.getCore().getModel();

oModel.getProperty("/");
oModel.getProperty("/empStr/empName");
oModel.getProperty("/empStr/empName");
oModel.setProperty("/empStr/empName", "Roger");
Funda Fox:
What is the default binding mode for JSON Model?
Two Way
Named Model Concept
UI5 framework needs a differentiator between your models then only we can have multiple models at application level.
In the named model concept we will use the name of the model while setting it to SAP UI5 framework in setModel API.
Syntax:
sap.ui.getCore().setModel(oModel, “name of model”);
There will be one model which will have no name, it will be set as default model.
Once the named model is set, we can use the model name in the binding to connect the data from the newly created named
model. While doing the binding we must use modelName> before the path.
Exercise:
Keep the same page and create new json file for Ironman, set that model at the application level and then provide a button
called FLIP BUTTON on UI.
When click on the flip button, the model should be flipped from default to ironman and again if i click on the button, it should
again flip.
Keep Simple things simple
How do we design the view in XML as per the requirement? how we know its a form or simple form? table or tree table?

Input Fields Add
title Header of the column
Certain type of
template column
Aggregation decides the type

of the control which we want
e.g. Input, label, text,
dropdown, radio, checkbox,
image etc.
Exercise:
Filling the data inside the input fields, introduce new INSERT button on UI. When clicked, add the record to the table based
on data from input fields.
Exercise:
In the table when the employee name is set to your name, make the smoker value false.

Fundafox
 We can declare global variable within a controller, This variable can be accessed inside the methods using this pointer.
 We can also put a super controller for all the other UI5 controllers in the project for maximum reusability. All the other
controllers will inherit from so called BaseController.
 We will use template design pattern as below:
sap/ui/core/mvc/Controller
BaseController (template)
Hold all the global objects/functions
Controller 1 Controller 2 ...
Since we are using binding everywhere, if we want to change data on UI, always use model object, never directly change data
on UI using control APIs like this.getView().byId(“”).setValue()

Funda Fox:
Every event handler method receives an Event object by default. This event object carries important information e.g. Row
select event object carries info about select row index, row contenxt etc.
 We can use following APIs of the event object
• getParameters – to read all the parameters from event object
• getParameter(“pname”) – read exactly the same p value
• getSource() – source control object from where event was originated, e.g. Event was triggered from table.

Table Element 1
Element 2
101 Jessica 8000 EUR
Element 3
Element is the memory location where the data is stored. The json path (/empTab/0) is the address of this
memory element. This is known as Context.
Simple Form (parent) Element Binding
EmpNo 1. Read the context of selected record  json path of

EmpName the selected row (/empTab/2)
Salary 2. Bind the element (address) to the Simple Form
3. Bind of children's of the parent (where element
binding was done) with relative path.

Absolutepath
bindElement
Page 1 Page 2

{
“empTab”: [
{
empNo: 101,
addresses: [
{},
{}
]
},
{}
]
}

Exercise: When we are flipping the model, first flip is working, next consecutive flips has issues, fix it.
Resource Model
Is the data model used in SAP UI5 for the purpose of internationalization. Basically we need the labels, texts, messages to be
convert in to the system logon language. Resource model points to bundle where we have language specific texts.
UI5 Developer
KM Expert
Design software which supports
Do the translation of texts
internationalization

SAP Fiori Launchpad is the single entry point for logon and
fiori apps.

Formatter Function:
The formatter function can be used to perform formatting on the data before it is supplied to the UI control.
Data Model
formatter {
value empNo
Return value
}
Syntax:
Property: “{address}” ---old
Property: { File.js
path : ‘address’,
formatter: ‘.objName.functionName’ functionName:
} function()
We cannot understand everything, what we should know is system

Exercise: When the table loads, apply custom css to have alternate row colors in the table.

UI vs UX?
As a developer you can change the UI but cannot change the UX. UX stands for user experience, It is set of common
behaviours which user is used to while using your application.
SAP Fiori – SAP’s UX strategy for designing responsive web application. When we follow the guidelines and protocols, we will
automatically achieve the best in class user experience. The underlying technology to design a Fiori UX is SAP UI5.
Structure of a Fiori application:
ROOT VIEW View1.view.xml

<Page>
Index.html App.view.xml
<App>
<pages>
</App> View2.view.xml
<Page>

Parent
App.view.xml - App
Child 1 Child 2
View1 View2
Exercise: Design a JSON for fruits, suppliers and cities. Each entityset has data.
fruits (20) : name, price, unit, benefit, type, availability (A,D,O), color, photo
suppliers (15): name, city, sinceWhen, country, contactPerson, operatingHours
cities (10): cityName, famousFor, state, remarks
One file-
{
“fruits”:[{},{},{}.....20],
“suppliers” : [{},{},{},....15],
“cities”: [{},{},{},....10]
}
List Control : is a single column table. Used to display multiple items.
header
Item1
Item2
items Item3
..
...

Items 0..n
sap.m.ListBase sap.m.ListItemBase
DisplayListItem StandardListItem
sap.m.List
ObjectListItem CustomListItem
InputListItem ColumnListItem
FeedListItem ActionListItem

Exercise: Display the fruit benefit, name, image, price and unit in the list control.
Use Case: We have search field on the main screen, requirement is to search a fruit in the search list and display the filtered
results. For this purpose, we will use sap ui5 filter class – sap.ui.model.Filter  2 operands and 1 operator
Ap
Controller
eventHandler
List Get the search string

Prepare filter object
Apply the filter on list items
Exercise: add a button at the bottom of the page, which looks like filter icon, When we click on filter we need to choose
< 50 , >= 50 <=80, >80 (popover control), after selecting the range, You need to filter the fruits based on price.

View 1 ABSOLUTE: /fruit/1
bindElement(path)
View 2
Item 1
/fruit/0 Item 2
/fruit/1 <text RELATIVE_PATH>
Item 3
/fruit/2
This is known as SAP Fiori Worklist application.

Types of Fiori Apps
Fact Sheet
Transactional Fiori Apps Analytical Fiori Apps
(obsolete)
SAP Fiori Work list SAP Fiori Master Details OVP Apps ALP Type
UI5 Type apps Free style Fiori apps Smart Filter KPI Type of Apps

Master Section
View1.view.xml
- Search Details Section
- List View2.view.xml

Fragments
Fragments in SAP UI5 are light weight UI parts, They are used to modularize your Screens. You can compare fragment same
concept as subscreen in ABAP.
View
Address Data
Temporary Address
Name Load City Name Load City
Address Line Address Line
PO Box PO Box
City City
State, Phone no, email Con.
State, Phone no, Email
Permanent Address
fragment Name
Address Line Load City
Fragment doesnt have its own controller, it relies on PO Box
the controller of host view. City
Code related to actions inside fragment must be State, Phone no, email
inside the controller of host view.
Permanent Address
Parasite Load City
Exercise:
Carry out the binding in the moreInfo fragment to display select fruit healthBenefit and nature of fruit.
Design 2 fragments with just one label for supplier data and city select and integrate with view2.
sap.m.Table is a multi column list control. sap.m.Table can also be configured to be responsive.
Use Case: My manager comes to me asked me to create a filter button on top of table control, when we click on the filter
button, it should launch a popup displaying all the countries. Also, on city input field, when user choose f4 help, it should
display all cities in the popup. On selecting city from popup, the selected city should fill the input field in table.
Since we have a common need of a popup, we can design a single fragment and reuse it for dialog box.
Exercise:
Design a screen to display selected supplier data from the table. Enable the navigation from table control to take user to 3 rd
view.

Create a global array in controller
this.global.push(everyItemSelect)
JSONModel
Items: this.global
cart
View 1
Multiple

Exercises
We are designing a big fiori application, we have a requirement to perform following in a reusable fashion.
controlObject
validator.js
true/false
Every function of validator must return true/false

1. Check if the data is not empty in an input field. Together with that if the data is empty, set the valueState property of the
control as Error. Return that the validation failed (false).
2. Check if the date is more than today’s date.
3. Check if date is less than no of days we will input from current date checkPastDate(oDate, 3).
4. Check if the given value is an Email or not. Use regular expression.
5. Check if value in input field is more than given value checkMore(oInp, minThreshold);

Component.js
Component.js is the driver for entire app functionality, it is the starting point of your application. The SAP Fiori Launchpad will
always look for Component.js file in your application root directory. Index.html will only be used for local testing in WebIDE.
An app which has Component.js inside is called as fiori-like app. We need to kill the dependency on index.html.
App.view.xml
LPD
Component.js
testing
Index.html
manifest.json
Application
Descriptor

Technically, it is an object which is inherited from sap.ui.core.UIComponent class.
sap.ui.core.UIComponent
Component.js
Funda Fox:
 You must have only one Component.js in the root directory of your app. (webapp)
 The file name must be Component.js
 There exactly one file with name manifest.json which also co-exist with component.js in root directory.
Anubhav, which is best place for creating view object, which is the best place for writing navigation. I am confused whether to
create view objects in Component.js or in App.controller.js ??
Now we have big solution for that, WE DO NOT NEED TO WRITE CODE TO CREATE VIEW OBJECTS ANYMORE.
We just need an application descriptor file where we give configuration to create view objects.

Typical fiori app needs lots of things: (Application Descriptor) – Component.js is the consumer of it – manifest.json
 Track the version of Fiori App

 Unique app id assigned to it
 Namespace
 Dependency on SAP UI5 library
 Dependency on external CSS, JS files
 Manage the allowed themes, allowed devices
 Complete instantiation and navigation concept between views – Router
 Dep. Between other Component
 Dep. Between SAP UI5 libraries
 YOU DO NOT NEED TO CREATE MODEL OBJECT VIA CODE – Create models just by defining the config.
 Information about the Fiori app which is deployed in ABAP system
 Odata service which we will talk to
There are 3 sections for manifest.json

“sap.ui”
“sap.ui5”
“sap.app”

20
20
20

1. Load the libraries for specific version which you need – Manifest.json (bootstraping) - standardize
2. Use the library in xml view – namespace in xml view
3. Use the control dependency in controller – scaffolding and put module name
Today a UI5 developer facing below challenges – manifest.json

• As a developer we are unable to gaze which there right place where i create my view object.
• Which is the right controller where i put code to instantiate my local client side models like json,i 18n
• I am wasting my time for getting the App object and then using it for navigation, is there a better way
• What the standard to follow designing a UI5 app so i do not get bad comments in my code reviews by experts
• We are creating our root view object in component.js, can there be a easy way, is it right place to create root object
Funda Fox:
1. Any references to model, we just need to give folder path, because we referring to the files.
2. When we refer any SAP UI5 JS/XML file we need to use the namespace for the path.

Router is a default object provided by SAP UI5 framework which is responsible for creating all the view objects for us, it also
responsible for entire navigation concept in fiori apps.
To use the router we have to use 3 easy steps

1. Get the router object in component from its base class
2. Maintain the routing details and configuration inside manifest.json
3. Initialize the router

Sunny Vohra (Location : Delhi)
vohra.sunny@m-isc.com
JD
Implement and extend SAP Fiori applications.
Design and implement new solutions using SAPs latest UI5 /Fiori Cloud and Platform technologies.
Interpreting business requirements into effective UX design & specifications.
Definition, creation and review of user interface and usability requirements.
Involvement in design validation activities. â€¢ Work in a team of consultants, developers, architects and
project managers to develop UI5 applications.
Develop extensions for SAP delivered Fiori components.
Design the UI in SAPUI5/ Wire frame layout for customized SAP FIORI apps.
Set Up Roles, Create Users, Creating Catalogue and Groups for Fiori Launchpad.
Connection of data Services to the UI5 application.
Connection of SAP Workflow to UI5 Application.
Ability to rapidly construct wireframes & UI prototypes.
Coordinate with Functional SAP Consultants to understand business requirements.
Technical analysis of functional requirements and prepare technical specifications.
Lead and work independently with developers to implement new and improved functions for the Fiori Elements.
Identify areas with potential for improvement and drive the optimization by simplifying processes and code.

1. Still have lots of code which working on instantiation of View objects.
2. The back forward button of the browsers are not working as expected.
3. Whenever we navigate to a screen/view the application has a state, just in case user launch the app in another window
with same url or Refresh the app, it should restore the state of UI.
View 4
View 1 View 2
View 3
R
Solution – Routing
Every page of your app, is marked with a unique endpoint which we call as Route / Hash tag
When we do this the browser keeps track of every end point you navigated in a stack (FILO)
Funda Fox:
sap.ui.core.UIComponent.getRouterFor(this);
this.getOwnerComponent().getRouter();

A route matched handler is a special method which gets called every time the hash tag changes (navigation occurs/route is
fired).
Purpose:
function(){
This
var that = this;
Button{press: function(
that.getView()//not in scope
){})
}

“SAP UI5 doesn’t become bottleneck for developers”
If there is a need for a UI Control, That UI Control is not available in UI5 SDK, You can design your own control.
1. Which is super class for most of UI Control?

sap.ui.core.Control UI5 Framework
2. Which keyword do we use to define inheritance in JS? Renderer
extends
Syntax:
I want to create a Heading Control, SAP UI5 does not offer heading control to me. I have to design
my own control. HTML5+CSS
sap.ui.core.Control.extend(“NameOfControl”, {
metadata: { The renderer object, this is
properties: {}, the object which you will
functions: {}, use to talk to browser
The object of control itself.
events: {},
aggregations: {}
},
init: function(){},
renderer: function(oRm, oControl){}
});
Fiori Consultant Fiori UX Designer
UI5 and Fiori Developer
(Installation, security, (Prototyping, UX,
(Develop using UI5 Controls)
Configurations) Wireframes)
UI5 Framework Developer Odata (ABAP) Fiori Architect

Google provides ready to use JS Map API, This can be used with SAP UI5 framework to plot a map.
1. Just the way we use SAP UI5 framework using CDN, we can also use google map API from CDN.
2. We also need to provide a place holder on our UI to google. In this placeholder, the google api will place the map control.
3. Invoke the API and provide coordinates (Lat & Lng) to take map to a certain position.
4. We can also configure the zoom level of the map.
Florian: I want to know is there any possibility to use the custom control in JS view? Because in my project, we do not use
xml view and we heavily use JS along with custom controls.

Billions of users connecting to your application.
A typical application always holds the information about user session on server side.
P
REST protocol – Representational State Transfer – stateless
Is one the industry standard to be able to communicate from internet these days w/o storing
the user’s session information. – 85% are REST based API A
REST API – OData API

OData: stands for Open Data Protocol, It is a REST based protocol. It allows us to design an API to
expose the data over internet via HTTP protocol and REST protocol.
http
 The communication will have a request and response.
 Every request and response have (Header + Body)
 There are fixed type of methods to commutate and inform the server about the purpose.
Method Purpose
GET Read the data
POST Create new data
PUT Update the data
DELETE Remove the data
Benefits of Odata
 It is very easy to learn
 Open standard, no licensing fee is required to pay to utilize the concepts of Odata (Earlier there was a company called
OASIS which was later acquired by Microsoft)
 There are many standard frameworks available in every programming language to be able to create Odata services, like in
ABAP we have service gateway builder, in Java we have Olingo, in Node.js we have n-odata-server etc.
 As a consumer of Odata we don't need to care underplaying complexity and Database queries.
ABAP
Fiori App
Node.js
odata
Funda fox Java
Fiori App only talks to Odata
Python

Browser
Presentation Fiori Apps
Gateway (Fiori Frontend Server)

Application Layer Supports Odata creation, Store Fiori Apps
(SAP WAS) rfc
Current SAP ABAP Apps (FM, WF, Pro)
Database
HANA

WebIDE Embedded Deployment
Central HUB Deployment
Fiori Gateway
(SAP_GWFND, SAP_UI)
Reg. Fiori Frontend system, Gateway
SAP_GWFND, SAP_UI
ECC, SOH, S4HANA
RFC –
SM59
ECC
Imple. Fiori Backend CRM
Server
Pros:
You can connect to multiple backbends keeping one service.
https://www.youtube.com/watch?v=wFH52FMJ1nI
Cons:
Cost of the system increases
Distributed resources hence confusion

Server options
1. Use your company server – Save Money $$$ 
2. You can use a FREE Sever provided by SAP called ES5, but only for Read-only purpose. You cannot do any development
inside the server. Just have to use a free server provided by SAP called GWBASIC_SAMPLE
(https://developers.sap.com/india/tutorials/gateway-demo-signup.html)
3. Opt for server access (SAP NW 7.52, SAP_GWFND  HANA DB, S/4HANA, INTERNET FACING, LOCAL ACCESS)
1. Search on google find one – 500-3000 INR per month per user
2. S/4HANA 1709 – 2.5 k – 40 user , install.abap@gmail.com
4. Setup your own server
1. Local system – HW requirement
2. AWS Cloud (
https://www.youtube.com/watch?v=yrk4BjXSdy8&feature=youtu.be&list=PLcxqFaocb9WLtnq-rpXbRy5hnKECxr95G)

An Odata service is used to expose the data from the server side, whenever we want to consume Data we will always use the
Odata from UI5. For this purpose we will have Odata Model user (server side).
GET operation
Service Document (Describes the list of Entity Types and Entity sets)
Entity Type: Blue print of an real life object (Sales order, material, PO, Accounting doc, Customer) – it includes all the
properties and key properties of an object (customer – customerid, name, city, street, sinceWhen, country....).
Entity Set: used to perform the CRUD (Create Read Update and Delete) operation on Entity. Example CustomerSet,
PartnerSet, SalesOrderSet, SalesOrderItemSet
https://sapes5.sapdevcenter.com
Any odata service in SAP system has path prefix as /sap/opu/odata/
Sample odata service in every SAP system : GWSAMPLE_BASIC
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/

Starting NW 7.4 SAP introduced an EPM data model. According to that, we have a demo company (ITeIO) which is an online
IT equipment company (Amazon). They have lots of table and FM to be able to showcase demo scenarios.
Sample tables:
SNWD_PD, SNWD_TEXTS, SNWD_BPA, SNWD_SO, SNWD_SO_I, SNWD_PO, SNWD_PO_I etc....
Sample FM:
OData: GWSAMPLE_BASIC
https://host:port/sap/opu/odata/ServiceName/EntitySet?pname1=value&pnam2=value&pname3=value
Access Metadata Document

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata
Get all the data from server
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet
Get the data in JSON Format (?$format=json)
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json
Load data in chunk ($top = noofrows, $skip=no_od – Paging Concept)
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$skip=2&$top=2
Selecting certain properties ($select)
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$select=Name,C
ategory,SupplierName
Counting records
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet/$count
To filter records we use ($filter)
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$filter=Category%20
eq%20%27Flat%20Screen%20Monitors%27
Click here for Odata Documentation
Exercise:
Replace the fruit data from the json data coming from odata service with productSet entityset data. And show the data in list
control.
SO SO_I
SO
SO Items
Master

GetAllData
Server
M
Database

Single Record based on key (EntitySet(‘key’))
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/SalesOrderSet('0500000000')?$format=json
Navigation property to navigate to dependent entity using association

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/SalesOrderSet('0500000000')/ToLineItems?$form
at=json
CORS-Filter:
SAP WebIDE SAP Odata Server

localhost sapes5.sapdevcenter.
com
neo-app.json
2
Orion.exe SAP UI5

Destination
SAPServer
1 Multiple for one server
CORS: Cross Origin Resource Sharing One destination per system per CORS-Filter:*
client

200
SAP Cloud Platform – Public Network - Internet Facing server

Internet Like ES5
Fiori
HCC Hana Cloud Connector SMP - Tracking
Company Network – Intranet

VPN 200 – 10
DPC_EXT (write code for logging)
chunks
sy-uname
20000
https://www.youtube.com/watch?
v=Cx3cXAEcnUs&list=PLcxqFaocb9WLtnq-
rpXbRy5hnKECxr95G&index=8
Service
Odata 5 Implementati 500 Database
UI5 App. FM/Class
Service on Table
CRUD
MPC class – Design time DPC - Runtime

(Model provider Class) (Data Provider Class)
MPC_EXT class – Design time DPC_EXT - Runtime

(Model provider Class) (Data Provider Class)
EPM BAPI_EPM*
Product
BAPI_EPM_PRODUCT_GET_LIST
BAPI_EPM_PRODUCT_GET_DETAILS
BAPI_EPM_PRODUCT_CREATE
BAPI_EPM_PRODUCT_UPDATE
BAPI_EPM_PRODUCT_DELETE
BP
BAPI_EPM_BP_CREATE
BAPI_EPM_BP_GET_LIST
Funda Fox:
Service registration is a one time activity.

SEGW – service builder
/o/IWFND/MAINT_SERVICE – to register the service and watch already registered services
/n/IWFND/ERROR_LOG – to check error logs
/n/IWFND/GW_CLIENT – to check the response within SAP system and test POST request
OData
App
OData OData
OData
Image1(jpg) Image2(jpg)
ABAP Programming with S4HANA

https://help.sap.com/viewer/cc0c305d2fab47bd808adcad3ca7ee9d/7.52.2/en-
US/cf2989f6f5944305a0c8bcc0b0080c7c.html
1
Texts
1
1 1 1
1 Supplier BP Address
Product
Exercise:
The address data for each supplier is stored in another table called SNWD_AD table, Design an another entitytype and set
for Address data and establish a relation between Supplier and BP Address (Association) and Enable Direct navigation
between Supplier and BPAddresses using Navigation name ToAddress.
Exercise:
Implement the Update and delete method using serv. Generation for product and test them using GW Client.
DEEP ENTITY Concept

.net framework SAP ECC/SAP System
ECC
Fiori App
WebServices
$.ajax call HTTP
Requirements like
Call a workflow
Trigger an external comm.
Presentation (Browser)
Call an RFC
Post an Idoc
Send a ping request to SAP Cloud Platform
Typical Business Manipulation – Get me most expensive product
Function Import
Appn (ABAP Layer)
Neo-app.json to connect to Destination
{
"path": "/sap/opu/odata",
"target": {
"type": "destination", DB
"name": "NS4",
"entryPath": "/sap/opu/odata"
},
"description": "OData Service Connection"
},
Services to offer SAP UI5
Neo-
SAP WebIDE
app.json Local Destination
Local Destination
Local Destination
Local Destination
Local Destination
1.52
App
ExcelUploader
SAP System
1.44
HTTP Method Name in Odata Model
GET .get(“/Entityset”, callbacks)
POST .create(“/EntitySet”,payload, callbacks)
UPDATE .update(“/EntitySet(‘key’)”,payload, callbacks)
DELETE .delete(“/EntitySet(‘key’)”)
Function Import .callFunction(“/FMName”, callbacks);
Saturday
2 PM India Time -4
4 Hours a week

Sap Ui5 and Fiori Training With Odata: Anubhav Oberoy

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Sap Ui5 and Fiori Training With Odata: Anubhav Oberoy

Încărcat de

Drepturi de autor:

Formate disponibile

SAP UI5 and Fiori Training with OData

For more www.onlinefioritrainings.com

How we write typically any program?

Step 1: Initialization - Load this framework

For more www.onlinefioritrainings.com

Syntax to create a new Control object in sap ui5

var oObjectName = new libraryname.ControlName(sId, sProperties);

sId- unique control id.

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

SAP WebIDE Personal SAP WebIDE Productive

For more www.onlinefioritrainings.com

IDE, Programming Languages – Developer

Middleware (JRE) + Tools = JDK corr. To OS

Assembly language – MOV A, B, ADD A

For more www.onlinefioritrainings.com

Steps for eclipse:

For more www.onlinefioritrainings.com

HTML5 is the latest version of HTML.

For more www.onlinefioritrainings.com

Difference between UI5 and HTML5?

For more www.onlinefioritrainings.com

<!DOCTYPE XHTML version=“2.0” XDND SCHEMA=“XHTML/text”>

For more www.onlinefioritrainings.com

D Response Port – channel – type of req.

For more www.onlinefioritrainings.com

Request Type Purpose

HTML Page ? Server

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

Browser developer toolbar (F12) - console

<p>i <em><color value=“red”>Love</color></em> India</p>

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

Explain CSS Box Model?

HTML Element HTML Element

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

 JS is case sensitive (70% of your issues)

For more www.onlinefioritrainings.com

‘ – single quote “ – double quote both used to define literals.

For more www.onlinefioritrainings.com

Structure/ Object in JS – (Equivalent to workarea in ABAP)

var objectName = { “prop”: “value”, “prop”: “value”, ......};

Java Script Object Notation (JSON)

Array: is like internal table in ABAP

var aSomeName = [ “item1”, “item2” , “item3” , “item4” ];

For more www.onlinefioritrainings.com

//Local variable was used

//Same achieved by chaining

For more www.onlinefioritrainings.com

Anonymous function (function without name) Emp Id 10

function(param1, param2...){ Emp Name Zkas

Use https://jsonlint.com/ to validate your JSON.

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

$ - indicates that we want to use jQuery

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

UI5 Control Libraries

UI5 Core Libraries

sap.ui.core sap.ui.core.mvc sap.ui.unified