INT260.E2E Integration - SAP Gateway HANA UI5.Excercise PDF

DEVELOP AN E2E INTEGRATION SCENARIO
WITH SAP GATEWAY, SAP HANA, AND SAPUI5

INT260
Exercises/Solutions
Volker Drees / SAP SE
INT260
TABLE OF CONTENTS
1 Before you start ....................................................................................................................... 3
2 Develop an OData Model using the OData Model Editor plugin ............................................. 4
2.1 Logon to the SAP HANA Cloud Platform, start the SAP Web IDE and enable
the OData Model Editor ................................................................................................................. 4
2.2 Develop the base OData Model using the OData Model Editor ........................................... 8
3 Create and run the OData Service .......................................................................................... 19
3.1 Create a SAP Gateway Service Builder project and perform the provisioning
using CDS views ........................................................................................................................... 19
3.2 Register and Test the OData service using the Gateway client ........................................... 28
3.3 (Optional) – Implement a default sorting for the Business Partner entity set ....................... 31
4 Generate Fiori-like Master/Detail application .......................................................................... 36
4.1 Define an individual Destination in the SAP HANA Cloud Platform Cockpit. ....................... 36
4.2 Generate Master/Detail application using WebIDE .............................................................. 39
4.3 Run the Fiori-like application ................................................................................................ 43
4.4 Add a default sorting for the business partner list ................................................................ 46
4.5 Add properties from the existing OData model to the application ........................................ 49
5 Make the Email Address editable in the application ................................................................ 52
5.1 Enable the update operation of the BusinessPartnerSet entity set ...................................... 52
5.2 Test the update operation using the Gateway client ............................................................ 56
5.3 Make the Email Address field editable ................................................................................. 58
5.4 (Optional) – Analyze the Error Log ....................................................................................... 63
6 Add table of Sales Orders to the application ........................................................................... 68
6.1 Add a new Entity Type to the data model............................................................................. 68
6.2 Add a Sales Order list to the application .............................................................................. 73
7 Add an analytical chart to the application ................................................................................ 78
7.1 Enhance the OData model to provide the analytical data .................................................... 78
7.2 Add another tab to the application showing the chart data .................................................. 83
7.3 (Optional) – Launch the application on your smartphone using the QR code ..................... 86
2
INT260
1 BEFORE YOU START

In the Hands-on session INT260 you have the opportunity to select your exercises depending on your
personal area of interest. However, the exercises depend on each other and need to be executed in
the provided sequence.
You find the solutions to all exercises as reference – this way you can also see the solution of the
exercises you did not finish.
In the session INT260 you will develop an OData V2 service from scratch, starting with the OData
model definition. The data model that is used in this session is based on the NetWeaver Enterprise
Procurement Model (EPM), which is an application intended to be used for demonstration and testing
purposes.
The initial OData model consists of two entity types and will be developed using the OData Model
Editor plugin in the WebIDE. You will import this data model into a SAP Gateway Service Builder
project and provision the service using predefined ABAP CDS-views.
After a successful testing of your OData service in the Gateway Client you will use the service to
generate a Fiori-like application based on the WebIDE Master/Detail template.
In the subsequent exercises you will further enhance your SAPUI5 application as well as the
underlying SAP Gateway OData service. You will for instance:
 Enable write access for the business partner entity set

 Add a sales order entity type/set to your data model, provision it via a BAPI and add it as a
new tab to the SAPUI5 application
 Add an analytical view to the application and provision it via an ABAP Managed Database
Procedure (AMDP).
Chapter 2: Develop an OData Model using the OData Model Editor Plugin in the SAP Web IDE
Estimated Duration: 35 minutes
Chapter 3: Create and run the OData Service

Chapter 4: Generate a Fiori-like Master/Detail application

Chapter 5: Make the email address editable in the application

Chapter 6: Add a table of sales orders to the application

Chapter 7: Add an analytical chart to the application

3
INT260
2 DEVELOP AN ODATA MODEL USING THE ODATA MODEL EDITOR

PLUGIN IN THE SAP WEB IDE
Overview
Estimated time: 30 minutes
Objective
The objective of this chapter is to develop the initial OData Model that will be used as a basis for all
subsequent chapters. The initial data model will be developed using the OData Model Editor and it will
consist of two entity types.
Exercise Description
You will log on to the SAP HANA Cloud Platform (HCP) and access the SAP Web IDE. Inside the SAP
Web IDE you will use the OData Modeler Plugin to develop the data model that will be extended in the
course of the INT260 session.
The trainer will provide you a valid P-User and a password to logon to the SAP HANA Cloud Platform
Cockpit. Please note that we’ve prepared individual SAP HANA Accounts per Data Center location.
For the SAP TechEd 2015 in Las Vegas you’ll have to use: https://account.us1.hana.ondemand.com
For the SAP TechEd 2015 in Barcelona you’ll have to use: https://account.hana.ondemand.com
Please follow the instructions given to you by the trainer in case there has been some last minute
change to the HCP location / account.
2.1 Logon to the SAP HANA Cloud Platform, start the SAP Web IDE and enable the
OData Model Editor
Explanation Screenshot
1. Start Google Chrome via the

desktop shortcut.
2. Open the SAP HANA Cloud

Platform Cockpit
For the session in Las Vegas

go to:
https://account.us1.hana.onde
mand.com
For the session in Barcelona

go to:
https://account.hana.ondeman
d.com
Click Log On on the Cloud

Cockpit welcome screen.
4
INT260
3. Enter the P-User and

Password that was provided
to you by the trainer and click
Log On.
Don’t use the option

Remember me.
4. After having logged on you

will get a Upgrade Your
Account for SAP HANA
Cloud popup.
Click on Register to proceed.
5. For the INT260 session in

Barcelona you might get a
European Union (EU)
Access Mode popup. Click
on Confirm to proceed.
5
INT260
6. After the log on you might get

a News and
Announcements popup.
Click on Close.
Las Vegas:
7. After a few seconds the SAP

HANA Cloud Cockpit is
shown.
Please Note:
You will be automatically
Barcelona:
directed to the correct account
(int260us1 for Las Vegas and
int260emea for Barcelona).
8. Go to Subscriptions.
9. Click on the application

webide.
6
INT260
Las Vegas:
10. Click on the Application URL
to start the SAP Web IDE
Please note that the current

“Active Application Version”
might by different from what Barcelona:
you see in the screen shot in
this document.
11. Wait a few seconds until the

SAP Web IDE welcome
screen is shown.
12. From the menu select Tools

 Preferences (CTRL+.) .
