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
No JAVA knowledge is required to create a Fiori App from scratch.
We need Java Script, that will be covered in the course.
SAP WebIDE – Development environment
SAP UI5 – SAP UI5 is a framework to develop responsive web Application. These applications can be executed on different
platforms, different browsers and different devices.
Framework- Collection of libraries, Each library include classes, each class include methods.
Difference between HTML5 and UI5 ?
Evolution of SAP UI technologies Webdynpro BSP

M T D
Presentation
Mobile
SAP GUI Browser
Devices
Application Layer
S/4HANA Suite 7i
Cloud Apps
Hybris ByD
database For more www.onlinefioritrainings.com

D T M
SAP UI5 design Time component SAP UI5 Run Time component
Sap.ui.commons Sap.ui.table Sap.m

Renderer
Sap.ui.ux3 Sap.ui.layout Sap.ui.comp
Runtime time
Sap.suite.ui.commons Sap.ui.unified Sap.viz server side libraries
Sap.ui.core Sap.ui.model Sap.ui.view
HTML5 CSS JS JQ LESS DATAJS D3JS AJAX Runtime Object sap.ui.getCore()

Program in any programming language
1. Initialization – load necessary dependencies - – Bootstrap in UI5

<script id=“sap-ui-bootstrap” src=“resources/sap-ui-core.js” data-sap-ui-libs=“sap.m”
data-sap-ui-theme=“sap_bluecrystal” >
</script>
1. Declaration – Data variables used in program – Create UI Control
var var_name = new libraryName.ClassName(sId, sProperties);

sId- unique Id of your UI control
sProperties: Control properties for configuring control attributes. Inside curly braces.
( ) – parenthesis
{ } – curly braces
[ ] - bracket
1. Actual program business or orchestration logic – manipulation, IF, Loop, call - display control to User
ObjectContro.placeAt( “id of control” );
2. Output - Show output to user

3. Clean-up
HTML – Hypertext Markup language
<html>
<head>
</head>
<body>
</body>
<html>
Anubhav.abap@gmail.com
http://www.onlinefioritrainings.com

SAP WebIDE?
SAP WebIDE is an Integrated Development Environment (IDE) which allows developers to create/extend Fiori Apps.
Why WebIDE?
 It makes easier to develop Fiori Apps using ready to use templates.
 Extensibility pane to extend Fiori Applications.
 Multiple Deployment options.
 Allows team sharing repository. Git repository
 Can access it from anywhere on any device. No local footprint (local installation is required).
D
T M
Hybrid toolkit
SAP UI5 Framework
SAP WebIDE
Git Repository
IoT
Custom Standard
….
ABAP System HCP SMP

Two Flavors of SAP WebIDE
SAP Web IDE personal Edition Productive version
Trial purpose Subscription basis to companies
Steps:
1. Install Java - http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
2. Download WebIDE http://tools.hana.ondemand.com
3. Winrar in your computer
4. Copy the WebIDE downloaded file(zip) to yourcompdirectory/MyWebIDE/
5. Extract Here in the folder, This creates and Eclipse folder in your directory.
6. Hint: Those who are already working in laptop with local servers like tomcat, jboss, the port no 8080 is
dedicated to these servers hence WebIDE will not start, Change port no in orion.ini file.
7. Double click on orion.exe and we are ready for SAP Fiori.
8. To start webide use http://localhost:8080/sapwebide/index.html

What is HTML?
HTML stands for Hypertext Markup Language, It is used to create static web pages.
HTML Version Year

HTML 1990
HTML 2.0 1995
HTML 3.0 1997
HTML 4 1999
XHTML 2000
HTML5 2014
HTML is not a programming language. It based on tags, if we follow the approach, we can create a static webpage using these
standard tags. E.g. button, input, datalist, li, ul, h1, table … etc.
W3C = World Wide Web Consortium is responsible for defining HTML tags and versions.
All browser vendors like chrome, IE, Mozilla Firefox, Safari.
Funda fox:
 Browser directly understand HTML
 User can only see content in browser provided it is kept in body of HTML

1. Difference between HTML and HTML5?
• HTML5 is just the advancement of HTML, it was released in year 2014.
• HTML5 is labral in nature
• Even we put something in head of html, it will be visible to user. Ideally we should not do that.4
• Declaration of DOCTYPE
Older version example <!DOCTYPE html DND_VERSION=“XHTML/4.02” HTMLSCHEMA=“htmlns”>
<!DOCTYPE html>
• For some of the tags in HTML5, we don’t need to put ending tag e.g. img, input
• New elements introduced to define proper structure of the website like header, footer, section etc.
• Direct support for Audio and Video tags in HTML5, before that plug-in support was needed in browsers.

1. Difference between HTML5 and SAP UI5?
 HTML5 versions are released by W3C, SAP UI5 versions are released by SAP
 HTML5 is a markup to just design user interface without any logic, SAP UI5 is a framework.
 HTML5 is having standard tags but it is also liberal in nature. SAPUI5 has strict JS syntax to follow.
