UI5 Training

SAP UI5 and Fiori Training with OData Services
on
SAP Web IDE
HTML5, CSS, Java Script, J Query, Complementary OOPS ABAP, Component JS, Routing, Manifest, Custom Controls
Latest topics covered without copy paste of code.
http://www.onlinefioritrainings.com
For more www.onlinefioritrainings.com
Start Date: 14th Feb 2018
Expected End Date: 18th Mar 2018
Weekdays 7-8 AM India time
Duration : 40+ Hours + Complementary OOPS ABAP

No Java knowledge required to learn SAP UI5 and Fiori
We Java Script which is different then Java and we will cover this in our course
Our development environment will be SAP WebIDE – Free
SAP UI5 - is a framework to develop responsive web applications. These applications can be executed on different platforms,
different browsers and devices.
Framework – Collection of libraries, library is a collection of classes, class is a collection of methods, attr, events etc.
Responsive – which adapts itself based on devices.
Webdynpro BSP M T D
Presentation
SAPGUI Web Browsers Mobile
Application
S/4 HANA CRM/BW p H
Cloud App
Suite on HANA ByD

Database

SAP UI5 Design time component SAP UI5 Runtime time
component
Sap.ui.commons Sap.m
Sap.ui.ux3 Sap.ui.table
Renderer
Sap.suite.ui.commons Sap.layout
Sap.ui.core Sap.ui.core,mvc Sap.ui.unified
HTML5 CSS JS Jquery LESS D3 Datajs abapjs

Sections of a programming
Initialization – load the SAP UI5 -- Bootstrap
<script id=“sap-ui-bootstrap” src=“resources/sap-ui-core.js” data-sap-ui-libs=“sap.m”

data-sap-ui-theme=“sap_bluecrystal” ></script>
Declaration
Code – imperative logic
Output
Clean-up
Web App development:

HTML – Hypertext Markup Language
<html>
<head></head>
<body></body>
</html>

Syntax to create your first UI Control
Data: lv_matnr TYPE matnr.
var oSpiderman = new libraryName.ClassName(id, properties);

Id- unique id of the UI Control
Properties – all te properties like text, press, label etc. will be provided using prop. All the properties should be given in
braces.
( ) - parenthesis
{ } - braces
[ ] – Bracket
Every statement in ABAP ends with period.

Here its semicolumn ;

SAP WebIDE – just a development environment.
Web – run on web browser IDE – Integrated Development Environment.
1. We don’t need to configure anything after the first setup

2. Since it can run on Web browser, We can run whole of the setup on cloud. We don’t need any local footprint of
installation in our systems.
3. Provides multiple deployment options.
4. Enrich with features like extensibility, fiori template
5. Provides integration capabilities with Git repository.
D T M
Hybrid App Dev SAP UI5 framework

IoT SAP WebIDE Git repository
…. Custom Extend Std.
ABAP HCP SMP

SAP WebIDE
SAP WebIDE Personal Edition (trial) SAP WebIDE Productive Version
1. You need to have java installed in your computer (JRE - JDK) 1.8
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
2. After installation, before that if you want to check, go to run -> cmd
type command java –version
3. Download SAP WebIDE personal edition from https://tools.hana.ondemand.com/
4. After the download is done, Create a folder in D:\ (C:\) with some small name MyWebIDE
5. Copy the downloaded WebIDE PE zip file inside the above folder and right click and extract.
6. Make sure the right port and run orion.exe as Run as Administrator (do not close opened command prompt).
SAP WebIDE comes with a server, which we have to start. The default port for server is 8080.
If you’re using some local servers for java like tomcat, jboss also has port 8080 used. You have to change port no. of
your WebIDE.
localhost:8080/webide/index.html

Architecture of Web Based Applications
CRUD – Create Read Update Delete
Request (u,p) HTTP/HTTPS Server

port Server side
response port program
FTP
Browser Request Type Use
GET Reading the data
POST Create data in server
PUT Update data in server
DELETE Delete data from WebContent
server
MERGE Read and Update
Funda fox:
All the browsers understand HTML, CSS, Java Script directly.

What is HTML?
HTML stands for Hyper Text Markup Language. The maintenance and versioning of this is done by World Wide Web
Consortium (W3C)
HTML Version Years
HTML Document HTML 1990
<!DOCTYPE html>
HTML 2.0 1995
HTML 3.0 1997
<head> HTML 4 1999

Used to keep all the metadata as well XHTML 2000
as global semantics of HTML page HTML5 2014
<body>
Only what we put inside the body of
HTML is what gets displayed to user.

Difference between HTML and HTML 5?
 HTML5 is just the latest version of HTML released in 2014.

 HTML5 is labral in nature as compared to previous versions.
 The declaration of HTML in older version was different then the newer one.
<XHTML version=“4.x” XDND/SCHEMA=XHTML xsd version 5.2>, <!DOCTYPE html>
 HTML5 we can skip putting end tags for some elements like input , img…
 With respect to input fields, many type properties have been introduced with HTML5.
 Automatic field validation was implemented in HTML5.
 Direct audio and video support w/o extra plugin required.
 New modern website content can be designed using special tags like <header>, <footer>,<section>
Difference between UI5 and HTML5?
 HTML5 versions and capabilies are managed by w3c And UI5 versions are managed SAP
 HTML5 is a markup language, UI5 is a Framework.

Funda fox:
Every html tag ending with end tag
The tree data structure representation of HTML is known as DOM (Document Object Model).
Syntax for a HTML element
<tagName prop=“value”>content</tagName>
HCP - Internet Intranet
HCC
WebIDE
ECC, Gateway

Ctrl+Shift+/ to comment out code in WebIDE
Exercise1 : Design a list with 5 latest topics (ABAP on HANA, LPD, Fiori, UI5, BRF), on click of the list element it should take me
to a youtube video on internet of the particular topic.
Funda fox:
In the structure of an HTML we will have wide verity of elements. If there is a need to address a particular element how can
we do that? In order to achieve this we can assign a unique id to each HTML element on page.
<tag id=“uniqueid”></tag>
Block level Elements:

<div> - division tag – whenever we want to structure our HTML content on page, we can make use of div elements. Div
elements itself never has any footprint on UI, they are used to wrap and structure elements on UI.
When we put an element inside div tag, it automatically starts from a new line.
<span> - inline element – if we want block level element for structure purpose but don’t want to start from a new line we
can use the span tag element around the control.
Funda fox:
How to display the DOM (Tree data structure of your HTML content)
We can use F12 key on our keyboard on any browsers. We can also right click on page and say inspect element.
The window in which the DOM is displayed is known as Internet Developer toolbar/ Int. developer tools.
IDT
Elements- Will show the DOM
Console – you can try some piece of code also the errors in you code will be displayed in the console.
Source – Used to display source code, this is also use to debug the code.
Network – used to display the calls made by browser (client) to server.
<header>
<article>
<section>
<article>
<footer>

Table : Columns and rows
table
tr Th Th Th Header - thead
tr Td Td Td
tr Td Td Td Body - tbody
tr Td Td Td
tr Td Td td
An iframe tag in HTML is used to ebbed another HTML file inside.
<iframe href=http://onlinefioritrainings.com></iframe>

In HTML when we want to give some style or formatting of content (coloring, font, size, border… ) we used to use tags.
<p>I love <em><b>India</b></em>, it is <font name=“Calibri”><color name=“red”>my country</color></font> and home</p>
Nightmare for HTML developers.

CSS – Cascading Style Sheet – It used to format/style/beautify the HTML content.
How CSS can be applied?
Inline CSS – inline css is applied at each element level using a special property called style property inside element.
<tagName style=“prop:value;prop:value;prop:value”></tagName>
Internal CSS- the style will be applied at page level, it affects multiple element(s) together, we use a special tag in
header of html called <style>.
<style>
selector: {
prop:val;
prop:val;
prop:val
}
</style>
External CSS- CSS is applied using a ready to use CSS file, CSS by Reference.
1. Is there any specific difference between JS and HTML View.
Yes, JS view is created using Java script, HTML view is created using HTML.
2. Can We use any of the above type view to create our apps? or SAPUI5
framework is strict to only HTML View.
You can use any type of views. XML views are used instead of JS or HTML.
XML – eXtensive Markup Lanaguage
UI5 topics
Disadvantage of Inline Style:

If we want similar style at multiple element levels and we use inline style. The maintenance cost is high, because to adapt
the changes we need to make change @ multiple places.

Syntax for internal Style
selector {
prop: value;
prop: value;
….
}
It is subjected to change multiple elements on page provided they all share same selector.
Selector – identifier of an element(s)
Tagname – tagname, system will apply style on all the elements which has same tagname.
.className – identifier as . Which indicates class name
#id – apply style on element which has this id.
Responsive Web Design: An application (app) which adapts itself based on size of screen (laptop, tablet, mobile)
automatically. A responsive web design gives coherent experience throughout devices.

CSS Box Model?
CSS box model controls the positioning, spacing, inner spacing and all relevant properties regarding the UI element display
on HTML page.
padding padding
margin
Html element
HTML
Html element
Element
How much width an element will occupy on screen = Width of actual element + padding + border width + margin

Pseudo classes in CSS:
Is used for conditional styling. When we want to change event style on an event or condition we can use pseudo classes. In
this the css will be applied when condition/event occurs and it gets back to normal position when event goes out.
e.g. when I take mouse on to a element I want a special style.
Syntax:
Selector:Pseudo-ClassName{
….
}
Fundafox:
We can put multiple selectors separated with comma.

What is JS?
JS stands for Java Script. It is a scripting language. A language which consists of functions and libraries built on top of
programming language. JS is the browser programming language.
We can implement the looping, conditioning and all verity of imperative logic using JS.
Types of JS ?
 Client Side JS – The code executes completely on client side (browser, mobile) of users. It is fast. E.g. to build rich UI
applications like UI5, Fiori, HTML based web apps.
 Server Side JS – The code is executed on server side. E.g. node JS, XSJS. Purpose is to read data from db, sending emails,
orchestration logic, control flow logic.
What JS can do?
 Validate your input

 Change the styles @ runtime
 Adapt UI changes
 Change DOM elements create new DOM elements
 Output can be displayed
 Conditional processing

Techniques to apply?
 Inline JS – JS which is applied @ element level.

<button onclick=“js code….”></button>
 Internal JS – JS which is applied @ page level, we use a special tag at page level called <script>
 External JS – JS file is referenced in HTML page from outside
Events: When user interact with your UI, he/she will perform actions (click, select, mouse down, mouse hover, key press).
Whenever an action is triggered, the browser will generate an event.
if a click action happens onclick event gets triggered.

Which variable you use to print system date in ABAP?
sy-datum
In JS, we also have 2 most powerful system variables available:
window: a window variable is an object of browser window.

document: This object will hold the object of DOM. We can use this object to play with HTML elements in the tree structure.
Funda fox:
 JS is case sensitive e.g. if we use Document it wont work. Right word is document
 Every statement in js ends semi-column (;)
 Nami-convension in js always follows camel case. If a work is made of 2 words, the first letter is small and next
consecutive letter of second word is caps.
iloveindia - iLoveIndia
spidermanishere  spidermanIsHere
 We don’t need to explicitly provide data types for variable declaration

Output functions
 window.alert(“”) – popup to display output

 document.write – it will replace the whole DOM
 htmlElement.innerText = display text inside an HTML element
 console.log – to print something in console
How to declare variables in JS

Data: lv_matnr TYPE matnr/i/str.
Syntax:
var variableName = value;
Objects in js: like structures in ABAP (collection of fields)
{ prop: value, prop: val, prop:val }

Array : it is used to store multiple values. It declared using brackets.

Syntax:
[ val1, val2, val3 ]
0 Val1
1 Val2
2 val3
Combine Array and object – Array of Objects – JSON – Java Script Object Notation
Exercise:
Create a JSON with 5 employees inside of an array, each employee should have eName, salary, currency, companyName
http://hcp.sap.com
You can validate your json using http://jsonlint.com

var employees = [
{ "empId":100, "empName":"Maram", "sal":2000 },
{ "empId":200, "empName":"Arjun", "sal":3000 },
{ "empId":300, "empName":"Reddy", "sal":4000 }
]
[ val , val ,val]
var employeeObj0 = { "eName": "Tom", "salary": 5000, "currency": "USD", "companyName":"ABC"}

