Documente Academic
Documente Profesional
Documente Cultură
For
UI5 apps.
Navigation
Section Articles
Footer
<h1>Welcome</h1>
<font> <color>
<h1><font=Calibri><color>Welcome</color></font></h1>
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.
D
M T
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
Output:
1. window.alert() OR alert()
2. Document.write()
3. Console.log
4. innerHTML
External CSS
DoM = Document Object Model -> structure of HTML document
function(){}
Array in JS
Var name = [val1,val2,val3]
We use $ symbol.
$(selector)
document.getElementById(id)
$(#id)
Agenda
1. SAP UI5 framework
2. How to setup eclipse
3. SDK
Sap.ui.commons, sap.m,
Sap.ui.table, sap.ui.ux3 SAP UI5 Framework
Design time
Dev. Runtime
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
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.
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
response action
notify View
Model
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.
View
Index.html Creates the object of the MAIN.view.js
view
Code to create Create UI
view object and element
place it in body objects
of HTML SAPUI5
Framewor
k
Package (PKG_ANUBHAV) Sap.ui.core
Class Mvc
CL_ANUBHAV ViewType
JS XML HTM JSO
Car_Type
L N
HB SADA XUV
N
View2 Controller
View3
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
XML(String) JAVA
(APIs)
(APIs)
If_ixml_*
<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>
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 2 3
1 2 3
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 Associatio
Ref_asso. n
Child
Models : Object of DATA in application.
JSON
XML Client Side Models small amount of fixed data
Resource
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
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
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.
New sap.uitable.table({
Id = myTable UI Table COntrol
});
FIORI: User experience of a UI5 application.
Device Compatibility
Responsive
Platform independent
Coherent
Role based
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) Header
title
Standard List Item
(icon,l,d) Item1
Column List Item Item2
(multiple) Item3 Content collection
Custom List Item of items []
(customize li)
Object List Item(BO)
Action List
Item(clickable)
Input List Item Path of the Template :
binding type of list
//Find the index of the item to be deleted
//Getting the path and extracting the index . List object and call
getSelectedItem()
Index.html
Sap.m.App => sap.m.SplitApp
Transactional Apps
Factsheets
Analytical Apps
Master Details
view view Empty
view
idMain idPage2
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 3 Controller 3
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 Sap.ui.common
TextField
s.Button s.TextView
Syntax
Sap.ui.core.Control.extend(ControlName,{
metadata: {properties:,events:,methods:},
renderer: function(oRm,oControl){},
Init: function(){}
});
Bootstrap
SAP UI5 Framework Create object of apis
and add it to the
sap.m, html body
sap.ui.commons
1. Location of gmap
api Create object of apis
Google.maps and add it to the
Google.geocode html body
Google.marker
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.
MasterPage Views
Index.html s
splitApp
DetailsPage
Views
s
Index.html MasterPage
Component.
js s
Shell Main App Views
Component
Container 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.
Odata.org
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 RFC
Gateway 7.4
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