Eclipse is free. Easy to use. It is used in all the companies to do dev.

For
UI5 apps.
1. Install jdk in our system.
2. Download and extract eclipse
3. When we open eclipse first time, It will ask for workspace. Its folder in
our computer which will store all the files (Webcontent).

HTML = HyperText Markup Language

Its based on html tags. W3C = www consortium. = All browser
Browsers can directly understand the html.
Every html file is also known as html document.
1. Version of html used to create that doc. It will also inform the browser
that the content which is written is an HTML content.
2. Every doc will also have 2 components . 1. head 2. body
1. Head = which contains the meta information about the html
document.
2. Body = the content what we wish to display to the user.
Version
When
HTML

1991

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000

HTML5

2014

Meta tags are used to store metadata about the document.

Types of chars.
Keywords.
Author.
Description.
Other SAP UI tech. v/s SAP UI5
1. Look and Feel
2. Mobile Apps
3. Custom Styling
4. Custom control
5. Integration

Header
Navigation

Section

Articles

Footer

<h1>Welcome</h1>
<font> <color>
<h1><font=Calibri><color>Welcome</color></font></h1>
CSS Cascading Style Sheets (CSS3)
Style = size, color, background, position
3 ways:
1. Inline we use style attribute at the HTML element level
2. Internal using <style> tag at the page level
3. External Using a external CSS file

Selector { prop : val ; prop2 : val2 }

Selector = id of the element -> #id
class name -> .classname
tagname -> tagname
To make all the h1 from html document in red color
h1{ color: red }
I want to make my inp field color as blue for which id is
inp1
#inp1{color:blue}

1. Blocks are not proper

2. Applying the style at tag level is affecting non desired elements also.

Element

Element

Padding
Border
Margin
Size of HTML element on a page = element size + padding +
border + margin

Responsive Web design : A responsible web design is a design of a web

page, which is capable of adapting the content according to screen size.

Java script is a programming language which browsers understands.

Fast response time.
Types:
1. Client-side = JS which gets executed in browser.
2. Server-side = Runs on the server, usually used to prepare results from
DB or DB lookups.
JS and Java are completely different languages, both in concept and design.
JS was invented by Brenden Eich in 1995.
3 Ways
3. Inline = at element level = oneventName = js code
4. Internal = use <script></script>
5. External
JS has two standard objects (js is case sensitive)
document This is the object of HTML document traverse to html doc or
trace element(s)
window this is the object of browser window

Js can change HTML element(s) content and attributes

JS can change CSS
Validate the input
Using JS code we call server requests also
We can dynamically add more html elements to the page
Output:
1. window.alert() OR alert()
2. Document.write()
3. Console.log
4. innerHTML
External CSS
DoM = Document Object Model -> structure of HTML document
F12 = Internet Developer Toolbar/Console
Event = activity performed by user on browser page.

Function in JS
function name(){
}
function(){}
var variable_name = values;
Syntax to create an object
{propName: val, propName2: value}
Array in JS
Var name = [val1,val2,val3]
If we combine the concept of Array and Object, It becomes JSON.
JSON Stands for JavaScript Object Notation. (Internal table of objects)
[{},{},{},{},{}]

jQuery = is not a DB query language (SELECT). Is a Java script library.