var employeeObj1 = { "eName": "Harry", "salary": 6000, "currency": "USD", "companyName":"DEF"}
var employeeObj2 = { "eName": "Larry", "salary": 7000, "currency": "USD", "companyName":"GHI"}
var employeeObj3 = { "eName": "Jon", "salary": 7000, "currency": "USD", "companyName":"JKL"}
var employeeObj4 = { "eName": "Ron", "salary": 65000, "currency": "USD", "companyName":"MNO"}
var employeeDetails = [employeeObj0, employeeObj1, employeeObj2, employeeObj3, employeeObj4 ]
var myJSON = [ '{ "name":"Test1", "age":31, "city":"Delhi" }' ,

'{ "name":"Test2", "age":32, "city":"Pune" }',
'{ "name":"Test3", "age":33, "city":"Noida" }'];
var myObj = JSON.parse(myJSON);

Syntax for functions in JS:
1. Anonymous function – function w/o name, You can pass function as an argument or property to another function.
function(params, param){
return ..;
}
1. Named Function – Functions with name which can be referenced in code using functionName()
function functionName(params…){
return …;
}
What is an API?
Application Programming Interface
It is a class or a function which is provided by a framework on which we are creating our application.

We have ready to use APIs from document object in JS
Selectors:
.className, tagName, #id
We can now read the object of HTML (DOM Object) element using the API
Which is the object hold the object of DOM?
Document - document
document.getElementsByTagName(“tagname”); --returns multiple element(s) -- array

document.getElementsByClassName(“classname”);
document.getElementById(“id”); -- only and only element – id is unique on a page
Funda fox:
 In js = operator means assignment and === operator means comparison.
 document.getElement….. Always returns an object of HTML element
 Breakpoint will only and only hit when console is open.
F10 – next step (F6 in ABAP)

F11 – Inside (F5 in ABAP)
F8 is F8 – move till next BP
Shift + F11 – Move out of current method (F7)
BREAK-POINT – debugger;
Exercise: Create a table with fruit name and color of the fruit.
Add 2 input field on top of table with an add button.
On click of add button, the fruit name will be added to table.
Add
External JS:
The JS file exist separately.

For example if we want to change CSS of group elements we have to follow below steps
 Get the element objects in an array

 Loop at elements
 Inside the loop, we were calling the API.
How can we achieve same results in one line.
jQuery is a Java Script library. It is most widely used open source JS library. The main purpose is o “write less and do
more”
jQuery is industry standard used by major software giants like Google, Msoft, NetFlix, SAP.
Prerequisite before you use library?

We must have to load it, link it. So that all the functions are available in browser.
1. Local reference. Download, add to project, reference it.

2. Reference from CDN (Content Delivery Network). – Latest Changes.

Syntax:
We need to tell browser that we are using jQuery for that we use a special symbol call $.
$(selector).action();
Selector:
Based on tagname – tagname
Elements based on classname  .className
Element based on ID  #id
Action:
Ready to use function – hide, show, fadeout, fadeIn, toggle, animate
Event – click, dblclick, hover
CSS method – change the css property of a method
Fundafox:
Chaining concept
We can call multiple APIs using jQuery one after another.
$(selector).method1()
$(selector).action1()
 $(selector).method1().action1();

Callback function:
Request
Browser Server
Response
CallMethod() --- response time is not clear

Attach a callbackfunction
It calls once the desired functionality is
over in some time.

SAP UI5: It is a framework based on open standards (HTML5, CSS, JS, jQuery, datajs, d3js, LESS)
Is a collection of libraries which helps us to build responsive web applications.
UI5 code
(XML, JS) SAP UI5 Framework
Reuse libs (downloaded in browser)
HTML5+CSS

When OOPS programming was introduced there were lot of developers started using it. There were lots of common
problems which they face.
Set of architects sit together and came up with set of guidelines, common solution to common problem. Design patterns.
 Creational – factory, abs factory, singleton

 Behavioral – decorator, event listener, façade..
 ?
MVC Architecture : MVC DP is used whenever we have a UI as part of our application. This is a common practice across
industry in every framework where have UI involved.
notify Processing notify

Controller – control flow
state updates
IO Data binding Data

View (User Interface) Model – raw data object

Steps to create our first program
1. Load the framework

> Local reference
> Reference from CDN
DE IN US
FR AU UK

if we use internet based JS, what if something they deprecate some of the functions/APIs then it would be a
problem in productive environment
Deprecate – no further support. (maintenance no new development)

You are using it and you find an issue in standard code while using it, SAP will not support for this.
Any JS view has 2 standard methods created

 createContent – This will always return the control(s) which needs to be displayed on UI.
 getControllerName – always returns the controller name which has the processing code for this view.

Controller
2
onInit
View
Index.html UI Framework 1
getControllerName
createContent(oCon)
UI Controls objects
Return controls;

MVC
Views:
Java Script View – 20%
XML View – 80%
HTML View – 0%
JSON View – 0%
Controller
Java Script
Model
JSON Model
XML Model
Resource Model
OData Model

Funda Fox:
 When we use SAP UI5 APIs to define a new UI Control, We use SAP UI5 control APIs these are SAP UI5 control objects they
are not the HTML document objects.
document.getElementById("idBtn")
sap.ui.getCore().byId("idBtn")
sap.ui.getCore().byId("idBtn").setText("Anubhav")
document.getElementById("idBtn").setText("New Name")
 How to obtain the runtime object of running application
API: sap.ui.getCore();
var oCore = sap.ui.getCore();
var oBtn = oCore.byId("idBtn");
oBtn.setText("Wow");
 Whenever we have have a property for a UI control, we always have setter and getter method for every property.
for example, if a button has text property, we will have
setText() and getText() methods available to change and read text of button.
 For every event at control level we also have attach, fire, deattach methods also available.
oBtn.firePress()
oBtn.attachPress(function(){alert('this is a dynamic function')})
sap.ui.getCore() – Object of Running Application

Why do we use XML views rather JS view?
1. To protect MVC guidelines, if a developer usage JS views then there is chance of putting processing code in view. Which
violates the MVC principle. Because XML is not a programming language, there is no way you can put processing logic in
XML views.
2. XML is the industry standard to put views in a UI based application. Must have
3. Parsing of XML in devices is faster then JS. relationship -
Composition
Association
Association concept in OOPS:
Can you build whole software with one class? Engine
1
Yes. But the code will not be modularized, it will not be reusable.
Base class 1
Plane
Parent class
Table 1
Super class Passenger
n
Should have
Concrete classes relationship -
Child classes Passenger Plane Cargo Plane Aggregation

ManagedObjects
sap.ui.core.Element
Super class of most of the UI5

