UI5 Training
UI5 Training
UI5 Training
Anubhav Oberoy
http://www.onlinefioritrainings.com
For more www.onlinefioritrainings.com
Start Date: 28th Aug 2018
Expected End Date: 5th Nov 2018
Weekdays 7-8 AM India time
Duration : 40+ Hours + Complementary OOPS ABAP
Framework: It is a collection of libraries which we can use to develop something on top of it. Example: sap.ui.commons,
sap.m, sap.ui.layout etc.
Responsive: An application which adapt itself according to the device you use. E.g Desktop, Mobile and tablets.
MVC: Model view controller architecture which is actually a design pattern to build UI application.
Funda Fox:
Types of symbols
( ) – parenthesis
{} – Curly braces
[] – Bracket
The code is case sensitive.
9th Sep
Google calendar invite
Tomorrow 7 PM IST
Eclipse Naptune
SAP WebIDE Open Source Planet 8, Planet 9
Luna, Mars, Neon, Oxygen
Shell
Kernel – Operating System – DOS, Linux
32 bit, 64 bit
Hardware 8084
Year Version
1991 HTML
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2009 XHTML 2.0
2012 HTML5
DNS
Mapping
ip – name.com
M
Server (IP Server)
ISP 165.122.0.1
Will also known as container
because it contains all the web
projects inside.
T Web Server – Tomcat, Jboss
SAP AS
It has capability to respond to
Request
requests sent over internet.
(HTTP/HTTPS)
Browser
Form submit
httpRequest object
Ajax Call
Get requests are not secure hence should not be used for sending password to server.
thead Th Th Th
tr
table Td Td Td
tr
tbody tr Td Td Td
tr Td Td td
Maintenance of style code for HTML was a nightmare for developers because of high volume of nested tags, this was also
error prone.
1. Inline CSS – the css code will be applied to each HTML element level.
<tagName style=“prop: value; prop: value”>content</tagName>
Disadvantage is that we will have redundant code written at multiple places. This will lead to high maintenance and no
reusability.
2. Internal CSS – the css code is applied at the page level. We use a special tag inside the head of HTML page, this tag is
<style> tag. Inside the style tag, we put our style code.
<style>
selector: {
propName: value;
propName: value;.....
}
</style>
3. External CSS – the css code is kept in a separate file and its is then later linked to HTML page.
Funda Fox
4. Symbol will break you or make you
: - colon ; - semi-colon For more www.onlinefioritrainings.com
Selector : {
prop: value
}
h3
Selector:
Tagname – all the elements which has same tag will be
affected. Just put tagName as selctor. p
ClassName – all the elements which has same, you
need to tell the system that it is a class, which is done h3
by putting a dot(.) before the className.
.classname (grouping mechanism - classification)
id – single element which has an id. p
#id
h3
Disadvantage of tagName style is that it affects other
elements also, hence we always use classname based
style. It is recommend to put class names at div p
element level not at the core element levels.
h3
We make sure that we apply CSS in a way that our elements are adapted itself automatically based on screen width
(projector, desktop, tablet, mobile etc.). This nature is called Responsive Web Design.
Border Border
padding padding
Types of JS?
Client Side JS: When code runs on the browser (client), it is client side JS. It makes application extremely faster. Typical JS for
web-development is client JS.
Server Side JS: Code runs on Server side, typical usage is to perform db lookup, send email, business logic, talk to another
system, offering services. Example: NodeJS, XSJS.
Usage of JS?
Writing imperative logic and business logic as well which runs on Client side.
Manipulation of data along with validation
Manipulate CSS at runtime
Use to give output to user.
Create entire HTML content dynamically
Built-in variables
document: it is the object of DOM (runtime tree structure of HTML).
window: it is the object of the BROWSER window.
Output functions in JS
window.alert(“”) – provides a popup
document.write(“”) – change the entire DOM
HTMLelement.innerText – change the content of an HTML element
console.log() – print something in console. For more www.onlinefioritrainings.com
Ways to apply JS
1. Inline JS: JS is applied at the element level.
2. Internal JS: JS is applied at page level using <script> tag. We put the tag inside <script> element.
3. External JS: JS is referenced from an external file or from internet.
JS is event driven. When user does an activity on the UI, that’s when an event triggers which cause the JS code to trigger.
Example for event: onclick, ondblclick, onfocus, onhover, onmousedown
You can find all the list of events here
Syntax:
var variableName = value;
Funda fox
We do not need to specify the data type, based on the value assigned to the variable, the data type is automatically taken.
in js everything is an object. Nami convention for any object is : oObjectName
in js equals to (=) is assignment operator, but (==) is comparison operator, if you want to also compare data types use (===)
if 2 == “2” {} -- true
if 2 === “2” {} – false
if 2 = 2 {} -- Incorrect if condition, this is an assignment
Fundafox:
Index of an array in JS always starts with 0
We can use .length property to calculate total no of items inside an array
an array item can be accessed from its index
Exercise: Create an Array of objects (internal table) for employees. In which each record will be having empid, empName, sal
and currency.
Named Function
10 Zkas
function functionName(p1, p2...){
---code
}
Exercise: Design a table with Emp data, create 2 input fields on top of table with id and name, click on add employee button, it
should add employee to the table below.
Deadline – 12 hours.
jQuery: Is a java script library. It works on principle of write less and do more
Why jQuery?
It is industry standard, all the big companies like Netflix, ImDB, SAP, Google, Microsoft are already using jQuery
SAP UI5 framework is built on top of jQuery
Simple to learn and use
Free
Multiple variants like jQuery UI, jQuery Mobile etc.
How to use?
We need to first reference the jQuery library in the project. There are 2 ways
1. Download the js file and reference it locally from project.
2. Reference from CDN (Content Delivery Network), lot of CDN providers like Google, MaxCDN, Microsoft, Akamai
$(selector).action();
Earlier we had used about 4-5 lines of code to change color of box content and now this is achieved with just single line of
code.
$(".box-content").css("background-color","black");
A chaining example
$(".box-content").css("background-color","green").css("color","black").css("font-family","cursive");
UI5 training
Mobile Google
Is a special function which is called when a certain action is over, for example i called a service on internet to get share price.
We dont know how much time it takes to return the result. But once the result (response) has come, we want to run some
code. We use callbackFunctions for that purpose.
$(selector).fadeOut(5000, function(){
---code of callback function
});
Funda fox
Whenever we dont know the response time, blindly use callback function. We can attach callback functions to any method
who supports it like Odata service call in SAP UI5.
In js, this pointer is used to point the object of element/class itself within the method. Like ME object inside ABAP class.
Like this inside a method of a class in java.
For more www.onlinefioritrainings.com
Example: We want to throw an error message to user when credentials are incorrect with blink effect.
Ajax stands for Asynchronous Java and XML, it is used to make a call to a service on internet and get response.
$.ajax(); //GET, POST, PUT, MERGE, DELETE
SAP UI5 Design Time Component SAP UI5 Run Time Component
sap.ui.table
sap.ui.ux3
sap.ui.layout
sap.suite.ui
sap.ui.comp UI5 Renderer
Design time
Browser
(HTML and CSS)
DB layer
DB
SAP UI5
sap.viz sap.ui.comp
Open UI5
Sap.m,
sap.ui.layout
SAP UI5
Core
Does ABAP code changes when you write in SE38 and SE80?
No. https://youtu.be/Am8K8jVAYwM
IN
Mumbai
IN
IN
IN UI5 Framework
IN
IN Germany
IN Data Centre
Delhi
US US
Miami
US
Californi
a
For more www.onlinefioritrainings.com
1. Anubhav will you give documents during training.
Today. Work for you after 1 year. Because 1 year before we were using sap.ui.commons, and now its deprecated.
Exercise: Design a user name and password screen in SAP UI5 with a login button. When you click on login button, check if its
valid and change the dom with “logon success!”.
Hints: sap.m.Input for input.
MVC Architecture: Many times we need to create applications which involves the user interface (screens), we can apply the
MVC design pattern.
Views:
JS view – 10%
XML View – 90%
JSON view – 0%
HTML View – 0%
Models
JSON Model
XML Model
Resource Model
Odata Model
Controller
JS
Every programming language has interfaces and classes to process the XML.
Parsing – Converting XML to own data type (ex. <xml> to internal table)
Rendering – converting data type to <xml>
4
View (JS) Controller (JS)
getContollerName
1 Constructor
{
Return “anubhav” oninit: fucntion()
}
createContent(oController)
3 {
UI5 Framework
Return viewElement
}
2
C
webapp spiderman
view1
view2
controllers
Controller 1
Controller 2
When we create any JS file in SAP UI5, we must use a special way of writing code, This is called scaffolding template.
Scaffolding template was introduced in SAP UI5 version 1.36, it is a way of managing all the dependencies on our controller.
Funda fox:
> Before scaffolding template, we used to use jQuery.sap.require() statement in SAP UI5 for managing dependencies.
In order to code a controller, we need our first dependency on SAP UI5’s standard controller class.
A
Funda fox:
In js the inheritance is indicated by keyword called extend
sap.ui.core.mvc.Controller is the standard class in SAP UI5 for coding controllers.
When we use the module as a dependency we should put path with /.
B
Module path: sap/ui/core/mvc/Controller
Event is an activity
performed by user JS code which you want to run when event is fired
press Example: what to do when user click on button
anubhavAmazing() is the function
Funda fox:
HTML object is different from UI5 element object.
sap.ui.core.ManagedOb
ject
sap.ui.core.Element
text
sap.ui.core.Control placeAt()
sap.m.Input sap.m.Select
Passenger
0..n Passportno, Name, Lname,
Age, Gender
Association: It is a relation ship between the classes. Our entire software is modularized in classes, in order to make the
software work, we need to make sure that all our classes function together in sync. Technically, There will an object of
associated class present in the main class. Here Airplane class will have object(S) of passenger class.
1. Aggregation: Is a loose coupling, should have relationship. Both objects can work independently. E.g. Passenger and plane.
2. Composition: Is a tight coupling, must have relationship, both objects cannot work independently. E.g. Wings and plane,
engine and plane.
sap.ui.table.Column
sap.ui.table.Column
Table columns
sap.ui.table.Column
sap.ui.table.Column
var oDemo = document.getElementById("idBtn");
oDemo.setText("anubhav");
Funda Fox:
Whenever we use a control in XML view, system will automatically append the view id in the ID of the control.
idPwd
idXMLView--idPwd
Within a controller, inside of event handler methods, this pointer will point to current controller object. Hence with the
controller object we call APIs of the controller like getView() will give view object of the controller. And we can also call
other controller methods. For more www.onlinefioritrainings.com
Exercise: Implement
View 1 View 2
Controller 1 Controller 2
Singapore
Formatter/Utils.js
For more www.onlinefioritrainings.com
If you give more than what you get, Soon you will get more than what you gave
Exercise: Convert the current example to a JS view with MVC.
Funda fox:
When we use JS view, in the event handler method, this pointer will point to object of UI element rather than object of
controller. Ideally, we need object of controller to be able to get the view object or invoke other functions of the controller
like in XML view case.
Here we need a mechanism to pass the controller object as this pointer to the event handler
Syntax: eventHandler : [oController.methodName, oController]
JSON Model Client Side Model: Is a data model which holds all the data in client side (browser), when these
XML Model models are loaded, all the data is loaded. These models are used to hold data temporarily to do
Resource Model manipulation on data. Suitable for small set of data.
Server Side Model: In this data model data is loaded with a request <-> response. The data is not
OData Model stored in client. This is a channel to communicate to backend server like ECC, S/4HANA. Real-time
data read and store is done via OData model.
oModel.setData( hardcoded_data );
oModel.loadData( file_path );
Step 3: Set the model object to the application or view or the UI Control level
--app level
sap.ui.getCore().setModel(oModel);
--View
this.getView().setModel(oModel);
--UI Control level
this.getView().byId(“controlId”).setModel(oModel);
For more www.onlinefioritrainings.com
When we want to access the data from the model in the UI, we need to do data binding.
The data binding is always done by using the address of the data. In JSON, we prepare the address of data as follows
Every curly braces {} is represented using slash /
Every array [] item is represented using index no.
Address of Anubhav Salary in structure?
{ EntitySet /empStr/salary
“empStr”: {
“empNo” : 100, Employee no for prathibha?
“empName” : “Anubhav”, /empTable/1/empNo
“salary”: 900,
“currency”: “EUR” Employee Name for employee 800?
}, /empTable/0/empName
“empTable”: [
{
“empNo” : 800,
“empName” : “Monika”,
},
{
“empNo” : 900,
“empName” : “Prathibha”,
}
]
For more www.onlinefioritrainings.com
}
Library (sap.ui.core)
Class (mvc)
ViewType
JS XML JSON HTML
sap.ui.core.mvc.ViewType.JS
Types of binding
Property binding – when we connect property of a control with the path of our model, property binding. E.g. We connected
value property of Input control with the address of JSON model path.
Expression binding – We can bind the expression to a property of a UI Control, this expression is evaluated at runtime and
supplies the value to the control.
Syntax: {= expression} , {= condition : then ? that}, {= ${salary} > 50000 ? false : true}
If condition
Then
Else
That
Funda Fox:
When we do expression binding the sap ui5 by default doesn't support that, we need to explicitly tell sap ui5 to support such
binding, this is done by adding special context to sap ui5 bootstrap as
data-sap-ui-xx-bindingSyntax="complex"
Absolute path
A path which is provided in the main control for aggregation binding is the absolute path. Typically the child of root node.
Relative Path
The child elements of the main control points to the path relative to the parent control path, is the relative path. E.g. Column
will get the data from individual records of the empTab hence the column binding path is called relative path.
Element Binding
When element (memory address – context) of a element out of multiple is connected to a control, its child control can
receive the data from parent (ref. ABSOLUTE PATH). Children UI elements will be referencing to the RELATIVE path.
1. App Control
2. Split App Control
An App control is the super parent of all the views. Each view must return a page object.
One-Way: When the data changed in the model reflect to the UI, it is one way binding mode.
Two-Way: When the data changed in the UI is reflect back to the model and vice-versa, it is two way binding.
One-Time: The data only connect from model to the view at launch time, after that they are disconnected completly.
oModel.setProperty("/empStr/empName", "Roger");
Funda Fox:
What is the default binding mode for JSON Model?
Two Way
For more www.onlinefioritrainings.com
Named Model Concept
UI5 framework needs a differentiator between your models then only we can have multiple models at application level.
In the named model concept we will use the name of the model while setting it to SAP UI5 framework in setModel API.
Syntax:
sap.ui.getCore().setModel(oModel, “name of model”);
There will be one model which will have no name, it will be set as default model.
Once the named model is set, we can use the model name in the binding to connect the data from the newly created named
model. While doing the binding we must use modelName> before the path.
Exercise:
Keep the same page and create new json file for Ironman, set that model at the application level and then provide a button
called FLIP BUTTON on UI.
When click on the flip button, the model should be flipped from default to ironman and again if i click on the button, it should
again flip.
How do we design the view in XML as per the requirement? how we know its a form or simple form? table or tree table?
Exercise:
Filling the data inside the input fields, introduce new INSERT button on UI. When clicked, add the record to the table based
on data from input fields.
Exercise:
In the table when the employee name is set to your name, make the smoker value false.
sap/ui/core/mvc/Controller
BaseController (template)
Hold all the global objects/functions
Since we are using binding everywhere, if we want to change data on UI, always use model object, never directly change data
on UI using control APIs like this.getView().byId(“”).setValue()
Element 2
101 Jessica 8000 EUR
Element 3
Element is the memory location where the data is stored. The json path (/empTab/0) is the address of this
memory element. This is known as Context.
bindElement
Page 1 Page 2
Resource Model
Is the data model used in SAP UI5 for the purpose of internationalization. Basically we need the labels, texts, messages to be
convert in to the system logon language. Resource model points to bundle where we have language specific texts.
UI5 Developer
KM Expert
Design software which supports
Do the translation of texts
internationalization
Data Model
formatter {
value empNo
Return value
}
Syntax:
Property: “{address}” ---old
Property: { File.js
path : ‘address’,
formatter: ‘.objName.functionName’ functionName:
} function()
SAP Fiori – SAP’s UX strategy for designing responsive web application. When we follow the guidelines and protocols, we will
automatically achieve the best in class user experience. The underlying technology to design a Fiori UX is SAP UI5.
Child 1 Child 2
View1 View2
Exercise: Design a JSON for fruits, suppliers and cities. Each entityset has data.
fruits (20) : name, price, unit, benefit, type, availability (A,D,O), color, photo
suppliers (15): name, city, sinceWhen, country, contactPerson, operatingHours
cities (10): cityName, famousFor, state, remarks
One file-
{
“fruits”:[{},{},{}.....20],
“suppliers” : [{},{},{},....15],
“cities”: [{},{},{},....10]
}
For more www.onlinefioritrainings.com
List Control : is a single column table. Used to display multiple items.
header
Item1
Item2
items Item3
..
...
DisplayListItem StandardListItem
sap.m.List
ObjectListItem CustomListItem
InputListItem ColumnListItem
FeedListItem ActionListItem
Use Case: We have search field on the main screen, requirement is to search a fruit in the search list and display the filtered
results. For this purpose, we will use sap ui5 filter class – sap.ui.model.Filter 2 operands and 1 operator
Ap
Controller
eventHandler
Exercise: add a button at the bottom of the page, which looks like filter icon, When we click on filter we need to choose
< 50 , >= 50 <=80, >80 (popover control), after selecting the range, You need to filter the fruits based on price.
View 2
Item 1
/fruit/0 Item 2
/fruit/1 <text RELATIVE_PATH>
Item 3
/fruit/2
Fact Sheet
Transactional Fiori Apps Analytical Fiori Apps
(obsolete)
SAP Fiori Work list SAP Fiori Master Details OVP Apps ALP Type
UI5 Type apps Free style Fiori apps Smart Filter KPI Type of Apps
View
Address Data
Temporary Address
Name Load City Name Load City
Address Line Address Line
PO Box PO Box
City City
State, Phone no, email Con.
State, Phone no, Email
Permanent Address
fragment Name
Address Line Load City
Fragment doesnt have its own controller, it relies on PO Box
the controller of host view. City
Code related to actions inside fragment must be State, Phone no, email
inside the controller of host view.
Permanent Address
Parasite Load City
For more www.onlinefioritrainings.com
Exercise:
Carry out the binding in the moreInfo fragment to display select fruit healthBenefit and nature of fruit.
Design 2 fragments with just one label for supplier data and city select and integrate with view2.
sap.m.Table is a multi column list control. sap.m.Table can also be configured to be responsive.
Use Case: My manager comes to me asked me to create a filter button on top of table control, when we click on the filter
button, it should launch a popup displaying all the countries. Also, on city input field, when user choose f4 help, it should
display all cities in the popup. On selecting city from popup, the selected city should fill the input field in table.
Since we have a common need of a popup, we can design a single fragment and reuse it for dialog box.
Exercise:
Design a screen to display selected supplier data from the table. Enable the navigation from table control to take user to 3 rd
view.
JSONModel
Items: this.global
cart
View 1
Multiple
controlObject
validator.js
true/false
App.view.xml
LPD
Component.js
testing
Index.html
manifest.json
Application
Descriptor
sap.ui.core.UIComponent
Component.js
Funda Fox:
You must have only one Component.js in the root directory of your app. (webapp)
The file name must be Component.js
There exactly one file with name manifest.json which also co-exist with component.js in root directory.
Anubhav, which is best place for creating view object, which is the best place for writing navigation. I am confused whether to
create view objects in Component.js or in App.controller.js ??
Now we have big solution for that, WE DO NOT NEED TO WRITE CODE TO CREATE VIEW OBJECTS ANYMORE.
We just need an application descriptor file where we give configuration to create view objects.
20
Funda Fox:
1. Any references to model, we just need to give folder path, because we referring to the files.
2. When we refer any SAP UI5 JS/XML file we need to use the namespace for the path.
JD
Implement and extend SAP Fiori applications.
Design and implement new solutions using SAPs latest UI5 /Fiori Cloud and Platform technologies.
Interpreting business requirements into effective UX design & specifications.
Definition, creation and review of user interface and usability requirements.
Involvement in design validation activities. • Work in a team of consultants, developers, architects and
project managers to develop UI5 applications.
Develop extensions for SAP delivered Fiori components.
Design the UI in SAPUI5/ Wire frame layout for customized SAP FIORI apps.
Set Up Roles, Create Users, Creating Catalogue and Groups for Fiori Launchpad.
Connection of data Services to the UI5 application.
Connection of SAP Workflow to UI5 Application.
Ability to rapidly construct wireframes & UI prototypes.
Coordinate with Functional SAP Consultants to understand business requirements.
Technical analysis of functional requirements and prepare technical specifications.
Lead and work independently with developers to implement new and improved functions for the Fiori Elements.
Identify areas with potential for improvement and drive the optimization by simplifying processes and code.
View 4
View 1 View 2
View 3
R
Solution – Routing
Every page of your app, is marked with a unique endpoint which we call as Route / Hash tag
When we do this the browser keeps track of every end point you navigated in a stack (FILO)
Funda Fox:
sap.ui.core.UIComponent.getRouterFor(this);
this.getOwnerComponent().getRouter();
function(){
This
var that = this;
Button{press: function(
that.getView()//not in scope
){})
}
If there is a need for a UI Control, That UI Control is not available in UI5 SDK, You can design your own control.
Syntax:
I want to create a Heading Control, SAP UI5 does not offer heading control to me. I have to design
my own control. HTML5+CSS
sap.ui.core.Control.extend(“NameOfControl”, {
metadata: { The renderer object, this is
properties: {}, the object which you will
functions: {}, use to talk to browser
The object of control itself.
events: {},
aggregations: {}
},
init: function(){},
renderer: function(oRm, oControl){}
});
For more www.onlinefioritrainings.com
Fiori Consultant Fiori UX Designer
UI5 and Fiori Developer
(Installation, security, (Prototyping, UX,
(Develop using UI5 Controls)
Configurations) Wireframes)
1. Just the way we use SAP UI5 framework using CDN, we can also use google map API from CDN.
2. We also need to provide a place holder on our UI to google. In this placeholder, the google api will place the map control.
3. Invoke the API and provide coordinates (Lat & Lng) to take map to a certain position.
4. We can also configure the zoom level of the map.
Florian: I want to know is there any possibility to use the custom control in JS view? Because in my project, we do not use
xml view and we heavily use JS along with custom controls.
A typical application always holds the information about user session on server side.
P
REST protocol – Representational State Transfer – stateless
Is one the industry standard to be able to communicate from internet these days w/o storing
the user’s session information. – 85% are REST based API A
http
The communication will have a request and response.
Every request and response have (Header + Body)
There are fixed type of methods to commutate and inform the server about the purpose.
Method Purpose
GET Read the data
POST Create new data
PUT Update the data
DELETE Remove the data
For more www.onlinefioritrainings.com
Benefits of Odata
It is very easy to learn
Open standard, no licensing fee is required to pay to utilize the concepts of Odata (Earlier there was a company called
OASIS which was later acquired by Microsoft)
There are many standard frameworks available in every programming language to be able to create Odata services, like in
ABAP we have service gateway builder, in Java we have Olingo, in Node.js we have n-odata-server etc.
As a consumer of Odata we don't need to care underplaying complexity and Database queries.
ABAP
Fiori App
Node.js
odata
Funda fox Java
Fiori App only talks to Odata
Python
Database
HANA
Fiori Gateway
(SAP_GWFND, SAP_UI)
Reg. Fiori Frontend system, Gateway
SAP_GWFND, SAP_UI
ECC, SOH, S4HANA
RFC –
SM59
ECC
Imple. Fiori Backend CRM
Server
Pros:
You can connect to multiple backbends keeping one service.
https://www.youtube.com/watch?v=wFH52FMJ1nI
Cons:
Cost of the system increases
Distributed resources hence confusion
https://sapes5.sapdevcenter.com
Any odata service in SAP system has path prefix as /sap/opu/odata/
Sample odata service in every SAP system : GWSAMPLE_BASIC
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/
https://host:port/sap/opu/odata/ServiceName/EntitySet?pname1=value&pnam2=value&pname3=value
Exercise:
Replace the fruit data from the json data coming from odata service with productSet entityset data. And show the data in list
control.
SO SO_I
SO
SO Items
Master
Database
CORS-Filter:
BAPI_EPM_PRODUCT_GET_LIST
BAPI_EPM_PRODUCT_GET_DETAILS
BAPI_EPM_PRODUCT_CREATE
BAPI_EPM_PRODUCT_UPDATE
BAPI_EPM_PRODUCT_DELETE
BP
BAPI_EPM_BP_CREATE
BAPI_EPM_BP_GET_LIST
Funda Fox:
App
OData OData
OData
Image1(jpg) Image2(jpg)
1 1 1
1 Supplier BP Address
Product
Exercise:
The address data for each supplier is stored in another table called SNWD_AD table, Design an another entitytype and set
for Address data and establish a relation between Supplier and BP Address (Association) and Enable Direct navigation
between Supplier and BPAddresses using Navigation name ToAddress.
Exercise:
Implement the Update and delete method using serv. Generation for product and test them using GW Client.
ECC
Fiori App
WebServices
$.ajax call HTTP
Requirements like
Call a workflow
Trigger an external comm.
Presentation (Browser)
Call an RFC
Post an Idoc
Send a ping request to SAP Cloud Platform
Typical Business Manipulation – Get me most expensive product
Function Import
Appn (ABAP Layer)
{
"path": "/sap/opu/odata",
"target": {
"type": "destination", DB
"name": "NS4",
"entryPath": "/sap/opu/odata"
},
"description": "OData Service Connection"
},
Services to offer SAP UI5
Neo-
SAP WebIDE
app.json Local Destination
Local Destination
Local Destination
Local Destination
Local Destination
1.52
App
ExcelUploader
SAP System
1.44
HTTP Method Name in Odata Model
GET .get(“/Entityset”, callbacks)
POST .create(“/EntitySet”,payload, callbacks)
UPDATE .update(“/EntitySet(‘key’)”,payload, callbacks)
DELETE .delete(“/EntitySet(‘key’)”)
Function Import .callFunction(“/FMName”, callbacks);
Saturday
2 PM India Time -4
4 Hours a week