7
INT260
13. Choose Optional Plugins.
14. Search for the entry “OData

Model Editor” and mark its
checkbox to enable it.
15. Press the Save button in the

lower right corner.
16. There is a success message

shown for a few seconds in
the upper right area.
17. Important: Press F5 to reload

the page. Wait until the
Development view is shown.
Click on the Development
tab.
Summary
You have prepared the SAP Web IDE development environment.
You are now able to:

 Login to the SAP HANA Cloud Platform
 Use the HCP cockpit to start the SAP Web IDE
 Enable the OData Modeler Editor
2.2 Develop the initial OData Model using the OData Model Editor
8
INT260
1. Make sure the development

tab is shown. If not click on
</>.
2. Right-click on Local and

select New  Folder
(Ctrl+Alt+Shift+N)
3. Provide
INT260_<yxx>_Folder as the
Folder Name and press OK.
Note: Replace <yxx> with

your session-id / group
number.
4. Right-click on the new folder

and select New  OData
Model File.
Note: This context menu entry

is only available if the OData
Model Editor plugin is active
(which we activated in the
exercise before).
9
INT260
5. Provide
INT260_<yxx>_Model as the
Model Name.
Use the drop-down box to
select 2.0 as the OData
Version.
The correct file extension

(EDMX) will automatically be
added.

number.
6. This opens up the new file in

the detail section with an
EDMX stub ready to be
edited.
7. Position the cursor before the

<EntityContainer> tag and
add a few empty lines.
8. Start typing “entitytype” and

press enter to make use of
the watermark feature.
Alternatively you can also use

the code completion feature
by typing the first letters and
pressing CTRL+space and
selecting EntityType.
This adds a new entity type to

your data model.
10
INT260
9. Provide
Name="BusinessPartner"
as entity type name.
10. Provide
Name=“BusinessPartnerID”
Type="Edm.String"
Nullable="false"
for the defaulted property.
11. For the <Key> / PropertyRef

tag provide
Name="BusinessPartnerID"
This resolves the last error

message.
Tip: You can position the

cursor between the double
quotes and press
CTRL+SPACE to choose the
property from the list.
12. At the bottom you should now

see the message “This is a
valid OData Model file”.
13. After the closing

</Property> tag press enter
to create a new line.
Start typing “property” and

press enter to add a new
property.
11
INT260
14. Provide
Name=“CompanyName”
Type="Edm.String"
for the new property.

Nullable is already defaulted
to “true”.
15. Continue the procedure to

create properties as
documented in the table. Name Type
EmailAddress Edm.String
Note: Please use the exact PhoneNumber Edm.String
names and types as provided. WebAddress Edm.String
LegalForm Edm.String
Note: AddressGUID has a AddressGUID Edm.Guid
different type than the other
properties.
16. Your Business Partner entity

type should now look like:
17. Add another entity type with
Name="Address"
and with the primary key

property
Name="AddressGUID"
Type="Edm.Guid"
Nullable="false"
Don’t forget to set the

AddressGUID property as the
key property.
Make sure that no error

message is shown.
12
INT260
18. Create additional properties Name Type

as documented in the table. City Edm.String
PostalCode Edm.String
Note: Please use the exact Street Edm.String
names and types as provided. Building Edm.String
Country Edm.String
19. The address entity type
should look like:
Make sure that no error

message is shown and the
message box displays “This is
a valid OData Model file”.
20. Between the closing tag of

your address entity type and
the EntityContainer tag
add a few empty lines and
start typing “association” and
press enter to create an
association.
21. Provide
Name="Assoc_BusinessPart
ner_Address"
and for the first End tag

provide
Type="S1.BusinessPartner
"
Multiplicity="1"
Role="FromRole_Assoc_Bus
inessPartner_Address"
and for the second End tag

provide
Type="S1.Address"
Multiplicity="1"
Role="ToRole_Assoc_Busin
essPartner_Address"
Note: It is possible that the

Role attribute is not defaulted
and needs to be added
manually.
13
INT260
22. Now add a new

NavigationProperty to the
BusinessPartner entity type.
23. Provide
Name="ToAddress"
Relationship="S1.Assoc_B
usinessPartner_Address"
ToRole="ToRole_Assoc_Bus
FromRole="FromRole_Assoc
_BusinessPartner_Address
"
for the navigation property.
24. Finally we need to take care

about the EntityContainer.
Position the cursor right in

front of the closing
</EntityContainer> tag
and add a few empty lines.
25. Add an EntitySet with the

attributes
Name="BusinessPartnerSet"
EntityType="S1.BusinessPa
rtner"
26. Add another EntitySet with the

attributes
Name="AddressSet"
EntityType=" S1.Address"
27. Again make sure that no

errors are left.
14
INT260
28. Add an AssociationSet to the

data model.
29. Provide
Name="AssocSet_BusinessP
artner_Address"
Association="S1.Assoc_Bu
sinessPartner_Address"
and for the first End tag

provide
Role="FromRole_Assoc_Bus
EntitySet="BusinessPartn
erSet"
and for the second End tag

provide
Role="ToRole_Assoc_Busin
essPartner_Address"
EntitySet="AddressSet"
30. Verify that no errors are left.
31. Choose Edit  Beautify

(Ctrl+Alt+B).
Note: It’s possible that the

Beautify option is not shown
in the context menu. Please
use CTRL+ALT+B in this
case.
If this doesn’t work either,
please try to re-open the
OData Model Editor.
15
INT260
32. This beautifies your OData

model.
33. Save changes by pressing the

Save button or by using
CTRL+S.
34. Click on the Design tab and

wait a few seconds.
35. This opens up the graphical

representation of your OData
model.
16
INT260
36. By clicking on any element

(e.g. PostalCode) you get
additional information
displayed at the bottom.
37. Right-click on your edmx file

and select “Export OData
Model as XML”.
38. Click on the little arrow and

choose Show in folder.
39. Copy your file to the Student

(local) folder (link available on
the desktop), session INT260.
You will need the file in the
subsequent exercise.
17
INT260
Summary
You have now developed the initial OData Model using the OData Model Editor.

 Use the SAP Web IDE to create a new OData model file
 Use the OData Model Editor to develop a model with the elements:
 EntityType
 Property
 Association
 NavigationProperty
 EntitySet
 AssociationSet
 Visualize an OData model
18
INT260
3 CREATE AND RUN THE ODATA SERVICE
Overview
Objective
The objective of this chapter is to create and provision an OData service based on the data model that
you developed in the previous chapter. The service will be built using the SAP Gateway Service
Builder.
In this exercise you will:
 Use the SAP Gateway Service Builder to create a new project
 Import the OData EDMX file that you created in the exercise before
 Provision the OData service using predefined CDS views
 Generate, register and test the OData service using the Gateway Client