controls, all common properties sap.ui.core.Control
related to SAP UI5 controls like
visible, busy etc.
Button TextField Label
View Switch List
Funda Fox:
 In js the inheritance is indicated using keyword called ‘extends’
 If you are unable to find a property, event, method in a control, check its parent class. It may have been part of parent.

Open UI5 v/s SAP UI5?
Open UI5 is subset of SAP UI5 which is free for use, it comes under open source Apache license. Anyone can use, adapt and
change the UI5 framework. However SAP UI5 is a licensed product which comes with SAP NW.

Exercise: Design a calculator screen, put 3 text fields, 2 operands and 1 operator and a calculate button.
When user clicks on calculate button, display the result in alert() popup.
alert()
+
5 calculate
Woodcutter – 20, 18, 10 5-7

Boss said?
Busy cutting trees. Sharpen your axe?
45 exercise + 1 hours

In Controllers of SAP UI5 we have readymade methods available for usage are known as Hook methods.
onInit: is like a constructor of a class which gets called when the controller object is created by UI5 framework. All you
initialization code can be placed inside this method. E.g. creating local client side model, initializing variables, handling route
matched handler…
onExit: is like destructor of a class which gets called when the object of class is destroyed. Any kind of clean-up code can be
placed inside of the method.
onBeforeRendering: this methods is called multiple times. Before every time view is displayed to user. Purpose : some UI
changes which want to do before UI is displayed. Compare this with PBO. E.g. setting some default values, make some ui
changes which are visible to user…
onAfterRendering: this method is called multiple times, after the view is displayed. Jquery effect, css changes we want to do
we can do in this method.