1. Difference between Open UI5 and SAP UI5?
Open UI5 is a Subset of SAP UI5, Most commonly used libraries are part of open UI5 for consumption by users.
Open UI5 is an open source under Apache 2.0 license. SAP UI5 is a licensed product, this comes along with SAP
Netweaver or SCP (SAP Cloud Platform – formally known as HCP – HANA Cloud Platform).

Structure of HTML file/Document <!DOCTYPE html>
Declaration of doctype
<head>
</head>
<body>
</body>

<tagName prop=“value” prop=“value”>Some random text</tagName>
Meta tag:
It depicts the metadata of HTML page. For example some characteristics related to HTML documents are
Encoding-type
Author
Keyword
Description GET – read data Server
POST – create data
PUT – update data DNS Server
MERGE – read + update
DELETE - delete
cookies
Browser - client HTTP 10.22.156.2 10.22.156.1

request Service
provider program
http://fb.com
response
Webmaster

There is nothing called MAGIC
Funda fox:
 Every HTML element can have id property. Developer should make sure that id is always unique.
 Html elements can also have name , class (classification) property, which doesn’t needs to be unique.
<header>
Personal address
<article>
Official address
<section> <section>
<footer>

List tags are used to display sequence of data.
Unordered list – ul
Ordered list – ol
HTML5 is case sensitive?

No.
Block level elements in HTML?

The block level elements are used to structure the HTML content properly. These elements doesn’t have their own footprint
on page.
div – Division tag,
 It automatically starts with a new line
 Used to create a block of elements.
Span – inline element

 It doesn’t starts from new line
 It wraps an existing HTML element

Browser converts HTML in a tree data structure – This is known as DOM (Document Object Model).
Runtime structure of HTML in browser.
html
head body
meta title Div Input H1,h2 Img Ol,ul
F12 – key to open internet developer toolbar, Developer tools in browser

head tr Th Th Th
tr Td Td Td
tr Td Td Td
body
tr Td Td Td
Iframe: in HTML is used to ebbed another HTML document.

<iframe href=“” width=“” height=“”></iframe>

CSS – Stands for Cascading Style Sheet
Before CSS how we used to do styling:
<p><color value=“red”><b>I love <em>India</em></b></color>

and it remains always my country and I am an <b>Indian</b> always</p>
Tag based styling (formatting, coloring, border, length, background, font) became a nightmare for developers.
CSS is used to do styling of HTML element in a way that it separates the style code from HTML code.
3 ways to apply CSS:
1. Inline Style: is just like element level styling.  too much of coding
<tagName style=“prop:value ; prop:value”></tagName>
2. Internal Style: Applying the style for group of elements together, it is also possible to apply style on single element as well.
For applying internal Style, we should use a new tag called <style> tag in the header of HTML.
Syntax:
<style>
selector : {
prop: value;
prop: value
}
</style>
3. External Style: It is just like internal styling but the code for styling is taken out in a separate file and reference the file in
HTML file.

Inline Style: If we have similar kind of elements in HTML and we want to apply similar styling across all of them, we need to
change multiple places. Which is a laborious task.
<style>
selector { ---- }
</style>
Selector : identifier for element(s)

#id – when we want to apply style on a particular element
.className – class name is a classification of elements, a group of elements
tagName – all the elements which has the tagname gets affected with style
when we use tagname selector, it affects elements of entire page with maching tag, But majorly user needs style on group of
elements. In these cases, we don’t use tagname but we use classname as our selector.
Standard is that we don’t mention class name at element level. But we wrap the element around a tag with a div tag and use
class name.
Responsive Web Design?

Web design which adapts itself according to screen size to provide a consistent user experience.
Based on available space, w/o bringing horizontal scroll bar at page level.

CSS Box:
Border of element Border of element
padding
Html Element Html Element

margin
Width of HTML element = actual width + padding + width of border + margin

Pseudo classes: Special identifiers to apply CSS on elements based on certain events/activity which user perform on UI.
Syntax:
Selector:pseudo-class{
---CODE
}

Java script and Java are completely different programming languages in their nature, design and usage.
Java Script: Is the programming language for browser.
Funda Fox:
 JS is a programming language which is the only language that browser understand directly.
 JS is case-sensitive.
 Naming-convention for java script variables and function
The first latter of the word should be small, next consecutive word’s first latter should be capital.- Camel Case
Iloveindia  iLoveIndia wearelearningfiori  weAreLearningFiori
2 Types of JS:
1. Client side JS – JS code which completely runs in client-side (runs in browser). UI5, Angular JS
Create responsive web applications.
2. Server side JS – JS code runs on server side. E.g. XSJS, Node.JS. Server side programming like db lookup, sending email,
updating system status.
Purpose of JS?
 Write imperative logic – if, looping, arithmetic and logical operations
 Manipulate the CSS @ runtime
 Validate your input
 Manipulate the DOM

3 ways we can apply JS in the code:
1. Inline JS – code is written at element level
2. Internal JS – code is written at page level inside <script></script> tag.
3. External JS – reference an external file (.js) into your html page, <script src=“”></script>
Output function:
1. alert() – provide a popup to user
2. Console.log – print output to console
3. document.write – replace whole HTML page content with write content
4. .innerText – change text of an HTML element
In ABAP what to use to print current date?