3.1 Create a SAP Gateway Service Builder project and perform the provisioning
using CDS views
1. Start the SAP Logon via the

desktop shortcut.
2. In the SAP GUI select the

System M39.
3. Log on to M39 client 003
User: INT260-<yxx>
Password: welcome

number.
19
INT260
4. Start the Gateway Service

Builder by running transaction
SEGW.
5. Click on the Create Project

button.
6. Provide
Project: ZINT260_<yxx>
Description: ZINT260_<yxx>
Service
Package: $TMP

number.
20
INT260
7. Right-click on Data Model and

select Import  Data Model
from File.
8. Press the Browse button.
9. Select the Student (local)

shortcut, folder INT260 and
locate the file that you’ve
copied in the exercise before
and choose Open.
If you have not been able to

complete the previous
exercise you can also pick the
solution from the central
Student (Share), INT260 
Solutions  Exercise 2.2.
21
INT260
10. Press Next.
11. Press Finish.
12. Verify that the import was

successful.
22
INT260
13. Click on Save.
14. This saves the current state of

your project and provides you
a success message at the
bottom of the screen.
15. Expand the node Service

Implementation and right-click
on AddressSet and choose
Map to Data Source.
16. Provide
Type: Business Entity

Name:
CDS~ZDDL_INT260_ADDRE
SS
and press Enter.

This associates the CDS-View
ZDDL_INT260_ADDRESS to
the entity set.
17. Press the Generate Mapping

button.
23
INT260
18. Verify that all properties are

correctly mapped.
Note: If some properties could

not be mapped automatically,
check your OData base
model.
19. Right-click on
BusinessPartnerSet and
choose Map to Data Source.
20. Provide
Type: Business Entity

Name:
CDS~ZDDL_INT260_BUSIN
ESSPARTNER
and press Enter.

This associates the CDS-View
ZDDL_INT260_BUSINESSP
ARTNER to the entity set.
24
INT260
21. Press the Generate Mapping

button.
22. Verify that all properties are

correctly mapped.
Note: If some properties could

not be mapped automatically,
check your OData base
model.
23. The association can’t be

mapped automatically as the
names differ. Put the cursor
into the Association field and
press F4.
24. Confirm the proposed

restriction by pressing Enter.
25
INT260
25. Double-click on the found

entry.
26. Press the Check Project

Consistency button.
27. Verify that no errors were

found.
28. Press the Generate Runtime

Objects button.
Note: Using the Generate

Runtime Objects button
automatically saves the
project.
29. Leave all values as defaulted

and press Enter.
26
INT260
30. Choose Local Object in the

Create Object Directory
Entry popup.
31. Verify that the generation was

successful.
Summary
You have imported your data model into a Gateway Service Builder project and you have provisioned
the service with CDS view as the data source.

 Create a new Gateway Service Builder project
 Import an OData EDMX file
 Provision the service with CDS views
 Generate the runtime artifacts