WRITE LESS and DO MORE
1. How to load the JS file which contains jQuery functions
a. Reference the JS file
b. Download and reference
1. How to consume jQuery.
We use $ symbol.
$(selector)
Selector = #id, .classname, tagname
document.getElementById(id)
$(#id)

Agenda
1. SAP UI5 framework
2. How to setup eclipse
3. SDK
It is a java script library which is responsible for rendering HTML5 pages.

Sap.ui.commons, sap.m,
Sap.ui.table, sap.ui.ux3
Dev.

SAP UI5 Framework

Design time
Runtime

Using UI5 Libs

HTML5 + CSS

Install SAPUI5 Application Toolkit

https://tools.hana.ondemand.com/
kepler
Syntax
var oName = new
lib_name.API(sId,Prop.);
sId = id of the HTML element
Prop = into curly braces
{ propname: val , propname2:
val2 }
Design a button which is part of
sap.ui.commons library

ps://sapui5.netweaver.ondemand.com/sd

ry control property, there will be setters

ters method.
ton which has a prop. Called enable, visib

Enabled()
Enabled()
Visible()
Visible()

Exercise : Design a screen for user to enter user name. Also place a
button with click label as Show my name. On click of this button, Display
the user name in popup.
User Name
Show my
Name

Sap.ui.core.Control
All common method and
attributes which can be applied
on any control

Button

TextField

1. There is no alignment of controls on the screen.

2. Controls are intervening each other.
3. Every time we create a control, we need to create the body element in
html and call placeAt method to place it in BODY.
Layout = Matrix, grid, vertical, horizontal
Sap.ui.commons.layout

sap.ui.layout

50%

50%

User Name

User Name Field

Password

Password field

Button

Design an application header with a user name field. When user clicks on
Logoff button in application header, Change the entire DOM to logged off
successfully, <username>.
Doc.write()

MVC = Model View Controller

A design pattern to create end to end UI applications. Using MVC we make
our application ready for future changes.
request

Controller
action

response

notify

Model

View

Binding
View = screens what user will see. (JS, XML, JSON, HTML)
Model = Data of the application. (JSON, XML, Resourse, Odata)
Controller = Contain the business logic (JS)

A view will always consist of 2 methods

1. createContent() = Is responsible for creating the UI elements of the
entire view.
2. getControllerName() = About the controller of this view. Many views
can share one controller.
Index.html
Code to create
view object and
place it in body
of HTML

Creates the object of the

view

View
MAIN.view.js
Create UI
element
objects

SAPUI5
Framewor
k

Package (PKG_ANUBHAV)
Class
CL_ANUBHAV

HB

Car_Type
SADA XUV
N

Package -> Class -> Attribute

-> Value
Pkg_anubhav-> cl_anubhav ->
car_type-> XUV

Sap.ui.core
Mvc
ViewType
JS

XML HTM JSO

L
N

Sap.ui.core.mvc.ViewType.JS

View1

View2

View3

Controller

XML eXtensible Markup Language

The main purpose of xml was to exchange the data between
multiple technologies. Unlike HTML, in XML we will have our
own tag names.
ABAP
(APIs)
If_ixml_*

XML(String)

<Employees>
<Employee>
<Id>10</Id>
<Name>Anubhav</Name>
</Employee>
<Employee>
<Id>20</Id>
<Name>Jack</Name>
</Employee>
<Employee>
<Id>30</Id>
<Name>Spiderman</Name>
</Employee>
</Employees>

JAVA
(APIs)

Anubhav, Can you please show an example where we can navigate between
views.
In webdynpro, we have concept of plugs to navigate between views, how do
we achieve here?
Main
Panel

Next
Back

Shell control is mainly used to combine multiple views in a single screen.

The shell control is similar to object Instance Floorplan in webdynpro.
Sap.ui.ux3
Main
1

Shell Content Area

Association : Relationship between two objects.

Aggregation lose binding, both objects can work independently.
Composition Tight binding, Objects cannot function independently.
Cardinality : 1:1, 1:n
Base
Ref_asso.

Child

Associatio
n

Models : Object of DATA in application.

JSON
XML
Resource
OData

Client Side Models small amount of fixed data

Server side model actual data model for

CURD
View

Data binding

OneWay
TwoWay
OneTime
1. Create object of model class
Sap.ui.model.<model class>.<model type>
2. Set or load data into model
setData or loadData
3. Set the model to
Application, View, Control

Model

JSON = Array of objects

{
"prodStr": {
"prodName": "Laptop",
"price": "500"
},
"prodTab": [{
"prodName": "Laptop",
"price": "500"
}, {
"prodName": "iPhone",
"price": "300"
}, {
"prodName": "Printer",
"price": "100"
}, {
"prodName": "Mouse",
"price": "50"
}]
}

Column
1. Title for the column
2. Template = control what type of UI element we want the column to be.
3. Along with the template property we need to also do the binding (From
which property of JSON, it will pick up values)
XML = eXtensible Markup Language unlike HTML, XML can have custom
tags.
Xmls can be processed by programming languages using DOM model.
<employee>
<row>
<empId></empId>
<eName></eName>
<gender></gender>
</row>
<row>
<empId></empId>
<eName></eName>
<gender></gender>
</row>
</employee>

Internationalization
Supporting the application developed in UI5 with multi-lingual support.

LOGIN Screen

Sap.ui.getCore().getModel()
All global variables for the controller are defined in onInit method.
With prefix, this.
1. Formatters
2. Solve the problem of data type
3. How to process XML
Formatters: many times when we develop the application, We would
need to format our data at runtime.
UIProp: {
path: model path,
formatter: formatter_function, function(value){}
}
Value: {
path: model>eName,
formatter: function(input){ convertandreturn}
}

Faceless Components: Custom controller- its a JS file with reusable

functions.
jQuery.sap.declare(path of the file);
Consume it, we need to declare below before
jQuery.sap.require(path of the file);

New sap.uitable.table({
Id = myTable
});

UI Table COntrol

FIORI: User experience of a UI5 application.

Device Compatibility
Responsive
Platform independent
Coherent
Role based
It is a application built using MVC model with sap.m as control library.
Sap.ui.layout.

Index.html
App

sap.m.App

Pages

App
Goto

Page1

Page2

Back

List Control: A list control is a single column table.

Types of templates
Display List Item (l,v)
Standard List Item
(icon,l,d)
Column List Item
(multiple)
Custom List Item
(customize li)
Object List Item(BO)
Action List
Item(clickable)
Input List Item

title

Header

Item1
Item2
Content collection
of items []

Item3

Path of the
binding

Template :
type of list

//Find the index of the item to be deleted

//Getting the path and extracting the index . List object and call
getSelectedItem()
//Get all the items bound to the list control
//Delete the item from the items collection
//Reset the latest item collection back to the list control

Coming Wednesday will be holiday.

FIORI is all about user experience.
Index.html
Sap.m.App => sap.m.SplitApp

Types of Fiori Apps

Transactional Apps
Factsheets
Analytical Apps
Master
view
idMain

Details
view
idPage2

Empty
view

Search field with a list control.

When we apply filter, By default the filters were working with AND operator.
e.g. get the results in the list where Name OR description of product
matches.

Fragments: light weight UI parts. A fragment would not have any

controller, The functionality of the fragment will be defined by the
controller who invokes the fragment.
As a UI template.
fragment
View 1

Controller 1

View 2

Controller 2

View 3

Controller 3

Data

Chk products

UI5 doesnt become bottleneck for developing web applications.

Custom Control?
A custom control is a control which developer can define in case if a
standard sap control doesnt serve the purpose.
In case a standard control provides some functionality but we need to
enhance it, we can create a custom control to enhance the standard
control also.
.
.
.
.
.

SAP UI5
Framework

Browsers
HTML5 + CSS

Sap.ui.core.Control

Sap.ui.common
s.Button

Sap.ui.common
s.TextView

TextField

We need to design our control by inheriting from sap.ui.core.Control

class.
Ultimate op of our control is goining to be an HTML5 + CSS code.

Steps to design a custom control:

1. Unique control name.
2. Metadata of the control which consists of properties, methods, events.
whenever we have a property= setter & getter methods for that
property
whenever we have an event = attach<EventName> also to
trigger the event we will
have fire<EventName> method.
3. Implementation of control
Init to initialize the control attributes.
renderer function(oRenderer,oControl){
oRenderer = which will tell the browser about how to show the
control.
oControl = object of control itself
}
Syntax
Sap.ui.core.Control.extend(ControlName,{
metadata: {properties:,events:,methods:},
renderer: function(oRm,oControl){},
Init: function(){}
});

Bootstrap
SAP UI5 Framework
sap.m,
sap.ui.commons

1. Location of gmap
api
Google.maps
Google.geocode
Google.marker

Create object of apis

and add it to the
html body

Create object of apis

and add it to the
html body

http://maps.google.com/maps/api/js?sensor=false
Google.maps.Map => This will create a new map object
Google.maps.Marker => to mark a location on the map
Google.maps.geocoder => pass the address, returns the
lng & lat

COMPONENT.JS
UI Component which encapsulates entire functionality of our Application.
Navigation (Router)
Versioning Information
Dependencies
Global methods and variables
Configurations
Model
Instantiate the main App view
Initialization
1. We want structure our app by keeping all the entities in separate folders.
2. Integrating the app with SAP Launchpad. (Shell and Container)

sap.ui.core.UIComponent.declare(path of component);
sap.ui.core.UIComponent.extend(comp_name,{
metadata: {routers,dependencies,libs,configuration,menifest},
init: function(){},
destroy: function(){},
});
componentname.prototype.createContent = function(){
};
Whenever we use component.js concept the app will be called fiori-like app.

Index.html

MasterPage
s

Views

splitApp
DetailsPage
s

Index.html
Shell
Component
Container

Component.
js

Views

MasterPage
s

Main App Views

Split
App
DetailsPage
s

Odata: Open Data Protocol, this allows us to consume the data over http.
You do not need to worry about underlying data base and its queries.
RESTful APIs = Representational State Transfer
Odata.org
Any odata service we use has 3 parts
1. Service Document defines the entity sets of the services
2. Metadata document allows us to look at the meta data $metadata
3. Data - /EntitysetName

Model Definition Represents the design of data.

Entity Type template of single entity data. For every entity which is part
of service we will create entity type specifying properties of it.
Entity Set Will represent the data of the entity at runtime.
Association We need relation between different entities.
Function Import allows us to execute operations on entity.
Implementation
Runtime Artifacts
MPC Model Provider Class
MPC_EXT
DPC Data Provider Class
DPC_EXT
Registration

We have a company which is using SAP ERP today. This company wants to
improve the user experience and implement fiori screens. They still want
data from existing erp system.

Fiori

ERP
SAP Netweaver
Gateway 7.4

RFC
Application

DB

Features of odata:
Select some of the fields $select = field names
Paging $top $skip
$expand to check dependent entities data together.
$format = json
BAPI_EPM_PRODUCT_GET_LIST
BAPI_EPM_PRODUCT_GET_DETAILS
BAPI_EPM_PRODUCT_Create
Bapi_EPM_PRODUCT_UPDATE
BAPI_EPM_PRODUCT_DELETE
PRODUCTS
ORDERS
SUPPLIERS
WE WILL NOT HAVE SESSION TOMORROW!!!