sy-datum
Similarly in JS we have 2 objects which are readily available all the time in code
document – object of your DOM (Document Object Model) – Runtime structure of HTML doc
API – Application programming Interface – represented by a reusable method or class.

document.getElementById – single element by its id (id of html element is unique)
document.getElementsByClassname – list of all elements by class name
document.getElementsByTagname – list of all elements having that tag
window – this is the object of browser window

Syntax to create Variables
Funda fox:
 JS is case sensitive
 Camel case nami-convention when we use JS
 When we create variables we don’t need to provide type, it gets assigned automatically based on value.
 Everything is an object
var iLoveIndia = <value>
Object in java script:
var obj_name = { “prop”: “val”, “prop”: “val” , “prop”: “val” }

This is like a structure in ABAP.
Table variable – array
var arr_name = [“item1”, “item2”,”item3”…]
0 1 2

Java Script Object Notation – JSON
var itab = [
{ "empId": 100, "empName": "Anubhav" },
{ "empId": 200, "empName": "Roger" },
{ "empId": 300, "empName": "Monika" },
{ "empId": 400, "empName": "Rashi" }
]
Functions in JS:
2 types of functions in JS
1. Anonymous function (functions w/o any name)
function(args, args) {
…..
}
1. Named functions
function functionName(args, args){
…..
}

Passing function as an argument
var <name> = function(){
….
}
Promise – Asynchronous execution of a function based on completion of a function or an event.
The beauty is that this function gets executed asynchronously.
WP – Dialog, Background, update, spool, enqueue
user software Within your code
aynch

Funda fox:
 JS is case-sensitive
 Every statement in JS ends with ;
 In JS = is a assignment operator but == is the comparison operator.
Exercise:
Create a table and list of input fields for first name and last name.
When user fill the first name and last name in input field and press on add button, the values should get
Appended to table as a row.
Anubhav Oberoy Add
First name Last Name

Anubhav Obery
Provide a new button called clear, on click of the button.

Delete all rows from table.
Put a condition for first name, if the first name is Rahul, then only remove that row.

External Java script:
<script src=“path of JS file”></script>
jQuery: it is a java script library. The motive of this JS library is to “write less and do more”.
Most commonly used statements and methods are available in jQuery to consume. It helps developers to quickly
achieve the desired results by writing less amount of code.
Funda fox:
jQuery is not SQL query. It has nothing to do with SELECT, INSERT….
Why jQuery?
Industry standard. Google, Microsoft, Netflix, SAP.
2 ways to consume this library

1. Local reference – download  add to project and Reference locally
2. Reference from internet – CDN – CDN Content delivery network

Syntax
$(selector).method/action();
$ indicate the browser that we are using jquery

Selector – which element(s) should be selected
#id, .className, tagName
Funda Fox
 Chaining in js: when we call a method in java script, we can call another method on top of it. This called chaining
object.method1().method2().method3();
object.method1(); object.method2() ; object.method3();
 Call back function: a function which gets triggered when a particular operation is completed. Typically call
back functions are asynchronous and anonymous.
object.function(callbackFunction);
.hide, .show, .fadeOut, .fadeIn, .animate

2
US
1
India
Akamai server CDN for UI5 boot straping

Piece of code
SAP UI5 Runtime Component
Renderer
HTML5, CSS, JS
Browser

Funda fox:
Whenever we are writing code to use a control from SAP UI5 library, We will be using first latter capital.
SDK –software development kit

Helps developers to browser documentation, API reference and samples for the given technology.
UI5 SDK  latest and greatest updates on Framework
Fiori 2.0
Component JS, Router, RMH, Manifest JS
Any UI Control in SAP UI5 is typically a Class in the framework.

Class – attributes/properties
methods/functions/behavior
events
aggregation
Funda fox:
 For every property of a SAP UI5 control, We will have setter and getter method available. For example if there is a text
property, we will have setText and getText method to change and read the text of UI Control.
 document.getElementById() always return the object of HTML element on which we cannot apply the methods of SAP UI5.
We need to obtain object of SAP UI5 control using different technique.
 For every event a fireEventName() and attachEventName() and deattachEventName() methods gets created.

2 ways to obtain object of UI5 control
1. Using application runtime object
sap.ui.getCore().byId(“id of your control”);

OR
var oRuntime = sap.ui.getCore();
var oAnubhav = oRuntime.byId(“id of control”);
1. Using View object when we use MVC architecture (XML Views)

this.getView().byId(“id of control”);
A
Association in OOPS:
Disadvantage of not doing modularization are
 Maintainability of code
 Multiple developers cannot work together
B
 Error prone
2types of connection a class can have

1. Inheritance – parent-child relation
2. Association – connection of one class to another, by means of adding object of one class
To object of another class as an attribute.

n
0 Passenger
Airplane
1
Engine
n
Passenger plane cargo plane
Association:
1. Aggregation : lose coupling, good to have relationship. Both objects can function independently.
2. Composition : tight coupling, objects cannot function independently. Must have relationship.