Additional Information:
Below you find the two CDS views that we’ve used in this exercise.
Definition of the CDS-view ZDDL_INT260_BUSINESSPARTNER:
@AbapCatalog.sqlViewName: 'ZCDS_INT260_BuPa'
@EndUserText.label: 'TechEd 2015 INT260 CDS-View BusinessPartner'
define view Zddl_Int260_Businesspartner
as select from snwd_bpa as partner
association [0..1]
to Zddl_Int260_Address as address
on partner.address_guid = address.AddressGUID
{
key partner.bp_id as BusinessPartnerID,
partner.company_name as CompanyName,
partner.email_address as EmailAddress,
partner.phone_number as PhoneNumber,
partner.web_address as WebAddress,
partner.legal_form as LegalForm,
partner.address_guid,
address
27
INT260
Definition of the CDS-view ZDDL_INT260_ADDRESS:
@AbapCatalog.sqlViewName: 'ZCDS_INT260_Adr'
@EndUserText.label: 'TechEd 2015 INT260 CDS-View Address'
define view Zddl_Int260_Address
as select from snwd_ad as address
{
key address.node_key as AddressGUID,
address.city as City,
address.postal_code as PostalCode,
address.street as Street,
address.building as Building,
address.country as Country
Tipp: There is a report (RUTDDLSSHOW) that allows you to display the definition of a CDS-view out
of the ABAP environment.
3.2 Register and Test the OData service using the Gateway client

Maintenance and right-click
on LOCAL and select
Register.
2. Confirm the warning popup.
28
INT260
3. In the Add Service popup

leave all values as defaulted
and press the Local Object
button to assign the artifacts
to the $tmp package. Then
press Enter to continue.
4. Double-click on the LOCAL

entry under Service
Maintenance. Verify that the
registration status on the
right-hand side is showing a
green traffic light.
5. In the navigation tree right-

click on LOCAL and select
SAP Gateway Client.
Alternatively click on the SAP

Gateway Client button in the
detail section.
6. This opens up the SAP

Gateway Client in a new
screen. The URI of the
service document is already
defaulted.
Press the Execute button.
7. As a result you get the service

document of your OData
service.
29
INT260
8. Remove the ?$format=xml in
the URI and replace it with
BusinessPartnerSet so that
you execute the URI
/sap/opu/odata/SAP/ZINT26
0_<yxx>_SRV/BusinessPart
nerSet

number.
After pressing enter you see

the list of EPM Business
partners available in the
system.
9. As an alternative you can click

on EntitySets to select the
entity set from the list of
available entity sets.
10. This displays a popup window

where you can select the
entity set that you want to
use.
11. Add the primary key of any

entry to the URI (e.g.
('0100000005')) so that you
execute the URI
nerSet('0100000005')

number.
After pressing enter you see

the business partner detail
information.
30
INT260
12. Add the /ToAddress
navigation to the URI so that
you execute the URI
nerSet('0100000005')/ToAdd
ress

number.
This provides you the address

of the business partner.
Summary
You now have registered your OData service and executed it using the SAP Gateway Client.

 Register an OData service out of the Service Builder
 Access the Service Document of your OData service
 Access the business partner collection
 Access a single business partner
 Navigate to the related address
3.3 (Optional) – Implement a default sorting for the Business Partner entity set
1. Switch back to the SAP

Gateway Service Builder.
In the section Service

Implementation expand the
BusinessPartnerSet node.
Right-click on GetEntitySet
(Query) and select Go to
ABAP Workbench.
2. Confirm the Information

popup.
31
INT260
3. Click on the Display <->

Change button to switch to
edit mode.
Tip: Shift + Left-click auto-

adjusts the column width in
the ALV grid.
4. Scroll down and locate the

method
BUSINESSPARTNERS_GET
_ENTITYSET and make sure
to select it.
5. Click on the Redefine

Method button to add a
redefinition for the method
_ENTITYSET.
6. This opens up the

_ENTITYSET method in edit
mode with a default code
stub.
7. Minimize all windows and

double click on Student
(Share) on the desktop to
access the central file share.
32
INT260
8. Navigate to INT260 
Solutions  Exercise 3.3
and open the file
_ENTITYSET.txt via double-
click.
9. Mark the entire coding in the

txt-file by pressing CTRL+A
and copy it into the clipboard
by pressing CTRL+C.
10. Switch back to the ABAP

class editor and mark the
entire code stub that was
provided and replace it by
pressing CTRL+V with the
coding that you copied in the
previous step.
33
INT260
11. Your
_ENTITYSET method should
now look like:
12. Click the Activate button.
13. Leave all lines marked and

confirm the activation popup.
14. Verify that the activation was

successful.
15. Press the back button twice

to navigate back to the SAP
34
INT260
16. Open the Gateway Client and

execute a GET on URI
nerSet

number.
This provides you the

business partner set with the
new sorting.
17. Add
?$orderby=BusinessPartner
ID to the URI so that you
execute the URI
nerSet?$orderby=Business
PartnerID

number.

business partner set sorted by
the business partner id.
Summary
You have added a redefinition for the BUSINESSPARTNERS_GET_ENTITYSET method in your data
provider extension class to implement a default sorting of the collection in case no paging and no
other sorting was requested.

 Navigate to the ABAP Workbench out of the SAP Gateway Service Builder
 Redefine a GetEntitySet method in the DPC extension class
 Execute an OData service using the $orderby query option
35
INT260
4 GENERATE A FIORI-LIKE MASTER/DETAIL APPLICATION
Overview
Objective
The objective of this chapter is to generate a Fiori-like application using the master/detail template in
the WebIDE. The application will be generated based on the OData service that you developed in the
previous chapter.
 Create a Destination in the HANA Cloud Platform
 Generate a Fiori-like application using the WebIDE master/detail template
 Choose your OData service from the Gateway service catalog
 Add a default sorting initiated by your SAPUI5 application
 Add properties from the existing OData model to the application
4.1 Define an individual Destination in the SAP HANA Cloud Platform Cockpit.
1. Switch to the Chrome

browser.
Las Vegas:
2. Navigate to the account

dashboard:
For Las Vegas go to:

https://account.us1.hana.onde
mand.com/cockpit#/acc/int260
us1
For Barcelona go to:

https://account.hana.ondeman
Barcelona:
d.com/cockpit#/acc/int260eme
a
Note: You need to

authenticate again, as your
session has most probably
expired.
36
INT260
3. Navigate to Destinations
4. Click on Import from File.
5. Click on Desktop.
6. Scroll down and double click

on Student (Share).
7. Locate and double click on

INT260.
37
INT260
8. Go to Solutions  Exercise
4.1.
Select the file

INT260_M39_003 and click
on Open.
9. Initially you see a conflict

reported as the destination
already exists.
10. Change the Name to

INT260_<yxx>_M39_003

number.
11. Change the Description to

INT260 - Group <yxx> -
System M39 - Client 003

number.
12. Enter the following user /

password:
User: INT260-<yxx>
Password: welcome

number.
38
INT260
13. All other fields can remain

unchanged.
14. Click on Save.
15. There is an information shown

for a few seconds at the
bottom of the window.
Summary
You have now created an own destination in the SAP HANA cloud platform cockpit. This destination
uses your individual user which we need for the upcoming exercises.

 Create a Destination by importing a predefined destination-file
4.2 Generate Master/Detail application using SAP Web IDE
1. Open the WebIDE via the

following link:

https://webide-
int260us1.dispatcher.us1.han
a.ondemand.com

https://webide-
int260emea.dispatcher.hana.o
ndemand.com
39
INT260
2. Right-click on Local and

select New  Project from
Template (Ctrl+Alt+Shift+O).
3. Select SAP Fiori Master

Detail Application and click
on Next.
4. Enter Project Name

INT260_<yxx>_Project
and click on Next

number.
5. Leave the source as Service

Catalog.
6. Locate and select the

Destination that you have
created before.
If your new destination is not

listed, press F5 to reload the
page.
40
INT260
7. The service catalog appears

after a few seconds.
8. Scroll down and select the

service that you have created
in the exercise earlier
(pattern:
ZINT260_<yxx>_SRV) and
press Next.
9. Provide INT260_<yxx> as the

project namespace

number.
10. In the Master Section provide

INT260 Group <yxx> as title.
From the drop-down fields

choose:
OData Collection:
BusinessPartnerSet
Item Title: CompanyName
Numeric Attribute: LegalForm
Units Attribute:
BusinessPartnerID

number.
41
INT260
11. In the Detail Section provide
Business Partner as Title
and Business Partner
Details as Detail Text.
From the drop-down fields

choose:
Attribute 1: PhoneNumber
Attribute 2: WebAddress
Attribute 3: EmailAddress
Note: The field Status

Attribute remains empty.
12. Scroll down to see the OData

Navigation defaulted as
ToAddress.
13. In the Navigation Section

choose from the drop-down
fields:
Attribute 1: Street
Attribute 2: PostalCode
Attribute 3: City
and press Next.
14. The confirmation screen is

shown. Press Finish.
15. The project is now available in

the navigation tree.
Summary
You have created a Fiori-like master/detail application using the OData service that you have
developed before.
42
INT260

 Generate a WebIDE project, using
 a master/detail template,
 an OData service from the service catalog,
 a navigation property to access a second entity type
4.3 Run the Fiori-like application
1. Change the ‘run configuration’

to display the frame that
allows you to switch between
different screen resolutions for
different devices.
Right click on the

INT260_xyz_Folder. Select
‘Project Settings’ in the
context menue.
2. Select ‘Run Configurations’ ->

Web Application -> New Web
Application.
43
INT260
3. Click on ‘Save” Button to save

your settings.
44
INT260
4. In the navigation tree mark

your project and press the
Run button.
5. In the Choose file to run

popup leave the default
selection (index.html) and
press OK.
6. The application shows up

after a few seconds.
45
INT260
7. Navigate around, e.g. select a

different business partner,
click on the second tab, etc.
8. In the upper left corner you

can change the resolution to
see how the application is
visualized depending on the
available space.
Summary
You have run the generated application and verified that the data is accessed from the backend
system.

 To launch the application out of the WebIDE environment
 Browse the data of your OData service
 Change the resolution and see how the visualization adapts to it
4.4 Add a default sorting for the business partner list
46
INT260
1. Switch to the WebIDE tab and

close the edmx file in case it
is still open.
2. Expand the view node and

double-click on
Master.view.xml
3. This opens up the view file of

the Master view. The Master
view defines the entry-list on
the left-hand side of the
application.
Note: The current

visualization might differ from
the screen-shot provided as
the version of the WebIDE
might have changed in the
meantime.
47
INT260
4. Scroll down to the List tag

and find the element
items="{/BusinessPartner
Set}">
5. In the generated code the

items element might be
combined with another
element in the same line.
Press enter in front of the
items element to move it to
an own line.
6. Now change the items

element from
items="{/BusinessPartner
Set}">
to
items="{path:'/BusinessP
artnerSet',
sorter:{path:'CompanyNam
e'}}">
7. Save your changes by clicking

the Save button or by
pressing CTRL+S.
8. Press the Run button to start

the application. In case you
still have the application tab
open in your browser you can
also switch to it and press the
refresh button in the upper
right corner.
As a result you can see that

the business partner list is
now sorted by company
name.
48
INT260
9. If you scroll down the list you

see that the application
performs a “lazy loading” of
entries. This is achieved by
the paging capabilities of the
OData service.
Summary
You have now added a default sorting to the main list of the master view.

 Use the WebIDE to edit a View-XML file
 Enhance the item tag by adding a sorter.
4.5 Add properties from the existing OData model to the application
1. Switch to the WebIDE tab and

close the Master.view.xml file
in case it is still open.
2. Double-click on
Detail.view.xml to open the
view file of the detail view.
49
INT260
3. This opens up the xml
definition of the detail-view.
Scroll down to the second
IconTabFilter (the one with
id="iconTabFilter2")
where you find the properties
Street, PostalCode and
City.
Note: The current

visualization might differ from
the screen-shot provided as
the version of the WebIDE
might have changed in the
meantime.
4. Copy the City-block including

the ids label6 and text6.
5. Insert it right after where you

copied it and change the
label-id to label7 and the
text-id to text7.
Change the label-text to

Country and the text-text to
{Country}
6. Perform the previous step

again (insert after text7) and
change the label-id to label8
and the text-id to text8.
Change the label-text to

Building and the text-text to
{Building}
7. Save your changes by clicking

the Save button or by
pressing CTRL+S.
50
INT260
8. Press the Run button to start

the application. In case you
still have the application tab
open in your browser you can
also switch to it and press the
refresh button in the upper
right corner.
Navigate to the second tab in

the application to see the two
new fields.
Summary
You have now added two more properties of the Address entity type to the detail view of your WebIDE
project.

 Use the WebIDE to edit the detail view XML file
 Add additional properties from the OData model to an existing application tab.
51
INT260
5 MAKE THE EMAIL ADDRESS EDITABLE IN THE APPLICATION
Overview
Objective
The objective of this chapter is to make the Email Address editable in the application. For this you will
first need to enhance the OData service and then adjust the SAPUI5 application accordingly.
 Enhance the OData service by mapping an update BAPI to the update operation of the
BusinessPartnerSet entity set.
 Test the update operation using the Gateway client
 Make the Email Address field editable in the SAPUI5 application
 Add a save button to the application and trigger the corresponding update operation
 Optionally analyze the error log and debug your OData service
5.1 Enable the update operation of the BusinessPartnerSet entity set

In the section Service

Implementation expand the
BusinessPartnerSet node.
Right-click on Update and
select Map to Data Source.
2. In the Map to Data Source

popup provide
Type: Remote Function Call

Name:
BAPI_EPM_BP_CHANGE
and press Enter.
52
INT260
3. Expand the HEADERDATA

node in the tree on the right-
hand side
4. Drag&drop the parameter

HEADERDATA  BP_ID
from the right-hand side tree
to the Data Source
Parameter column of the
property BusinessPartnerID
5. Perform the same for
COMPANY_NAME to
CompanyName
EMAIL_ADDRESS to
EmailAddress
PHONE_NUMBER to
PhoneNumber
WEB_ADDRESS to
WebAddress
LEGAL_FORM to LegalForm
6. Remove the line with the

property AddressGUID
(select it and press the Delete
Row button).
53
INT260
7. Click on the Append Row

button.
8. This adds an empty line to the

mapping section.
9. Use the value help to enter

the property
BusinessPartnerID.
If you type in the name

manually, you need to press
enter to be able to map it in
the subsequent step.
10. Collapse the HEADERDATA

node and expand the BP_ID
node of the tree on the right-
hand side.

BP_ID  BP_ID from the
right-hand side tree to the
Data Source Parameter
column of the newly added
line.
12. Collapse the tree on the right-

hand side and expand the
node HEADERDATAX
54
INT260
13. Add 6 more empty lines in the

mapping section.
14. For the first line choose again

BusinessPartnerID as the
Entity Set property

HEADERDATAX  BP_ID
from the right-hand side tree
to the Data Source
Parameter column of the first
new line.
16. Enter 'X' (including the single

apostrophes) into the
Constant column of the
remaining 5 lines
17. Drag&drop the parameters
COMPANY_NAME
EMAIL_ADDRESS
PHONE_NUMBER
WEB_ADDRESS
LEGAL_FORM
of the node HEADERDATAX

to the 5 lines.
Note: The X-structure is a

BAPI specific requirement.
The constants indicate the
values that we want to
change.
55
INT260
18. Press the Check Project

Consistency button and
verify that no error are
reported.
19. Press the Generate Runtime

Objects button and verify that
the generation was
successful.
Note: Generating the runtime

objects automatically saves
the project.
Summary
You have now enabled the update operation of the BusinessPartnerSet entity set by mapping the
corresponding update BAPI to the operation.

 Map an RFC data source to the update operation of an entity set
 Map input fields from the entity set to the import parameter of the update BAPI
 Map constants to the import parameter of the update BAPI
5.2 Test the update operation using the Gateway client
1. Open the Gateway Client and
execute a GET on URI
nerSet('0100000032')
or choose any other Business

Partner ID.

number.

business partner detail.
2. Click on Use as Request.
56
INT260
3. This copies the response over

to the request side and helps
you to form a valid request
body.
4. You can now adjust some of

the properties in the request
body, e.g. PhoneNumber or
WebAddress.
5. Change the HTTP method to

PUT.
6. Now you can execute the

request by pressing the
Execute button.
7. You should get a success

response (http status code
204), and an empty response
body.
57
INT260
8. As a verification switch the

HTTP method back to GET
and execute the same
request.
9. In the response you find your

updated value.
Summary
You have verified that the update operation of the BusinessPartnerSet entity set is working.

 Use the Gateway Client to execute PUT requests
5.3 Make the Email Address field editable
1. Switch to the WebIDE and
reload the page as the
session might have expired in
the meantime.
Alternatively open the

WebIDE via the following link:

https://webide-
int260us1.dispatcher.us1.han
a.ondemand.com

https://webide-
int260emea.dispatcher.hana.o
ndemand.com
58
INT260
2. The Detail.view.xml file
should still be open. If not
open it via double-click.
Scroll down to the first

IconTabFilter and locate
the text-id text3, which is the
text-id for {EmailAddress}.
Mark the entire text tag (all 3

lines from the start-tag <Text
including the end-tag
</Text>)
3. Remove the lines and replace

them with:
<Input
id="inputEmailAddress"
value="{EmailAddress}"/>
4. Save your changes and run

the application.
The email address is now

editable – although changes
will not yet be stored.
5. In the WebIDE add another

line into Detail.view.xml right
after the input field that you
created before with:
<Button text="Save"
width="80px"
id="buttonSave"
press="onSaveButton"/>
59
INT260

the application.
You now see a save button

under the (or right next to the)
input field.
Pressing the Save button

does not trigger any action
yet.
7. In the WebIDE double-click on

Detail.controller.js to open it.
8. Note: You can ignore the

errors/warnings that are
shown.
60
INT260
9. Add the following two lines at

the beginning of the file:
jQuery.sap.require("sap.
m.MessageToast");
jQuery.sap.require("sap.m
.MessageBox");

(Share) on the desktop.

and open the file
onSaveButton.txt via double-
click.
12. Use CTRL+A and CTRL+C to

copy the entire content of the
file into the clipboard.
13. Switch back to the WebIDE in

the browser and paste the
coding from the clipboard
before the onMasterLoaded
function.
This coding is the

onSaveButton event handler
that picks the current value
from the input field and
performs an update operation
on the entry.

the application.
If you now change the email

address and press the save
button, you should see a
message toast after the
update was processed (the
toast is shown for a few
seconds).
61
INT260
15. Switch to the Gateway client

and verify that the record was
really updated.
16. The business logic on the

backend considers an empty
email address as invalid and
throws an exception in such a
case.
Try to save a blank email

address.
17. After pressing save you get

an error popup informing you
that it was not possible to
persist the Business Object
data.
Press OK.
18. You can either provide a valid

value and press save, or
navigate to a different
business partner which
discards your changes.
Summary
You have made the Email Address field editable, including the update on the backend side.
62
INT260

 Add an input field to the detail view xml file.
 Add a button associated with an event to the detail view xml file.
 Handle the onButtonPressed event on the detail controller JavaScript file.
 Trigger an update request via the OData service.
 Perform error handling in the SAPUI5 application.
5.4 (Optional) – Analyze the Error Log
1. Switch back to the SAP GUI

and open a new screen.
2. Start the SAP Gateway Error

Log via the provided entry in
the favorites list.
Alternatively you can also

start the SAP Gateway Error
Log via transaction:
/n/IWFND/ERROR_LOG
3. Use the Re-Select button to

provide a filter.
4. In the Select Error Log

Entries popup enter you user
id into the User Name field
and press enter.
63
INT260
5. This filters the list so that only

the entries of your group are
visible.
6. The ‘B’ column indicates that

the error is a Backend error.
7. Select an error entry and click

on e.g. Request Data.
8. This shows you the request

that was sent by the
consumer.
64
INT260
9. Close the popup and click on

Call Stack.
10. This shows you the call stack

when the error was thrown.
The popup also allows you to
directly jump to the related
line of code.
11. Close the popup and click on

Backend Monitor (as we are
looking at an error reported in
the backend).
12. This opens up a new SAP

GUI screen with the backend
error log (which looks very
similar to the gateway error
log).
13. Click on Active Source.
65
INT260
14. This opens another screen

and locates you to the place
where the error was added to
the error log.
15. In our case we know why the

error happened, but in case
you don’t know why the error
was thrown you could set an
external breakpoint and run
the application again to debug
the problem.
16. In the debugger you can e.g.

check the call-stack and set
additional breakpoints to
analyze the problem further.
17. Close the debugger, remove

your breakpoint and close the
error log screens.
Summary
You have analyzed the error on the Gateway Hub as well as on the Backend side.

 Open the SAP Gateway Error Log
 Filter the displayed error messages
 Analyze the error
66
INT260
 Navigate to the backend error log

 Jump to the coding where the error was added to the log
67
INT260
6 ADD A TABLE OF SALES ORDERS TO THE APPLICATION
Overview
Objective
The objective of this chapter is to add a table with the related sales order of the selected business
partner to the SAPUI5 application.
 Add a new entity type + entity set containing the sales orders to the OData service
 Add the required association and navigation property between the business partner and the
sales orders
 Provision the query operation of the new sales order entity set
 Add a new tab with a table to the SAPUI5 application
 Fill the table based on the data provided via the new navigation property
6.1 Add a new Entity Type to the data model

Right-click on Data Model

and select Import 
RFC/BOR Interface.
2. In the first step of the wizard

provide:
Entity Type Name:

SalesOrder
Name:
Z_BAPI_EPM_SO_GET_LIS
T
and click on Next.
68
INT260
3. Mark the table entry

SALES_ORDER and click on
Next.
4. In the 3rd step mark SO_ID as

key field and click on Finish.
5. This adds a new entity type to

your data model.
6. Right click on Associations

and choose Create.
69
INT260
7. In 1st step of the wizard
provide:
Association Name:
Assoc_BusinessPartner_Sa
lesOrders
Principal Entity
Entity Type Name:
BusinessPartner
Cardinality: 1
Navigation Property:
ToSalesOrders
Dependent Entity
Entity Type Name:
SalesOrder
Cardinality: 0..n
and click on Next.
8. In the 2nd step provide

BuyerId as the Dependent
Property and click on Next.
9. In the 3rd step you can accept

the defaulted values and click
on Finish.

Implementation 
SalesOrderSet, right-click on
GetEntitySet (Query) and
select Map to Data Source.
70
INT260
11. In the Map to Data Source

popup provide

Name:
Z_BAPI_EPM_SO_GET_LIS
T
and press Enter.
12. Click on Propose Mapping.
13. This provides a mapping for

all properties.
14. Add a new line to the mapping

grid and use the value help to
provide BuyerId as the entity
set property.
If you type in the name

manually, you need to press
enter to be able to map it in
the subsequent step.
71
INT260
BP_ID from the data source
tree on the right-hand side to
the Data Source Parameter
column of the newly added
line.
This creates an input mapping

that can be used for filtering.
16. Check the project and click on

Generate Runtime Objects.

successful.
18. Go to the Gateway Client and

execute the URI:
0_<yxx>_SRV/SalesOrderSe
t

number.
As a result you get the

SalesOrderSet collection
displayed.
19. Fetch the entry of a single

business partner, e.g. via:
nerSet('0100000008')
and add /ToSalesOrders to

navigate to the list of related
sales orders.

number.
72
INT260
Summary
You have now added a new entity type SalesOrder to your OData model / service and you have
provisioned it using a Remote Function Module. Finally you have tested the new collection using the
Gateway Client.

 Add a new entity type + entity set using the RFC import wizard
 Use the association wizard to
 Create a new one-to-many association
 Create a navigation property
 Create a new association set
 Map a remote function module to the GetEntitySet (Query) operation including a filter
parameter.
 Test the result using the Gateway Client
6.2 Add a Sales Order list to the application
1. Switch back to the WebIDE

and confirm the expiration
popup.
Close all open files.
2. Right-click on Detail.view.xml
and choose Open With 
Layout Editor.
73
INT260
3. After a few seconds the

Layout Editor is displayed.
4. Expand Container and

drag&drop an Icon Tab Filter
to the Icon Tab Bar of your
application.
This adds a new Icon Tab

Filter element to your
application. The new element
has the label “Open” and the
count “10”.
5. Click on the new element and

move it to the third position.
74
INT260
6. In the properties section

change the properties:
Icon to sap-icon://table-view
Icon Color to Default
Remove the values for Text

and Count.

the application.
The new tab is shown but so

far it does not contain any
data.
8. In the WebIDE close the

layout editor for
Detail.view.xml. Double-click
on Detail.view.xml to open it
using the xml editor.
75
INT260
9. Scroll down to the end and
locate the line
<IconTabFilter text=""
count="" icon="sap-
icon://table-view"
iconColor="Default"
id="__filter0"/>
and mark the entire line.


and open the file
Detail.view.xml.txt via
double-click.

13. Switch back to the WebIDE in

the browser and paste the
coding from the clipboard
replacing the IconTabFilter
line that you marked before.
This is adding a table with 3

columns: Order Id, Note and
Gross Amount to the Icon Tab
Filter.
76
INT260

the application.
Navigate to a business
partner that has sales orders
associated (e.g. Asia High
Tech or DelBont Industries)
and click on the new tab to
see the list of sales orders.
Summary
You have added a new tab with the list of related sales orders to your application.

 Use the WebIDE layout editor to edit a view file
 Add a new tab to the application
 Add a new table to the application with data provided via a navigation property
77
INT260
7 ADD AN ANALYTICAL CHART TO THE APPLICATION
Overview
Objective
The objective of this chapter is to add an analytical chart to the SAPUI5 application, visualizing data
provided by an ABAP Managed Database Procedure (AMDP).
 Add a new entity type + entity set containing the chart data for the OData service
 Provision the new entity set using an ABAP Managed Database Procedure
 Add a new tab to the SAPUI5 application containing a ChartContainer showing the data from
the new entity set
 Optionally launch the application from a smartphone / tablet device using a QR-code
7.1 Enhance the OData model to provide the analytical data

Right-click on Entity Types

and select Create.
2. Provide
Entity Type Name: ChartData
and mark the checkbox

Create Related Entity Set.
Press Enter.
78
INT260
3. Expand the ChartData node

and double-click on
Properties.
4. Create 4 properties by
pressing the create button.
Name Key Edm Core Type

5. Enter the details as described BusinessPartnerID X Edm.String
in the table: ProductID X Edm.String
GrossAmount Edm.Decimal
CurrencyCode Edm.String
6. For the property

GrossAmount provide
Precision: 17
Scale: 3
Unit Property: CurrencyCode
7. Right-click on Data Model

and select Create 
Association.
79
INT260
8. In 1st step of the wizard
provide:
Association Name:
Assoc_BusinessPartner_Ch
artData
Principal Entity
Entity Type Name:
BusinessPartner
Cardinality: 1
Navigation Property:
ToChartData
Dependent Entity
Entity Type Name: ChartData
Cardinality: 0..n
and click on Next.
9. In the 2nd step provide

BusinessPartnerID as the
Dependent Property and
click on Next.
10. In the 3rd step you can accept

the defaulted values and click
on Finish.
11. Click on Generate Runtime

Objects.

successful.
13. In the section Service

Implementation, expand the
node ChartDataSet. Right-
click on GetEntitySet (Query)
and select Go to ABAP
Workbench.
80
INT260
14. Confirm the popup
15. Switch to edit mode, scroll

down to the method
CHARTDATASET_GET_ENT
ITYSET and make sure to
select it.
Click on the Redefine

Method button.


and open the file
CHARTDATASET_GET_ENT
ITYSET.txt via double-click.

81
INT260
19. In the ABAP Class Builder

mark the entire code stub by
pressing CTRL+A.Press
CTRL+V to replace the entire
coding with the one in the
clipboard.
Info: The replaced coding first

fetches the key (BP-Id) of the
source entity (Business
Partner). The BP-Id is then
used as filter for the AMDP
which is fetching the chart
data. Finally the result-table is
filled into the export-table of
the get-entityset method.
20. Click on Activate.
21. Confirm the activation popup.
22. Switch to the Gateway Client

and execute e.g. the URI:
nerSet('0100000008')/ToCha
rtData

number.
Summary
You have added a new entity type that provides the chart data for a given business partner. The chart
data is provided via an ABAP managed database procedure (AMDP).

 Manually add an entity type / entity set using the SAP Gateway Service Builder
 Implement the GetEntitySet (Query) operation for the new entity set
 Make use of an ABAP managed database procedure to provision the new entity set.
82
INT260
Additional Information:
The definition of the AMDP ZCL_INT260_AMDP:
CLASS zcl_int260_amdp DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES if_amdp_marker_hdb.
TYPES: BEGIN OF ty_output,

businesspartnerid TYPE snwd_partner_id,
productid TYPE snwd_product_id,
grossamount TYPE snwd_ttl_gross_amount,
currencycode TYPE snwd_curr_code,
END OF ty_output,
tt_output TYPE STANDARD TABLE OF ty_output.
METHODS get_data
IMPORTING
VALUE(iv_bp_id) TYPE snwd_partner_id
EXPORTING
VALUE(et_result) TYPE tt_output.
ENDCLASS.
CLASS zcl_int260_amdp IMPLEMENTATION.
METHOD get_data BY DATABASE PROCEDURE FOR HDB

LANGUAGE SQLSCRIPT OPTIONS READ-ONLY
USING snwd_so_i snwd_so snwd_pd snwd_bpa.
et_result = select b.bp_id as businesspartnerid, p.product_id as productid,

sum(i.gross_amount) as grossamount, i.currency_code as currencycode
from snwd_so_i as i
inner join snwd_so as s
on i.PARENT_KEY = s.NODE_KEY
inner join snwd_pd as p
on i.PRODUCT_GUID = p.NODE_KEY
inner join snwd_bpa as b
on s.BUYER_GUID = b.NODE_KEY
where b.BP_ID = :iv_bp_id
group by b.bp_id, p.product_id, i.currency_code
order by b.bp_id, p.product_id, i.currency_code;
ENDMETHOD.
ENDCLASS.
7.2 Add another tab to the application showing the chart data
1. Switch back to the WebIDE

and confirm the expiration
popup.
Close all open files.
83
INT260
2. Double-click on the
Detail.view.xml file to open it.
Scroll to the right and locate

the controllerName.
3. Insert:
xmlns:suite="sap.suite.ui.com
mons"
xmlns:viz="sap.viz.ui5.control
s"
right before the

controllerName in one line.
4. Scroll to the left and scroll

down to the last
</IconTabFilter> closing
tag.
Insert an empty line after the

tag.
5. Copy the code from the

Solutions  Exercise 7.2,
file Detail.view.xml.txt and
paste it into the
Detail.view.xml file.
This adds a new

IconTabFilter to the
application containing a
ChartContainer.

the application.
A new tab is shown, but so far

it doesn’t contain any content
(apart from a few buttons).
84
INT260
7. In the WebIDE double-click on

Detail.controller.js to open
the file.
Locate the onInit function

(which is the first one).
8. At the end of the onInit

function add the following two
lines:
var aVizFrameIDs =
["vizFrameBar1"];
aVizFrameIDs.forEach(thi
s._setChartData.bind(thi
s));
9. Right before the

onSaveButton function add a
few new lines
10. Copy the code from the

Solutions  Exercise 7.2,
file Detail.controller.js.txt
and paste it into the
Detail.controller.js file.
This adds the functions

_setChartData as well as
_resetChartData to the
controller.
11. Scroll down and locate the

fireDetailChanged function.
85
INT260
12. Add the following two lines at

the end:
var aVizFrameIDs =
["vizFrameBar1"];
aVizFrameIDs.forEach(this._r
esetChartData.bind(this));

the application.
Select a business partner that

has some sales orders
assigned (e.g. Asia High
Tech or DelBont Industries)
and open the new tab.
The chart showing the Gross-

Amount per Product is
displayed.
Summary
You have added a new tab to the application showing the gross amount per product of all sales orders
associated to the selected business partner.

 Add a ChartContainer to the view file.
 Provision the ChartContainer with data from the OData service based on the selected business
partner.
7.3 (Optional) – Launch the application on your smartphone using the QR code
1. In case you have a

smartphone or a tablet device
with a QR-code reader, click
on the little QR-code icon in
the upper right corner.
86
INT260
2. This opens up the QR-code

specific to your application.
If you want you can scan the

code with your device and run
the application in the browser.
Note: This is not the link to

your application that you
should roll-out to your users
as the application is still
running in the test
environment of the WebIDE.
3. You need to authenticate with

the P-User / password that
you also used to log on to the
SAP HANA Cloud Platform /
SAP Web IDE.
Summary
You have accessed the QR-code of your application in the test environment.

 Run the application on your smartphone / tablet device via the QR-code out of the test
environment.
87
INT260
© 2015 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP
affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries.
Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.
88

INT260.E2E Integration - SAP Gateway HANA UI5.Excercise PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

INT260.E2E Integration - SAP Gateway HANA UI5.Excercise PDF

Uploaded by

Copyright:

Available Formats

DEVELOP AN E2E INTEGRATION SCENARIO

WITH SAP GATEWAY, SAP HANA, AND SAPUI5

1 Before you start ....................................................................................................................... 3

3 Create and run the OData Service .......................................................................................... 19

4 Generate Fiori-like Master/Detail application .......................................................................... 36

4.2 Generate Master/Detail application using WebIDE .............................................................. 39

4.3 Run the Fiori-like application ................................................................................................ 43

5 Make the Email Address editable in the application ................................................................ 52

5.3 Make the Email Address field editable ................................................................................. 58

5.4 (Optional) – Analyze the Error Log ....................................................................................... 63

6 Add table of Sales Orders to the application ........................................................................... 68

6.1 Add a new Entity Type to the data model............................................................................. 68

6.2 Add a Sales Order list to the application .............................................................................. 73

7 Add an analytical chart to the application ................................................................................ 78

1 BEFORE YOU START

 Enable write access for the business partner entity set

Chapter 3: Create and run the OData Service

Chapter 4: Generate a Fiori-like Master/Detail application

Chapter 5: Make the email address editable in the application

Chapter 6: Add a table of sales orders to the application

Chapter 7: Add an analytical chart to the application

2 DEVELOP AN ODATA MODEL USING THE ODATA MODEL EDITOR

1. Start Google Chrome via the

2. Open the SAP HANA Cloud

For the session in Las Vegas

For the session in Barcelona

Click Log On on the Cloud

3. Enter the P-User and

Don’t use the option

4. After having logged on you

5. For the INT260 session in

6. After the log on you might get

7. After a few seconds the SAP

9. Click on the application

Please note that the current

11. Wait a few seconds until the

12. From the menu select Tools

13. Choose Optional Plugins.

14. Search for the entry “OData

15. Press the Save button in the

16. There is a success message

17. Important: Press F5 to reload

You are now able to:

1. Make sure the development

2. Right-click on Local and

Note: Replace <yxx> with

4. Right-click on the new folder

Note: This context menu entry

The correct file extension

Note: Replace <yxx> with

6. This opens up the new file in

7. Position the cursor before the

8. Start typing “entitytype” and

Alternatively you can also use

This adds a new entity type to

as entity type name.

for the defaulted property.

11. For the <Key> / PropertyRef

This resolves the last error

Tip: You can position the

12. At the bottom you should now

13. After the closing

Start typing “property” and