History of SAP UI5 Controller:
sap.ui.controller(“path of Controller”, {
});
-- Load Dependency of some reuse components
jQuery.sap.require(“”);
1.36 – Scaffolding template – template/way of defining controller with its dependencies.
sap.ui.define(
[ “dependency1” , “dependency2” , “dependency3” ],
function(oDep1, oDep2, oDep3) {
);
https://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it
Funda fox:
 When we use JS views and want to get object of a UI5 control,
sap.ui.getCore().byId(“id of control”)
This will not work with XML views ? Why?
When we create xml view and controls inside, UI5 framework automatically changes ID of control by pre-fixing id of view
before it.
<View>
<Button id=“Anubhav”>
</View>
__view0-Anubhav
 When we use XML views, we need to get the view object first and from the view object we will get the object of UI
control
this.getView().byId(“id of the control”)
Just the view object

What is XML – XML stands for eXtensible Markup Language
It was designed to transfer data between heterogeneous technologies.
Every programming language must fulfil the need of converting data type to xml and vice-versa.
<xml>
.NET ABAP
Data type  XML = Rendering

XML  Data type = Parsing
XML is just like a tree structure. Unlike HTML, we can have custom tags in XML.
<UI5Batch>
<record>
<name>Anubhav</name>
<email>Anubhav.abap@gmail.com</email>
</record>
<record>
<name>Raji</name>
<email>raji@gmail.com</email>
</record>
</UI5Batch>
XML View:
The main advantage of using XML view is its compatibility to be processed by all platforms and programming languages. In
order to make sure that user never put and processing logic inside view, we also use xml.
<core:View xmlns:core=“sap.ui.core” xmlns:anubhav=“sap.ui.commons” xmlns=“”>

</core:View>
Can multiple views use same controller?

Yes, vice-versa not possible because a view can only return object of one controller at a time.
View
View Controller
View

How to create global variables in controller:
2 ways: Method1(){
Me.x
1. Using scaffolding – only used for dependency purpose X
Me.y
2. Declare at controller level y
Super->
3. Declare inside the onInit method }
this represents object of current module.
Funda fox:
When we use JS views and try to access the global variable/methods inside the controller method using this pointer, it
doesn’t work directly, because the scope of this will point to event handler not to controller.
we have to explicitly pass the object of controller to event handler so that this can point to controller object
press: [oController.Magic, oController]

Library : sap.ui.core
Class: mvc
ViewType
JS XML JSON HTML
Library.class.strname.constantname
sap.ui.core.mvc.ViewType.XML
Exercise: Design an XML view with user name and password field and login button. When
user clicks on logon button, validate user name and password with your name and display
another view at bottom @ runtime showing a picture of smiley. sap.ui.commons
Models: Model in MVC architecture represents data. It is an object of data.
Types of Models
JSON Client Side model: because all the data which is required is behold by browser. All the data will be
XML loaded in browser when use this model. Client side models are not suitable when we have large
Resource amount of data. It is suitable when dataset is small and it doesn’t change frequently. Share data
between multiple views/controller.
Server side model: model where data is kept on server side, loaded from the server (ABAP server)
OData using request and response. Best fit for ERP applications. Data which we load from real system and
post back to system which is ERP.

Steps to create a new data model and use:
Model
1. Create a fresh model object
var oModel = sap.ui.model.<modelclass>.<ModelName>();
sap.ui.model.json.JSONModel();
Sap.ui.model.xml.XMLModel(); sap.ui.model.resource.ResourceModel()
sap.ui.model.odata.ODataModel(); sap.ui.model.odata.v2.ODataModel()
2. Load or set data to model object
Set the data OR load the data to model object
oModel.setData({});
oModel.loadData(“path”);
3. You need to make model object aware to application/view/UI control
sap.ui.getCore().setModel(oModel); --this is model is global, all the views/controllers are sharing it
sap.ui.getCore().byId(“idofview”).setModel(oModel); this.getView().setModel(oModel);
sap.ui.getCore().byId(“id of control”).setModel(oModel);
4. Data binding (UI control connects to model properties) – UI control that which property you will get data from model
• Property binding
• Expression binding
• Aggregation Binding
• Element binding
Can we have multiple models working together of same and different types inside an application?
Yes.
{
"empStr": {
"empId": 100,
"eName": "Anubhav",
"salary": "500",
"currency": "INR",
"website": "http://www.onlinefioritrainings.com"
}
}
Funda fox:
To address a property of json we need to generate a path.
Every curly braces should be represented as “/”
/empStr/empId
/empStr/salary
In a view curly braces indicate a binding inside that we put the path.
2 twin brothers in a company.
Name
EmployeeID
Funda fox:
 A model for which no name is assigned while setting the object, works as default model for app/view/control.
this.getView().setModel(oModel);
 There is always one default model only and only allowed.
 In order to point to named model we use > symbol. If your model name is Anubhav then we use anubhav>proppath.

Controller
View
Model – Anubhav (default)
Model1 - veronica Binding – always pick data from default model
anubhav
Models
veronica

Q1. I had a XML view and controller from the view. Then, I pointed new HTML view (created by selecting
SAP UI5 view) to the same controller.When I try to set visibility of an element of HTML view from the
controller init/beforeRendering method, I try with this.getView().byId("<ID of control>").setVisible(true) as
well as sap.ui.getCore().byId("ID of control>").setVisible(true), but the error comes in console that
setVisible is undefined.
Can you let me know what went wrong and why?
var oCore = sap.ui.getCore();

oCore.byId("SecondView");
oCore.byId("SecondView").setVisible(false);
Q2. When we have 2 views (XML and HTML view) pointing to same controller, then which view's Object
will we get with statement this.getView()?
Typically we have one view per controller, this is why this confusion never happen. Bydefault xml view object is
returned/
Q3. If we have 2 views (XML and HTML view) and one controller common, then to get object of HTML view
element, will we write sap.ui.getCore().byID("") OR this.getView().byID("") in controller function?
this.getView(“id of HTMLView”);

Q4. If we have 2 views (XML and HTML view) and one controller common , then to get object of XML view
Q5. Is Netweaver Gateway exposed on Public Internet?
Depends, S/4HANA Cloud edition all systems are internet exposed. HCC.
https://www.youtube.com/watch?v=Cx3cXAEcnUs&list=PLcxqFaocb9WLtnq-rpXbRy5hnKECxr95G&index=7
Q6. Is Angular.JS similar product to SAP UI5?
No, architecture is same.
Q7. Who validates the code changes done and checked in through GIT Repository for OpenUI5 Applications?
SAP does it.

https://youtu.be/dxcNcSputaE
Q8. How do I refer to SDK Kit for previous version API (say for eg: 1.38 API) on SDK website if my project
demands to develop UI5 app on version 1.38?
https://sapui5.hana.ondemand.com/1.32.7/explored.html
Q9. In one the classes, you mentioned about unordered list to be used for aligning 3 boxes in CSS Chapter 1.
But we used CSS only to arrange elements in 3 boxes. So, can unordered list also be used?
Possible. For more www.onlinefioritrainings.com
Are there projects which demand complete customization of CSS and not using standard one
Consistent theme across all apps of my company.

Theme designer. – Branding and coloring to give coherent look as per brand.
Free HANA training
https://www.youtube.com/watch?v=ib2SvdXg7X4&list=PLqTi6EAVbKt22btaXn7KTJ4_1Rk2Sujtj
Deploying Fiori App to gateway:

https://www.youtube.com/watch?v=LyldnxBbplI
https://www.youtube.com/watch?v=TceM3zf8VSk
If you give more than what you get

Soon you will get more than what you gave
9000-15000 (per app USD) small fiori app
25 App – because of my name – Anubhav you are a brand.
Training -

If you see a problem and don’t know
how to solve: Fiori
Break it down in pieces Display Orders
Screen
https://blogs.sap.com/2014/11/19/sapui5-pagination-in-
sapmtable-using-skip-and-top-values-of-odata-service/
$top of odata service = 50
$filter = time eq 6 month
Paging in sap ui5.
Gateway – Odata service - Paging
VBAK (SO Header) – 1 Bn

20 mn

Binding Mode
oneWay
View
Model (Object)
twoway
/Entity/Prop
oneWay: data is moved from model to the view object

twoWay: any change in view will also change data of model object and
vice-versa
Json file onetime: only once when your app starts, it will load data from model in
{ view, any changes further in model or view doesn’t change each other.
Entity: {
Prop:”” oModel.setDefaultBindingMode();
}}
Using model object we can use following APIs (oModel)
If you want to read data inside model, you can call getProperty method and pass the path.
On the other hand if you want change the data inside model setProperty method.
Example:
var oModel = sap.ui.getCore().getModel();

oModel.getProperty("/");
Expression Binding
Many times we need to evaluate some expression @ runtime.

Example increase the salary of employee if employee name is Anubhav.
bindingProp = “{expression}”
bindingProp = “{= condition ? ‘return when fulfill’ : ‘doesn’t fulfill’ }”
bindingProp = “{= ${jsonprop} > 10 ? ‘return when fulfill’ : ‘doesn’t fulfill’ }”
Funda fox:
When we use expression binding or put multiple binding paths together we use a syntax in bootstrap like below
data-sap-ui-bindingsyntax="complex"
Aggregation binding:
When we bind aggregation of a control to the model entity, this becomes aggregation binding.
The path which participate in agg. Binding is known as absolute path. The children's of aggregated control also needs to be
binded with a relative path.
Exercise: Convert the JS view with binding to XML view. Find an API and remove checkbox from table.

{
“emptab”: [
{
“empid”:”1” /empTab/0 {empId, eName, Salary}
},
{ /empTab/1
“empid”:”2”
} Table (/empTab)
]
}
Simple Form
Exercise: Create a new column for smoker field in table element
as a checkbox. empId
eName
Fundafox: Salary
Always use element binding for master detail scenario.

value
Binding
1 Add data manually
2
3
4 Exercise: XML model and a JSON model, you need to put a button which
5 does switching between these two models.
6 As a result the whole table data will change between XML and JSON
7 model.
8
9 Hint:
var oTable = sap.ui.getCore().byId("idView--idTable");
oTable.bindRows("/empTab");
sap.ui.getCore().setModel(sap.ui.getCore().getModel("anubhav"));

4 types of people
Sleepers
Snoozers
Backbenchers
ActionPeople
https://www.youtube.com/watch?v=1KACIrCTo04&index=4&list=PLcxqFaocb9WIQJ-kptyPuiMSVWZVd2ff_
https://www.youtube.com/watch?v=aQoB9xhkvQs&index=5&list=PLcxqFaocb9WJZiAhjoR4SOzUn7t6CAmfY
https://www.youtube.com/watch?v=lYtxaGc6tOI&index=10&list=PLcxqFaocb9WIQJ-kptyPuiMSVWZVd2ff_

Internationalization:
A software supporting multiple languages.
Text Elements, Label @ Data element, Message class
Developer – make use of Resource model (i18n)

Translator – has to create files which has language specific texts for translation
&sap-ui-language=hi
Fundafox:
Single entry point for all application is fiori launchpad.
Before even user see launchpad, we also have a standard logon pad for user.

Formatter: is a function which is used to transform/data type conversion function which is called before the binding of
element takes place. Hence any kind of runtime data manipulation can be done with the help of formatter concept
View Model
Anubhav Anubhav
Oberoy
Formatter function
Binding syntax
Value : {
path: “/empstr/empId”,
formatter: ‘.objname.methodName’
}
parts: [{path:’/empStr/eName’},{path:’/empStr/surName’}]

Exercise: Add a new property called surname for every employee in json file.
@ runtime concatenate the employee first name with newly added surname property.
SAP Fiori: SAP Fiori is SAP User experience guidelines. We will use sap.m library.
http://sapfioritrial.com/
UI & UX: you can change the UI but you cannot change UX. This UX is achieved by making use of SAP UI5 framework.
Advantages:
 Responsive
 Single access point for app Fiori applications – Fiori Launchpad
 Role based
 Themes
 All devices, all platforms, all browsers
 Co-pilot integration
 Open UI5 can be used to create an app and productize
 MVC based development

Index.html View
View 1 Controls
View2
Place in the DOM UI Controls
App Container :
The parent for all the views of your
app.
Index.html
View
App Container Object
View 1
View 2 Obj of Page Page Object
Add to DOM
UI Cont
Sap.m

Anubhav
Anubhav
Nav
View1 View2
Funda Fox: (disadvantage of App container based navigation)

 The browser back and forward button are not supported when we use navigation using app.to API.
 There is no re-store of state of UI.
Example like our blog
https://sites.google.com/site/sapfioribatch516/
https://sites.google.com/site/sapfioribatch516/my-forms
https://sites.google.com/site/sapfioribatch516/extra-credit
https://sites.google.com/site/sapfioribatch516/my-calendar

Exercise: Prepare a json for a fruit store which is selling verity of fruits.
This json has 3 major components (all 3 are array)
{
fruits : [],
city : [],
suppliers: []
}
Name, color, type, healthben, taste, picture, availability (Available, Out of stock, Discontinued) - 25 fruits
cityName, famousfor, state - 10 cities
Name, city, contactName, phoneno, sincewhen - 15 entries

List Control: Is a single column table. It displays multiple items inside.
header
Item 1 sap.m.ListItemBase
Item 2
Item 3
items
..
.. sap.m.DisplayListItem sap.m.StandardListItem
Item n
sap.m.ObjectListItem sap.m.FeedListItem
sap.m.ListBase
items sap.m.ColumnListItem sap.m.CustomListItem
sap.m.InputListItem sap.m.ActionListItem
sap.m.List

Read values of selected list item
var oList = sap.ui.getCore().byId("idMain--idFruits");

oList.getSelectedItems();
oList.getSelectedItems()[0];
How to process multiple item
var items = oList.getSelectedItems();

for( var i=0 ; i<items.length ; i++ ){
var obj = items[i];
console.log(obj.getTitle());
}
Funda fox:
When we are inside of event handler method accessing the event object (oEvent) we get directly obtain the object who
raised that event by oEvent.getSource();
Exercise: transfer the selected fruit from list control to second view using elementBinding Concept.
Hint: bind element with second view object and change the binding path with relative to the binded path inside of second
view.

/empTab
/empTab/0 – {empId: “”, eName:”” }

/empTab/1
/empTab/2
Element binding
SimpleForm List
(/empTab/0)
{empId} /items Element
binding
View
{eName} /fruits/0
/fruits/1
{ /fruits/2
Name:””, /fruits/3
Type:””,
Image:””
}

SAP Fiori Worklist
List Details of selected items
Master Detail Application (App  splitApp)
List Details of selected items

Exercise: remove the delete and arrow from list item. When i choose item, it should still load data on right.
Funda fox: this
The event cause trigger

of this async function
Call asyc.
Main Method
Call method2()
var that = this;

When we call an aych function the execution of the async function will start on an event later point of time. In the context of
main method, whatsoever variables were avilable (example this) are not accessible inside of sync function.
So we need to define a local variable inside of main method (var that = this) to be able to access the scope variables of main
method.

sap.m.Table : Multi column list
ListBase
Table
Exercise: Change the color of status of each supplier based on below rules
Rule Color
Available Green
Not good quality Orange
Obsolete Red

Component.js : Is the driver of the overall functionality of your Fiori Application. If you are planning to integrate your Fiori
Application with SAP Fiori Launchpad, You must have to have the Component js (seamless integration).
What is the single entry point for all your Fiori Application for end user?
SAP Fiori Launch pad.
An application which has the Component.js file inside is known as “fiori-like app”. We are just trying to kill the dependency
from index.html file. We can index.html file for local testing.
Funda fox:
 There is always one Root Component.js for one Fiori Application. Which exist at root folder level.
 The name of the file has to be Component.js
 Typically it exist at root folder level

Component js drives following
 Information about the application like name, version, author

 Includes the details about supported devices, themes
 Odata Service information
 Complete details of application navigation and view object creation – Router Manifest.json
 Dependencies on SAP UI5
 Dependencies on other Apps
 ABAP system deployment info.
 Models – JSON, Resource, XML
 Global methods
sap.ui.define([“sap/ui/core/UIComponent”], function(Component){
return Component.extend(“path”, {
metadata: {},
init: function(){},
destroy: function(){},
createContent: function(){}
});
});

Index.html
JSON file, Declare all the necessary Views
splitApp
Main inside of this file. The object creation of
Master the view will be taken care automatically
by Component.js
Detail View2
Component.js
Index.html
+
Manifest.json
Component splitApp - ironman
App.view.xml
Container
masterPages
Main.view.xml
Master
detailPages Detail View2.view.xm

Fiori Launchpad

Manifest:
{
//fiori app version and details like directory of i18n, title and desc, dataSource
“sap.app”: {},
//relevant for dependencies on theme, devices..
“sap.ui”:{},
//Routing and configuration, starting view details,models, SAP UI5 lib
“sap.ui5”:{
//notation format to create your view objects.
Manifest
https://openui5.hana.ondemand.com/1.34.0/docs/guide/be0cf40f61184b358b5faedaec98b2da.html
https://help.sap.com/doc/saphelp_nw751abap/7.51.0/de-DE/74/038a52dcd7404e82b38be6d5fb1458/frameset.htm
Fundafox:
 If you want to create your view object using manifest declaration, You must not use createContent method of Component.js.
 Every single state of UI has to be a route path.
By far with the help of router, i solved followings
1. Instantiation of all views including Root view was done automatically

2. Navigation using browser back and forth button with limitation.
What concept do we use to make sure that the state of every single navigation is tracked by browser?
TagName (pattern) - #Trumph
Every fruit which we have a unique fruit name, i need to make the tagname also includes the fruit name so that i can make of
tagname to restore the state of UI.
#Trumph/apple
#Trumph/orange
#Trumph/banana

Fragments: Light weight UI parts used to modularize the UI in fiori, they are typically created separately and combined with
views @ runtime or design time.
Which concept we used to modularize JS code?

Utils. Formtter with scaffolding.
Which tech we used to code views?

XML
?
Eg. Address data
Permanent
Home
Button
Temp

Controller 1 View 1
clickMe Click Me
Click Me
Fragment
Controller 2
View 2
clickMe
Click Me

Define
<core:FragmentDefinition xmlns:core=“sap.ui.core” xml=“sap.m”></core:FragmentDefinition>
Consuming at Design time (embbeding inside of a view)
<core:Fragment name=“path”>
Consuming @ Runtime
JS: new sap.ui.xmlfragment(“path”, this);
Are there JS fragments?

Yes.
Are there controllers for fragment?

No. You rely on host controller.
this._oRouter.getRoute(sName);

In order to make a SAP like application when fruit is selected in list by default the detail screen should be loaded
in display mode with an ‘Edit’ button, when Edit is pressed, the screen will be changed in change mode and after
changing the data when user press Save button, we should switch it back to display mode again.
display.fragment.xml
change.fragment.xml

UseCase 2: Make the city column inside table as input field with F4 help. When F4 is pressed a popup should open displaying
available cities. On selection of one city, that city should be placed in input field.
Exercise: Design a input field for supplier names inside 3rd Icon tab filter, When press F4, Display the list of suppliers in a
Select dialog control. On selection of supplier it should be places in input field.
DO NOT DESIGN ONE MORE FRAGMENT. – REUSE
Make the remember selection work for city popup.

Custom Control:
“UI5 doesn’t become a bottleneck for developers”
1. Which is the parent class for all of the UI controls in UI5?

sap.ui.core.Control
2. Which keyword we use to indicate inheritance in UI5?
Extends
sap.ui.core.Control.extend(“id of control”, {
metadata: {
properties:{}, Put the definition of your custom control prop, event, agg.
aggregation:{},
events:{},
functions:{}
}, Initialize the variables of the class.
init: function(){},
renderer: function(oRm, oControl){
When someone use this control, what is the equivalent
HTML code should be send to browser.
} Talk to Object of the
browser control itself. For more www.onlinefioritrainings.com
});
Use Case: SAP UI5 doesnt offer a heading control for me, my manager asked to create a control which display as heading.
sap.m.Button in SAP UI5 framework
Support for press event which gets called whenever we click. There is a need to also support an additional event like mouse
over for the button (whenever user takes the mouse on to the button), it should fire an event.
sap.m.Button.extend();
Button
Can we use these custom controls in JS views as well,
if yes how.
Your Button Class

Where to load your map?
Object of your div.
Document.getEme....();
Location – latitude and longitude
Google
JS Code
map
My map to come
<div id=“anubhav”>

SAPGUI SAP UI5 & Fiori
Odata,xsjs OData
ABAP
Session Application Layer >>
Application Layer
WAS
SQL
Database Layer Database Layer

HTTP(S) – Able to communicate over
internet Central HUB Scenario
FIORI UI
Embedded Scenario – S/41610OP
SAP Gateway – Fiori Frontend
OData Service
GW_FND
ECC OData Project CRM PLM

Classes Reports
Classes Reports
Classes Reports
Application
Components FGs Include
FGs Include
FGs Include
Server
S/4HANA 1610 OP
Pure Odata and UI5 Local Computer, ADT, Fiori
Remote Desktop Launchpad, HANA DB
1500 INR 2500 INR
AWS
https://www.youtube.com/watch?v=y
rk4BjXSdy8&feature=youtu.be&list=P
LcxqFaocb9WLtnq-
rpXbRy5hnKECxr95G

OData stands for Open Data protocol, it was initially created by a company named OASIS. Later it was acquired by Microsoft.
It is based on REST principle (Representational State Transfer – Stateless)
Request (JSON,XML)
Client Server
Response (JSON,XML)
Request Type Purpose

GET Read Data
POST Create New Data
DELETE Delete existing data
PUT Update the data
MERGE Read & Update
Create Read Update Delete = CRUD

OData Service:
1. OData service document – gives the information about all the available data sets (EntitySet), All your CRUD operations
are fired on EntitySets.
http://services.odata.org/V3/Northwind/Northwind.svc/
2. OData metadata document – This gives the detailed information of how Entitysets are build. Each entityset is created by
Entity Type. Entity Types are structures of data, e.g. MaterialType has Mat no, Mat group, Mat Cat, Qty, Stock. Entity Type
also provides semantic for each property like data type, length, label. You can also enhance this metadata document
using SAP Annotation concept.
http://services.odata.org/V3/Northwind/Northwind.svc/$metadata
How can you use FREE Odata services available on internet

http://services.odata.org
Free access to SAP Gateway server – (Read)
ES4 and ES5
sapes4.sapdevcenter.com/
https://register.sapdevcenter.com/SUPSignForms/
NWBASIC_DEMO

Service document
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC 20
M
Metadata document
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata
Read all products (select * from dbtab)

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet AS
Format of URL
http://hostname:portno/sap/opu/odata/sap/ServiceName/EntitySet?firstparam&sec..&3rd...
20
JSON format ($format=json) DB
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json
Read data chunk by chunk (select * upto 20 rows from dbtab) – Paging ($top=n, $skip=n)
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$top=2
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$top=2&$skip=2

Read data for conditions (select * from tab where condition ) $filter
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$filter=Category eq
'Projectors‘
(condition where col like ‘’)

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$filter=substringof(%2
7Camera%27,Name)%20eq%20true
http://services.odata.org/V3/(S(4htcwchwu3wzeolz004ehxym))/OData/OData.svc/Products?$format=json&$filter=substringof
(%27Juice%27,Name)%20eq%20true
When we don’t want to select all columns (select col1, col2, col3... From tableName) - $select
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$format=json&$select=Name,Produ
ctID,Category
We can count records (select count(*) from tab) - $count

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet/$count
How to read data based on key (select single * from dbtab where matnr = val)
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1020')?$format=json

Read data from multiple table (Join) –
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-
1020')/ToSalesOrderLineItems?$format=json
Multiple calls to read data

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1020')?$format=json
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/BusinessPartnerSet('0100000007')?$format=jso
n
Single call read records from both table

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-
1020')?$format=json&$expand=ToSupplier
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/SalesOrderSet('0500000000')?$format=json&$e
xpand=ToLineItems

SEGW – Service Builder
/IWFND/MAINT_SERVICE – Service maintenance
/IWFND/ERROR_LOG – Service errors inside system
SAP Gateway and SAP Backend are installed in one single box.
S/4 HANA 1610
Copy host file provided by Anubhav on blog to your C:\Windows\System32\drivers\etc
DO NOT BE CONNECTED TO YOUR CORPORATE NETWORK.

BAPI_EPM_*
EPM – Enterprise procurement Model (Tables, Relations, FM, Classes, BO, BOPF Bos, Services etc...)
BAPI_EPM_entity_operation
BP
BAPI_EPM_PRODUCT_GET_LIST – all the products Product (Customers and
BAPI_EPM_PRODUCT_GET_DETAIL – Single product detail Suppliers)
BAPI_EPM_PRODUCT_CREATE
BAPI_EPM_PRODUCT_DELETE
BAPI_EPM_PRODUCT_UPDATE
Order
Which FM i use to read all BP (Business Partners)
BAPI_EPM_BP_GET_LIST
BAPI_EPM_BP_GET_DETAIL Order Items
BAPI_EPM_BP_CREATE

MPC (Model Provider Class) DPC (Data Provider Class)
SAP system creates it SAP system creates it
Manual change Manual change
MPC Extension (Inherits from super class

DPC Extension – DPC_EXT
MPC) – MPC_EXT
Manual change
Manual change
Definition – Design time Implement – Runtime

ZDEMO_ODATA_APR
ZCL_ZDEMO_ODATA_APR_MPC
ZCL_ZDEMO_ODATA_APR_DPC
ZDEMO_ODATA_APR_SRV
Exercise: Create an Odata project with name ZDEMO_ODATA_SAMPLE, Put 2 entity sets inside the Odata ProductSet and
BusinessPartnerSet. Register the service with gateway and check if service document is displayed with Ess.
GET_ENTITYSET
GET_ENTITY
CREATE_ENTITY
UPDATE_ENTITY
DELETE_ENTITY
For (i=0....)
{
Fiori 1bn
1 Calculate expensive
}
Loop at itab
Processing logic
ABAP
1bn
1
1
Database
1 bn

SAP WebIDE OData
desti
for developers nati
on SAP Fiori Frontend
server – SAP Gateway
Fiori Backend Server

Name=ServerName
Type=HTTP/HTTPS
Description=My S/4 Server
URL=http://host:port http://STS4SRVR.ST.COM:8005
ProxyType=Internet
Authentication=No Authentication
WebIDEUsage=odata_gen, dev_abap, ui5_execute_abap
WebIDESystem=XYZ
WebIDEEnabled=true
sap-client=<client>
Notepad file it will get saved as txt, we dont use txt.

Remove the txt extension from file.
Go to webide directory <your webide directory>\eclipse\config_master\service.destinations\destinations
HANA Cloud Connector or use your WebIDE to connect via destination in SCP
https://youtu.be/Cx3cXAEcnUs?list=PLcxqFaocb9WLtnq-rpXbRy5hnKECxr95G


UI5 Training

Uploaded by

Document Information

Original Title

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

UI5 Training

Uploaded by

Copyright:

Available Formats

SAP UI5 and Fiori Training with OData Services

For more www.onlinefioritrainings.com

SAPGUI Web Browsers Mobile

Suite on HANA ByD

For more www.onlinefioritrainings.com

Sap.ui.core Sap.ui.core,mvc Sap.ui.unified

HTML5 CSS JS Jquery LESS D3 Datajs abapjs

For more www.onlinefioritrainings.com

Initialization – load the SAP UI5 -- Bootstrap

<script id=“sap-ui-bootstrap” src=“resources/sap-ui-core.js” data-sap-ui-libs=“sap.m”

Web App development:

For more www.onlinefioritrainings.com

Data: lv_matnr TYPE matnr.

var oSpiderman = new libraryName.ClassName(id, properties);

Every statement in ABAP ends with period.

For more www.onlinefioritrainings.com

1. We don’t need to configure anything after the first setup

Hybrid App Dev SAP UI5 framework

…. Custom Extend Std.

ABAP HCP SMP

For more www.onlinefioritrainings.com

SAP WebIDE Personal Edition (trial) SAP WebIDE Productive Version

For more www.onlinefioritrainings.com

CRUD – Create Read Update Delete

Request (u,p) HTTP/HTTPS Server

For more www.onlinefioritrainings.com

<head> HTML 4 1999

For more www.onlinefioritrainings.com

 HTML5 is just the latest version of HTML released in 2014.

Difference between UI5 and HTML5?

For more www.onlinefioritrainings.com

Syntax for a HTML element

HCP - Internet Intranet

For more www.onlinefioritrainings.com

Block level Elements:

For more www.onlinefioritrainings.com

An iframe tag in HTML is used to ebbed another HTML file inside.

For more www.onlinefioritrainings.com

<p>I love <em><b>India</b></em>, it is <font name=“Calibri”><color name=“red”>my country</color></font> and home</p>

Nightmare for HTML developers.

XML – eXtensive Markup Lanaguage

Disadvantage of Inline Style:

For more www.onlinefioritrainings.com

Selector – identifier of an element(s)

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

We can put multiple selectors separated with comma.

For more www.onlinefioritrainings.com

What JS can do?

 Validate your input

For more www.onlinefioritrainings.com

 Inline JS – JS which is applied @ element level.

 External JS – JS file is referenced in HTML page from outside

For more www.onlinefioritrainings.com

In JS, we also have 2 most powerful system variables available:

window: a window variable is an object of browser window.

For more www.onlinefioritrainings.com

 window.alert(“”) – popup to display output

How to declare variables in JS

Objects in js: like structures in ABAP (collection of fields)

{ prop: value, prop: val, prop:val }

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com