Control Hierarchy: Inheritance hierarchy of SAP UI5 Controls.
Sap.ui.core.ManagedObjects
Sap.ui.core.Element
sap.ui.core.Control
sap.ui.commons.Button Sap.m.Button Sap.ui.view Sap.m.switch
Funda Fox:
 In JAVA SCRIPT we use “extends” keyword to indicate the inheritance.
 If you are unable to find property or event of a particular class, check its parent class.

MVC Architecture:
Design pattern: Common solutions for common problems in industry.
Creational, Behavioral, …
Whenever we have a UI, this is the design pattern we should apply to leverage the power of OOPS.
sends Controller notify

Processing
output reads
Model
View
Data binding Data
Input / Output

Views in UI5
• Java script (20%) – dynamic programming – 100%
• XML views (80%)
• JSON views
• HTML views
Models
• JSON Model
• XML model
• Resource Model
• OData Model
Controller - JS

2 Controller
View
onInit
onExit
Index.html getControllerName: onAfterRendering
SAP UI5 Framework 1 function(){ onBeforeRendering
Create Return the controller name
View of the view;
object }
Add to createContent: function(){

DOM 3 Return objectOfUIControl;

Design a JS view based MVC application in webide.
Operand 1
Operand 2 Displaying total
Calculate

Whenever we work with a UI5 application, We must declare the path of the root folder of our application.
In the bootstrap we write below
Data-sap-ui-resourceroots=‘
{ “rootnamespace” : “./” }
’
Library/Package (sap.ui.core)
Class (mvc)
ViewType
JS XML JSON HTML
sap.ui.core.mvc.ViewType.JS

1. Can we have multiple views in a project?
Yes.
1. Can we have multiple verity of views in our project?
Yes. Best practice says keep only one type across.
1. Can we have a single controller for all the views?
Yes. Best practice says that we should have one controller per view. Vice-versa is not possible. Which means we cannot have
multiple controllers per view.
Why you see XML views are preferred, Why SAP recommends XML views, Why standard Fiori Apps delivered by SAP has
XML views only?
MVC – Model View Controller is the DP we are using.

In order to avoid developers coding any processing logic inside a view, we use xml view. This will prevent MVC violations.
The parsing of xml is faster then JS views.
XML is standard in industry for creation of user interface.

What is XML?
XML stands for eXtensible Markup Language. It was initially designed for common language for communication between
heterogeneous technologies.
<xml>
VB.NET
ABAP
C#.NET
Int. table
<xml> Collection, array
We must give interfaces/classes and APIs to create and process XML.
When we convert data type(int. table, collection, array) to xml  Rendering

When we convert XML to data type(int. table, coll, arr)  Parsing
IF_IXML, CL_XML_DOCUMENT…IF_IXML_NODE etc. (XI)

Root Node
<?xml version="1.0"?> Node – Which has children
<root>
<empStr> Node
<empNo>200</empNo> Elements
Which contains
<eName>Anubhav</eName> 1. Values
2. Attributes
<smoker attr=“val”>false</smoker>
</empStr>
</root>
If we have multiple verity of nodes, we can choose which type node we want to create, we can use namespace concept in
xml. So in the root of xml we can define a recognizable identity to type of node.
Sap.ui.core, sap.ui.commons, sap.m
Namespace:Button

Models:
Are the objects of data.
Client Side model: all the data is kept in client side(browser). If the data set is small and is not going
JSON to change for long time. Another usage of client side model is to define global data variables
XML accesses across all views and controllers of our application. Fast access data.
Resource
Server Side model: All the data is kept on server side, suitable for real-time business applications.
OData
When we need data to be accessed we will use request from server and it will send response to us.
Different types of requests like GET, PUT, POST, DELETE, MERGE etc…
CRUD – Create Read Update and Delete
Steps:
1. Define the model object
var <modelobj> = new 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.OData()
2. Load or set data to model object
.setData(), .loadData()

3. Make the model aware to UI5 application, View or UI Control
sap.ui.getCore().setModel(<modelobj>, <nameofmodel>);
Funda fox:
If we do not pass the <nameofmodel> this model acts like default model for entire application and all UI controls will seek
data from this model. If there are multiple models in a single application, this becomes a confusion for application and UI
controls to pick data from which model? In this case we will give an identifier to the model which we are setting as model
name. in order to refer the model name we use “modelname>”
How to build path

{
"empStr": {
"empNo": 100,
"empName": "Anubhav",
"salary": 900,
"curr": "EUR"
},
"empTab": [{“empNo”: 200}, {“empNo”: 300}, {“empNo”: 400}]
}
Every curly braces or bracket will be converted to a forward slash (/), In case of table include index (starts with 0) in path
/empStr/empNo – path for employee number
Path for salary? - /empStr/curr
/empTab/1/empNo For more www.onlinefioritrainings.com
Binding Modes
TwoWay OneWay OneTime
Model  View Model  View Model onlyOnce View

View  Model
2 APIs to access and change data in model object
oModel.getProperty(“path”) – returns the data at the path level

oModel.setProperty(“path”, “value”) – change the data inside model object.
Json UI5 project

Json
Object View
file

Console Code
var oModel = sap.ui.getCore().getModel()
oModel.getProperty("/empStr/empName")
oModel.setProperty("/empStr/empName","Richa")
oModel.getProperty("/empStr/empName")
Binding Type
Property Binding Expression Binding Aggregation Binding Element Binding

Funda fox:
If we are doing any complex binding, we need to include special syntax as part of bootstrap to inform UI5 that there a complex
binding used.
data-sap-ui-xx-bindingSyntax="complex“
Data will always come by Binding, in a complex control its typically aggregation binding.
A template aggregation of a control identifies how the control will be displayed on UI e.g. textfield, dropdown, label, radio,
checkbox. columns
sap.ui.table
rows
$(".sapUiTableCol label").css("color","red").css("font-weight","bold")
Model
entitySet

SAP UI5 doesn’t become a bottle neck for
developer.

/empTab/1
Element 1
Element 2
Element 3
Element 4
Simple form
Empno Element n-1

empname
Element n

Formatter function: a formatter is used to format the input supplied to UI.
Typically, the input to the function comes from values of data source and output of the function goes to the UI control as final
binding value.
Data source
JSON, ODATA UI
Return value from
value formatter
formatter
New library.ControlName(“id”,{
property: {
path: ‘model path’,
formatter: reference to the function
}
});
.bindProperty(“path”, formatterFunction);
jQuery.sap.require(“module path”);
Just loading some dependencies.
SAP 1.32 >
Scaffolding template: it used to declare any JS file in the project. This is the forward to declare the resources of our application
and also manage all the dependencies between modules.
Syntax:
sap.ui.define(
[“dependency1”, “dependency2”,….],
function(oDep1, oDep2,…){
return {};
});

Can we have multiple data models in a single application?
Yes, multiple data models in their types and count.
How can application be able to differentiate between then?

Named model
Does it change your ABAP code when you write in SE38 from SE80.
No.
Resource Model : Is used for internationalization purpose.

Why we create messages in msg class?
Language conversions.
Application Developer Translation Developer
Builds the app in a way so that translation Does the translation

can be applied.
Use resource model for labels. &sap-ui-language=<lang code>
i18n

Funda Fox
Whenever we want to access the object of controller as this pointer inside the controller methods. We must pass the
controller object to the event handler, Otherwise the event handler’s this will only point to root control object in code.
//passing instance of controller to event handler as this pointer

rowSelectionChange: [oController.rowSelected, oController],
Within the controller, if we want to obtain object of view, we can use

this.getView()

Setup Eclipse project for development:
www.eclipse.org/downloads/
Workspace: It is a folder in computer where eclipse will store all the projects. (also known as local repository)
Download SAP UI5 development toolkit

http://tools.hana.ondemand.com/oxygen
Debugger operations v/s ABAP
ABAP UI5
F5 F11
F6 F10
F7 Shift + F11
F8 F8

SAP UI5
Developer
Fiori UX
Fiori is all about User Experience.
UI & UX – You can change the User Interface, But you cannot change user
experience.
Fiori is all about user experience. It means set of standard fiori apps delivered
initially by SAP known as X1 Apps. The basis these apps are the guidelines.
SAPGUI
UI5

Fiori:
 Integration capabilities
 Great user experience across all devices, Responsive
 Supports all major browsers, OS
 Single access point for all Fiori apps – SAP Fiori Launchpad
 Gets the business class user experience
 Role based
 Custom branding – Theme design
Container Control (App)
View
Index.html
View View
Return Page; Return Page;
Browser

App View – XML FirstView – XML
Go Next
App Control
Obj App Obj First
oAppObject = objApp.byId(“idAnubhav”);
oAppObject.addPage(objFirst);
DOM.placeAt

Exercise: Implement the back navigation from second view to first view.
List Control: It is a single column table.
title
Item 1 - obj
Item 2 - obj
items …
template …
Item n - obj

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

Exercise: Prepare a JSON for our fruit store.
Each item should have properties of fruit
name, type, usage, color, image, price, currency, isAvailable
Same json should include suppliers data
SplitApp
{
fruits: [{},{},{}], //20 fruits
suppliers: [{},{},{}] //10 suppliers
cityNames: [{},{}] //6 citys
} View View
Validate your http://jsonlint.com

anubhav.abap@gmail.com Master Detail

Get multiple selected items
var oList = sap.ui.getCore().byId("idFirst--idSpidy")

oList.getSelectedItems()
oList.getSelectedItems()[0]
oList.getSelectedItems()[1]
XML view and JS View?

When we give id to a control in JS view, it is added to DOM as it is. That’s why you are able to work with
sap.ui.getCore().byId(“id”)
When we use XML views the id gets adapted automatically by SAP UI5 framework
It appends the parent id before control id e.g. if we have a list(l) inside a view (v)  v--l
Inside event handler try below code
this.getView()
this.getView().byId("idSpidy")
sap.ui.getCore().byId("idSpidy")

Selection Screen
Parameters, Selection options
STARTofSelection
Select * from dbtab where matnr IN selOpt
Endofpage
Write: with loop.
SIGN, OPTION, LOW, HIGH

TABLETYPE - CP - Contains – pattern search
What to be filter?
On what basis to be filter?
Value to be checked?
2 operands and 1 operator

items
oList.getBinding(“items”).filter(filterObj);
Operand1 operator Operand2
Name Contains searchString
BaseController
getModel(), getODataModel()
MasterController DetailController

T1 T2 T3

Sap.m.Table is different from sap.ui.Table
What sap.m.Table is a List control with multiple column.
Fragments in SAP UI5

Fragments are reusable UI parts, Used for modularizing the UI in UI5 applications. Just the
way we use custom controllers in UI5 to modularize JS code, we are using the fragments to
break down UI into pieces. These pieces can further connect or reused by other
view/controller.
Parasite?  survives on the host. It doesn’t cook its food on own its own. It relies on host.
View 1 Controller 1
Fragment XML
View 2 Controller 2

Design a filter button inside toolbar of master section, when clicking on filter button a popup should come displaying list of
all the fruit names.
Create an input field for supplier, enable F4 help for the input field. When user clicks on F4, display a popup showing all the
supplier names.
Fragment
returns SelectDialog
Can you make both popups as multi select?

2 different popups ---- 2 places
In case of fragment how --- 1 place

Assignment
1. How to retain the selection of suppliers in Supplier popup.

2. My manager asked me to enable fruits popup not as multi select. All other popups in application as multiselect.
3. There has to be a city column in table, with input fields. Each field should have an F4 Help, when we click on F4, it should
load all city in a popup. On selection of a city, we should populate our input field.
Display
x
SimpleForm
Change
!x SimpleForm
Edit Save

SAP UI5 doesn’t become a bottleneck for developer.
In case if there is functionality which is not delivered by SAP, You can design your own control.
1. Which is the super class of all UI Controls

sap.ui.core.Control
When we want to design custom control, we will take this as our super class.
2. What is the keyword used to indicate inheritance in JS

Extends
Syntax:
Control.extend(“name of the control”, {
metadata: {
properties: {},
aggregation: {},
events: {},
methods: {} Is the renderer object to talk to the browser and tell the
}, browser to put something in DOM.
init: function(){},
renderer: function(oRm, oControl){}
Object of current control which we are designing. With
}); the help of this object oControl, we can access properties
UX Designer Custom Code Developer
Use build tool to design Developing custom
the UX controls
Core UI5 Developer

Fiori Consultant
Use existing or custom
Activate standard Fiori
controls and code the
Apps, Extend, Launchpad
software
ABAP and Fiori

S/4 Technical Consultant

Google map integration?
Uber, Ola, Swiggy
Business partner address
Supplier location
Google map provides us a JS API with the help of that we can integrate Gmaps in our JS based applications.
<script src=“path of jS file”></script>
Using a custom control which produces and

HTML element of div type

Red ocean
Competence
Competent Advantage
Company
Red ocean

Test
resource
SAP WebIDE Code
orion CDN
UI5
neo-app.json
Framework
SAP Gateway
akamai

Ctrl+Alt+Shift+P
Jdk 1.8
Tomcat 8.0

Component JS
Component.JS wraps the functionality of entire application. It also provides an entry point for our Fiori App.
We are killing the dependency on Index.html.
Funda fox:
If you want to integrate your Fiori Application with SAP Fiori Launchpad, you must have to have the Component.js file in your
project.
Purpose of Component.js
 Seamless integration with Fiori Launchpad
 Includes all the dependencies of Fiori app on other Fiori
 Metadata information of project e.g. version, name, author, template version
 Navigation concept for entire UI5 application – Router manifest.json
 Dependency on SAP UI5 framework
 Ability to define data models at design time (JSON, XML, RES., ODATA)
 Includes the OData Service configuration
 Fiori application id and app (S/4)
 Advanced configurations (ALP, OVP)
 Extensibility concepts

Funda fox
 There is always one Component.js at webapp level.
 The file name has to be C capital rest all small and java script file = Component.js
 Is an inheritance from sap.ui.core.UIComponent class
Syntax:
sap.ui.define([“sap/ui/core/UIComponent”], function(Component){
return Component.extend(“path”,{
metadata: {},
init: function(){},
destroy: function(){},
createContent: function(){}
});
});
OLD
sap.ui.core.UIComponent.extend(“namespace”,{});
FiorilikeApp - Application which has Component.js inside.

Ye yatha = jo jaisa
Tam tatha = usko waisa
If you give more than what you get, soon you will get more than what you gave.
Index.html
App
App
SAP Fiori Launchpad
Master Shell Control
Detail
Index.html
Component.js App
App
Component Container
Master
Detail
Component js – driver of entire application functionality.
Manifest.json – application descriptor, metadata of application with all required properties inside , referenced in component JS
Neo-app – interface file to connect to WebIDE resources
Problems of our app:

 When we select multiple items one by one and press back button, system is not loading the previously selected item
 When we select an item and reload (refresh) the app, it starts the app all over again, doesn’t take to restore the last status
of the app.
 We have to manually create the object of all views by ourself
 Back and forward navigation of browser will not work in case of our app
https://sites.google.com/site/sapfioribatch215/
https://sites.google.com/site/sapfioribatch215/extra-credit
https://sites.google.com/site/sapfioribatch215/my-forms
https://sites.google.com/site/sapfioribatch215/home
Every single page has its own tag, every page is marked with unique identity.
Advantage is that browser can now track the history of these navigations. You need to make every selection, every navigation
A unique state.
 Restore the state of UI is currently not possible.
Router Concept For more www.onlinefioritrainings.com

 Allows back-forth navigation using browser
 Creates the view objects automatically for us
 Enables navigation from one page to another
 Mark every page with a unique tag name (hash tag)
 Restore the state of UI.
Steps to implement a Router: Router is a read-made object which is available in UICompoenent class.
 Define the routing configuration in manifest.json

 Initialize the router, this.getRouter().initialize();
 You can access router object and use navTo API of router object to navigate to any view

Routing Config:
Config – which is the router class, where all my views are present, what is type of all my views, container
Router (n) – each router will have tagName, name, target (what should be loaded) – [view name, id, where to load]

There was a need for a technique through which data can be consumed and created/updated/deleted via network calls.
OASIS – who first invented the new technique of accessing data which was known as OData. Odata stands for Open Data
protocol. It is a REST based protocol.
REST – Representational State Transfer
Microsoft has acquired the OASIS and OData
Presentation Odata
Why OData?
Model
 Open standard
 Easy to implement HTTP, HTTPS
 It is STATELess
 Complexity behind Data manipulation
 Support CRUD (Create, Read, Update, Delete) OData
Application
 Latest version of OData in market is V4
Gateway
Operation HTTP
Read of a single/multiple GET
Creating new record POST
HANA
Deleting data DELETE
Updating data PUT
Read & Update MERGE
An OData Service includes
 Service Document – Displays all the available EntitySets to apply operation on data.
 Service Metadata Document – Talks About all the data about data (entitytypes). E.g. for an entityset it includes entitytype.
EntitySet – representation of a real-world object e.g. Material, Sales Order, Sales Order Item etc. All the CRUD operations are
applied on Entityset
EntityType – definition of data, it includes all the properties of an entity e.g. for material entity we have material no, mat
group, storage unit, mat class…. https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/

Service document
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/
Service metadata document
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/$metadata
Get all products & BPs – SELECT *
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ProductSet
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet
Read single record based on key – SELECT SINGLE *
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet('0100000001’)
Read few columns out of multiple – SELECT col1 col2 col3 FROM dbtable
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ProductSet?$select=ProductID,Name,Price,Curr
encyCode
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ProductSet('HT-
1010')?$select=ProductID,Name,Price,CurrencyCode
Read data In json format, use URL param $format=json
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ProductSet?$format=json
Multiple parameters to get in json for selected column ( http://host:port/sap/opu/odata/sap/SRV_NAME?par=val&par=val )
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ProductSet?$format=json&$select=ProductID,N
ame,Price

Imagine you have 1 bn sales order in your VBAP table. If I write OData to expose all these sales orders. What will happen
when I call this service ES to read orders in a fiori app running in mobile?
$batch
Load data for only 10 records ($top=n&$skip=n) SELECT * UP TO ROWS n Fiori App(M)
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/Product
Set?$format=json&$top=10&$skip=10
Filter data using odata - SELECT * from tab WHERE category = ….
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/Product bad
Set?$format=json&$filter=Category%20eq%20%27Notebooks%27
Pattern search
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/Product Gateway
Set?$format=json&$filter=substringof(%27Screen%27,Category)
Order by
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/Product
Set?$format=json&$orderby=Category ECC
Association
http://localhost:8080/webidedispatcher/destinations/ES4/sap/opu/odata/iwbep/G
WSAMPLE_BASIC/ProductSet('HT-
1010')?$format=json&$expand=ToSupplier,ToSalesOrderLineItems HANA

Primary Key: It is a column or Combination of column which uniquely identify a table record.
BillNo SaleDate Sales Amount

1 01.01.2018 500 INR
2 01.01.2018 800 INR
3 01.01.2018 950 INR
1 02.01.2018 580 INR
2 02.01.2018 450 INR
3 02.01.2018 230 INR

internet
internet OData Service
WebIDE
Neo-app.json
HCP a/c admin HCC
destination
destination
destination
localfile
Intranet
local
OData Service
Neo-app.json
WebIDE

Creating destination to connect to SAP Gateway system
WebiDE online help documentation
1. File structure https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-
Name=ES4 US/fb956be1440745f89f1445e605096af8.html
Type=HTTPS
Description=My SAP Gateway - Internet
URL=https://sapes4.sapdevcenter.com:443
ProxyType=Internet
Authentication=NoAuthentication
WebIDEUsage=odata_abap,odata_gen,ui5_execute_abap,dev_abap
WebIDESystem=ES4
WebIDEEnabled=true
sap-client=800
1. Saving the file do not save as txt or any extension.

Location: <your webide folder>\eclipse\config_master\service.destinations\destinations

Association: Today in our sample gateway service, if we need the supplier (BusinessPartner) information for a product , we
need to first get the supplier ID from ProductSet ES and later use the id and get the Supplier details using BusinessPartnerSet
ES.
In case we want the data of dependent entities to be loaded along with principle entity
We can use association.
Fiori App(M)
VBAK
VBAP
SOItemSet SOHeaderSet Gateway

Using navigation property(which is only created provided you have an association
between entities) we can navigate and read dependent data.
ECC
HANA

Association Concept for OData
How to consume the service
WebIDE project structure and entity Consumption
Paging Concept
Network calls
Date Formatting to display data

1. Embeded scenario
2. Central HUB scenario
Presentation
Gateway GW_FND
Fiori Frontend System
IWBEP, GW_FND
Application
UI5
Application Application
CRM ERP
Fiori backend Backend
Database layer

SAP WebIDE 1.44
SAP Fiori Frontend

SAP Fiori
Theme Designer LPD Designer
Launchpad
Role
Fiori Apps SAP UI5
Register All the OData Services
Framework 1.28
SAP Fiori Backend
Gateway Service Builder

APIs, DB, Application Logic, FM
Creating OData Projects

EPM – All the real-time scenario like tables
BAPI_EPM*
PRODUCT (CRUD)
BAPI_EPM_PRODUCT_GET_LIST – read all the product data

BAPI_EPM_PRODUCT_GET_DETAIL – Read single product data (i_prod_id)
BAPI_EPM_PRODUCT_CREATE – Create new product
BAPI_EPM_PRODUCT_CHANGE
BAPI_EPM_PRODUCT_DETELE
BP
BAPI_EPM_BP_GET_LIST
BAPI_EMP_BP_GET_DETAIL
BAPI_EPM_BP_CHANGE
BAPI_EPM_BP_CREATE
BAPI_EPM_BP_DELETE
ORDERS

We can use SAP Service Builder to generate the service code as well as service metadata code. On top of this we write our
own code to support functionality.
Include CRUD implementations in case we are using
Metadata information, data type declaration for entities
service generation technique
etc.
MPC Class (Model Provider Class) DPC Class (Data Provider Class)
MPC_EXT (Extension) DPC_EXT (Extension)

Create an OData service for Fiori Application which expose all the Product Data.
FM can used as EPM.
SEGW – Service gateway builder


UI5 Training

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

UI5 Training

Загружено:

Авторское право:

Доступные форматы

SAP UI5 and Fiori Training with OData Services

Evolution of SAP UI technologies Webdynpro BSP

database For more www.onlinefioritrainings.com

Sap.ui.commons Sap.ui.table Sap.m

Sap.ui.core Sap.ui.model Sap.ui.view

HTML5 CSS JS JQ LESS DATAJS D3JS AJAX Runtime Object sap.ui.getCore()

For more www.onlinefioritrainings.com

1. Initialization – load necessary dependencies - – Bootstrap in UI5

1. Declaration – Data variables used in program – Create UI Control

var var_name = new libraryName.ClassName(sId, sProperties);

ObjectContro.placeAt( “id of control” );

2. Output - Show output to user

For more www.onlinefioritrainings.com

ABAP System HCP SMP

For more www.onlinefioritrainings.com

SAP Web IDE personal Edition Productive version

Trial purpose Subscription basis to companies

For more www.onlinefioritrainings.com

HTML Version Year

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

1. Difference between Open UI5 and SAP UI5?

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

Browser - client HTTP 10.22.156.2 10.22.156.1

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

HTML5 is case sensitive?

Block level elements in HTML?

Span – inline element

For more www.onlinefioritrainings.com

meta title Div Input H1,h2 Img Ol,ul

F12 – key to open internet developer toolbar, Developer tools in browser

For more www.onlinefioritrainings.com

Iframe: in HTML is used to ebbed another HTML document.

For more www.onlinefioritrainings.com

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

For more www.onlinefioritrainings.com

Selector : identifier for element(s)

Responsive Web Design?

For more www.onlinefioritrainings.com

Border of element Border of element

Html Element Html Element

Width of HTML element = actual width + padding + width of border + margin

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

In ABAP what to use to print current date?

API – Application programming Interface – represented by a reusable method or class.

window – this is the object of browser window

var iLoveIndia = <value>

Object in java script:

var obj_name = { “prop”: “val”, “prop”: “val” , “prop”: “val” }

var arr_name = [“item1”, “item2”,”item3”…]

For more www.onlinefioritrainings.com

For more www.onlinefioritrainings.com

user software Within your code

For more www.onlinefioritrainings.com

Anubhav Oberoy Add

First name Last Name

Provide a new button called clear, on click of the button.

For more www.onlinefioritrainings.com

<script src=“path of JS file”></script>