You are on page 1of 241

BUILDING APPLICATIONS WHICH LEVERAGE

SAP HANA

Version: September 2013


Exercises / Solutions
Rich Heilman / SAP Labs, LLC.
Thomas Jung /SAP Labs, LLC.

2

Contents
Getting Help .................................................................................................................................................... 6
Source code solutions ..................................................................................................................................... 6
HANA Studio Configuration ..........................................................................................................................................6
Adding the HANA Studio Perspectives............................................................................................................. 6
Create a connection to the HANA server ......................................................................................................... 7
Configure Regi for SAP HANA Studio ............................................................................................................ 10
Installing SAPUI5 Tools into SAP HANA Studio ............................................................................................. 11
Exercise 1 Setup of a Project .................................................................................................................................. 15
Exercise 1 Solution ................................................................................................................................................. 16
Create a group package ................................................................................................................................ 16
Create a Repository Workspace .................................................................................................................... 17
Create a XS Project ....................................................................................................................................... 19
Creating Sub-Packages ................................................................................................................................. 23
Creating Access Control ................................................................................................................................ 24
Creating and running a Hello World HTML page from our Project .................................................................. 27
Creating a Hello World HTML test manually ................................................................................................... 32
Creating a database Schema ........................................................................................................................ 34
Creating a repository role .............................................................................................................................. 36
Grant the Role ............................................................................................................................................... 39
Exercise 2 Creating Database Objects via the Repository ....................................................................................... 41
Exercise 2 Solution ................................................................................................................................................. 42
Creating the hdbdd development artifact ........................................................................................................ 42
Defining reusable types and structures .......................................................................................................... 44
Defining database tables ............................................................................................................................... 45
(Optional) Creating tables via hdbtable .......................................................................................................... 50
Creating Sequences ...................................................................................................................................... 52
SQL Views .................................................................................................................................................... 54
Automatic Table Data Loads.......................................................................................................................... 55
Exercise 3 Modeling Views ..................................................................................................................................... 59
Exercise 3 Solution ................................................................................................................................................. 60
Creating an Attribute View ............................................................................................................................. 60
Creating an Analytic View .............................................................................................................................. 67
Exercise 4 Using SQLScript .................................................................................................................................... 74


3

Exercise 4 Solution ................................................................................................................................................. 76
Creating a procedure leveraging CE functions ............................................................................................... 76
Creating a procedure leveraging imperative logic ........................................................................................... 80
Debugging SQLScript Procedures ................................................................................................................. 81
Creating Table User Defined Functions(UDFs) .............................................................................................. 87
Creating Scalar User Defined Functions(UDFs) ............................................................................................. 90
Creating Triggers........................................................................................................................................... 92
Exercise 5 OData Services ..................................................................................................................................... 99
Exercise 5 Solution ............................................................................................................................................... 100
Creating a Simple OData Service ................................................................................................................ 100
Creating an OData Service with an Entity Relationship ................................................................................ 105
Creating an OData Service with Create Operation and SQLScript Exit ......................................................... 107
Exercise 6 Server Side JavaScript ........................................................................................................................ 110
Exercise 6 Solution ............................................................................................................................................... 111
Creating a Hello World XSJS Service .......................................................................................................... 111
Creating an XSJS Service with custom output format................................................................................... 113
Creating an XSJS Service with outbound HTTP Connectivity ....................................................................... 116
Debug a XSJS Service from HANA Studio ................................................................................................... 121
Alternative: Debug a XSJS Service from the SAP HANA Web-based Development Workbench ................... 129
Exercise 7 UI5 Basics ........................................................................................................................................... 132
Exercise 7 Solution ............................................................................................................................................... 133
Create a SAPUI5 Project ............................................................................................................................. 133
Share the SAPUI5 Project with the HANA Repository .................................................................................. 136
Testing your Hello World Application ........................................................................................................... 141
Creating a Text Bundle (Optional) ................................................................................................................ 142
Exercise 8 Consuming OData from UI5 ................................................................................................................. 146
Exercise 8 Solution ............................................................................................................................................... 147
Consume a Basic OData Service within UI5 binding the service to a Table .................................................. 147
Use oData Metadata to dynamically create the columns. ............................................................................. 151
Consume an OData Service with Create Option .......................................................................................... 153
Exercise 9 Consuming XSJS from UI5 .................................................................................................................. 159
Exercise 9 Solution ............................................................................................................................................... 160
Consume XSJS Services via JQuery AJAX calls ......................................................................................... 160
4

Use the liveUpdate and linked fields for interactive search ........................................................................... 164
Exercise 10 UI Integration Services ....................................................................................................................... 169
Exercise 10 - Solution .............................................................................................................................................. 170
Create a Widget .......................................................................................................................................... 170
Create an Application Site ........................................................................................................................... 174
Exercise 11 Delivery Units and Transport of Content ............................................................................................. 179
Exercise 11 Solution ............................................................................................................................................. 180
Create a Deliver Unit using the HALM tool ................................................................................................... 180
Export a Delivery Unit using the HALM tool.................................................................................................. 184
Alternative: Create and export a Delivery Unit using the SAP HANA Web-based Development Workbench . 187
Exercise 12 putting it all together purchase order worklist ................................................................................... 191
Exercise 12 - solution............................................................................................................................................... 194
Exercise Preparations ................................................................................................................................. 194
The Data Model ........................................................................................................................................... 199
XSODATA Services..................................................................................................................................... 207
XSJS Services ............................................................................................................................................ 209
User Interface.............................................................................................................................................. 212
Exercise 13 putting it all together Adapt to use UIS ............................................................................................ 216
Exercise 13 Solution ............................................................................................................................................. 217
Project Structure.......................................................................................................................................... 217
Create Components .................................................................................................................................... 218
Create Widget XML Specifications ............................................................................................................... 219
Create Widgets ........................................................................................................................................... 220
Create an Application Site ........................................................................................................................... 223
Design an Application Site ........................................................................................................................... 224
Implementing Communication Between Widgets ......................................................................................... 225
Personalize Preferences.............................................................................................................................. 229
Appendix A: Installing THE WORKSHOP and DEMO Delivery Units ........................................................................ 230
Prerequisite Checks .................................................................................................................................... 230
Importing Delivery Units............................................................................................................................... 231
Post-Installation Setup Steps ....................................................................................................................... 232
Appendix B: Installing The WEB IDE ........................................................................................................................ 234
Installation ................................................................................................................................................... 234


5

Appendix C: Installing SAP HANA UI Integration Services........................................................................................ 238
Installation ................................................................................................................................................... 238



6

BEFORE YOU START

Getting Help
If you need addition help resources beyond this document, we would suggest the following content:
The Online Help at http://help.sap.com/hana/SAP_HANA_Developer_Guide_en.pdf
The integrated help within SAP HANA Studio (content identical to the above mentioned online help)

Source code solutions

All source code solutions and templates for all exercises in this document can be found in the following webpage.
http://<host>:<port>/workshop/admin/ui/exerciseMaster/?workshop=xs

In some cases it might be a little easier to copy and paste the coding instead of typing it all manually. If
copying/pasting, I would suggest that you make sure to understand what is being copied/pasted before moving on.

1. Open the browser and enter the following URL to access the solutions web page. You can access the source
code for each exercise by clicking on the appropriate exercise in the navigation bar.
http://<host>:<port>/workshop/admin/ui/exerciseMaster/?workshop=xs

HANA STUDIO CONFIGURATION

Explanation Screenshot
Adding the HANA Studio
Perspectives
1) To support the new
developer centric workflow,
there are two need Eclipse
Perspectives which have
been added to SAP HANA
Studio. These are not
displayed by default.

In the upper right corner of
your SAP HANA Studio,
there is an add
Perspectives button. Press
this.



7

2) Add the SAP HANA
Development perspective.
This is the perspective you
should be using for almost
this entire workshop.

3) Repeat the step and add
the Debug perspective.

Create a connection to the
HANA server
1) Make sure you are in the
SAP HANA Development
perspective by clicking on
the button.
.

2) Click on the SAP HANA
Systems view. Right click
and choose Add
System.

8

3) Input the server hostname
and the instance number
which were provided by
your workshop instructor.
Enter a meaningful
description of your choice.
Press the Next button.

4) Enter the user id and
password which the
instructor has provided to
you. The user id should
be WORKSHOP_<group
number>. Your group
number will be given to you
by the session instructor.
For example if the group
number is 01, then your
user id would be
WORKSHOP_01. Enter
the password which was
supplied by your instructor.
Click Finish.



9

5) You should now have a
new connection with your
specific user id for the M41
system. Please make sure
to use this connection for
the rest of the exercise.
Please DO NOT use the
Demo or any other
connections.

4) If you do not see the
Content folder in the SAP
HANA Systems View, you
can add it to your view.
Click the View Menu
button on the Navigator
toolbar.


5) Click Customize View.

6) In the following dialog, click
the Content tab, then click
the checkbox for Content.
Click OK.


10

Configure Regi for SAP HANA
Studio
1) From the Window menu,
choose Preferences.


2) From the left side of the
screen, expand SAP
HANA Development, then
click Repository Access.
In the right side of the
screen, click Change.
Browse to the client
installation directory
(default: C:\Program
Files\SAP\hdbclient\) and
choose regi.exe. Next,
click Apply, then OK.




11

Installing SAPUI5 Tools into
SAP HANA Studio
1) Begin the installation by
adding the SAPUI5 tools
update site to your SAP
HANA Studio. Use
Window->Preferences.

2) From the preferences,
choose Install/Update ->
Available Software Sites.
The press Add to create a
new entry.

3) You can also consider using
the public update site:
https://tools.hana.ondeman
d.com/juno


12

4) To perform the installation
from this new update site,
use Help -> Install New
Software.

5) In the Available Software
dialog, choose the SAPUI5
update site you just created.
Select the parameters:
Show only software
applicable to the target
environment, Contact all
update sites during install to
find required software, and
Hide items that are already
installed. If you scroll down
in the list of available
software, you should find
the UI development toolkit
for HTML5.



13

6) Confirm the items to install

7) Accept the license
agreement:

8) Depending upon your
network connection speed,
it can take several minutes
to complete the installation.

14



9) Near the end of the
installation, the process
might stop and make you
confirm that you want to
install the unsigned content

10) Upon completion of the
installation you must restart
SAP HANA Studio

You have completed the
initial setup!



You are now able to:

Configure the HANA Client Connection
Setup the Development Perspective
Install SAPUI5



15

EXERCISE 1 SETUP OF A PROJECT



Objective

In this exercise, you will learn the basics of creating a workspace and creating an XS project which you will use for the
remainder of this workshop.



Exercise Description

Create a workspace which is linked to the HANA Server
Create a project which is linked to the workspace
Create a schema
Create access control files
Create a role
Create a HelloWorld.html file to test your setup


16

EXERCISE 1 SOLUTION

Explanation Screenshot
Create a group package
1) Expand the workshop
package under the Content
folder. There should be
session specific packages
already created for you.
Because this hands-on
session will be given
multiple times, we will use
different session letters to
separate each classs work.
The session instructor will
tell you what session
package to use for your
session. For this example
document we will use
session x. Right-click on the
session package and
choose New, then
Package.

2) In the package dialog, you
will create a package for
your group. The group
numbers will be provided by
the instructor. This ensures
that every attendee has a
unique namespace for their
work. All the content you
create today will then be
placed within this unique
session/group package
hierarchy. Enter the name
of the package as your
group number.

For example, if the
assigned group number is
00 and your session
package is sessionx, then
the complete package
name would be
workshop.sessionx.g00.
That is
workshop<dot>sessionx<d



17

ot>g00. You will use this
same naming convention
throughout the rest of the
exercise document. Click
OK.
Create a Repository
Workspace
1) Switch to the SAP HANA
Repositories view. Click
the icon for Create
Repository Workspace.

2) Select the system entry
you created previously.
Enter the name of the
workspace as Workshop.



18

3) Choose any directory on
your local drive, for
example, you could use the
hdbstudio folder under your
documents folder. Click
Ok.

4) Click Finish.



19

5) You should now see the
new workspace in the SAP
HANA Repositories view.

Create a XS Project
1) Move to the Project
Explorer view, and right-
click in the white space.
Choose New, then
Other.

2) Browse to SAP HANA
Development and choose
XS Project. Then click
Next.

20

3) Enter the name of the
project as Exercises and
choose Finish

4) Your project should now be
visible in the Project
Explorer but still needs to
be connected to your HANA
Server. Right click on the
project and choose Team,
then Share Project.



21

5) Based on your installed
plug-ins, you may not get
the following dialog. If you
do receive the following
dialog, choose SAP HANA
Repository and click Next.

6) In the Share Project dialog,
choose the Repository
Workspace you created in
the previous steps.
Uncheck Add project folder
as sub-package. Then click
Browse so that you can
select the package to place
your project in.

22

7) Navigate through the
Repository hierarchy to
workshop -> your session
folder -> your group folder.
Select your group
folder/package and then
press OK.

8) Confirm your project
sharing settings and then
press Finish to share the
project.



23

9) Your project is now shared
with the repository.

Creating Sub-Packages
1) In order to prepare for the
development we will be
doing, we should create
sub-packages under your
project package. You can
create packages from the
project explorer simply by
creating folders.

Right mouse click on the
project name and choose
New->Folder

2) Create a folder named data

24

3) Repeat this process for
folders named: models,
procedures, services, and
ui.

Creating Access Control
1) In this step we will learn the
basics of XSEngine access
control.

The first artifact we must
create is the .xsapp. The
XSAPP file is necessary for
exposing any content via
the XSEngine web server.

Begin by right mouse
clicking on the root of your
project and choosing New-
>File



25

2) Create a file named .xsapp.
This is file with only the
extension. This way you
can only have one file per
folder. This same naming
concept is repeated with
other artifacts which must
only exist once per folder.
The names of the individual
development artifacts dont
need to be unique because
the package hierarchy also
functions as the namespace
and web server path

3) The default configuration of
HANA Studio might have
the .xsapp file open in
Notepad rather than the in-
place editor. If so, simply
close Notepad.

4) The newly created file is
visible in your Project
Explorer. The icon (grey
diamond) for the file
signifies that this object
exists on the client side and
has been committed to the
HANA Repository but is not
yet active.

The file is automatically
opened in an editor. This
particular development
artifact doesnt actually
need any content in it. You
can close the editor.
26

5) All objects are stored in an
inactive state when first
committed. Therefore
before this artifact can be
used on the server it must
be activated. Choose
Team->Activate from the
parent folder ( press the
activate button on the
toolbar or use the keyboard
shortcut Ctrl + F3). This will
activate all inactive objects.
Individual object activation
is also possible.

Once successfully
activated, the icon next to
the object will change to an
orange cylinder.

6) Next you need to create an
access control file. With this
object you can set the
required privilege, if the
package is exposed via
HTTP, the allowed
authentication mechanisms,
and default file for a
package. Unlike the .xsapp
and .xsprivileges files which
are generally setup once at
the root of a project folder;
the .xsaccess files can be
placed at many levels of the
package hierarchy and
override the higher levels.

Create a new file in the root
of your project named
.xsaccess.


7) If this file opens in Notepad,
close Notepad. To open in
the in-place editor, right
mouse click on the object
and choose Open With -
>Text Editor



27

8) For this root .xsaccess file,
set exposed to true and
define the authentication
mechanisms Basic.

You can access the solution
code here if you have
difficulties:
http://<host>:<port?/worksh
op/admin/ui/exerciseMaster/
?workshop=xs&sub=EX1_1

Save and activate this file.


Creating and running a Hello
World HTML page from our
Project
1) Finally we want to add a
simple hello world html file
to our application in order to
test the security and setup
of our project. We could do
this manually from the
HANA Studio project, but
this also an opportunity to
try out the new Browser
Based IDE the SAP
HANA Web-based
Development Workbench.

2) Input URL for your HANA
system
http://<hostname>:80XX
where XX is your System
Number. Then the path to
the HANA Web Workbench
(/sap/hana/xs/ide/). The full
URL for this system is:
http://<hostname>:<port>/s
ap/hana/xs/ide/

28

3) Input the same user name
and password you used to
logon to the HANA System
via the Studio

4) The Web Workbench has
the same repository tree as
we have access to in the
HANA Studio. The
difference here is that we
dont check out projects,
but instead directly edit and
save objects. Commit and
Activate are both
performed upon save.



29

5) The Web Workbench also
has some project wizards.
Expand the content tree for
workshop, your session
folder, and then select your
group folder. Then choose
Project -> Project
Templates ->Create Hello
World Project.

6) In the Create new Folder
dialog, input the full
repository path to your
group folder plus a new
folder named HelloWorld.
Path should be
/workshop/session<session
id>/g<group
number>/HelloWorld.

Then press OK.

30

7) Your group folder now
contains a sub-folder
named HelloWorld with
basic html and xsjs (Server
Side JavaScript) examples.

8) Right mouse click on the
index.html file in the
repository tree and choose
Execute File in Browser
Window in order to test it.



31

9) The index.html file should
open in a new browser
window. When you press
the Call Backend button it
will make an AJAX call to
the HANA Server and read
your User ID.

This simple test tells us
that your project, role and
access control files are all
setup properly.

10) If you return to the HANA
Studio and your Project in
the Project Explorer; you
can right mouse click and
choose Team ->Check Out

32

11) All the content created in
the Web Workbench is now
copied into our local
project. This allows you to
move between either
development environments
as you work.

Creating a Hello World HTML
test manually
1) The alternative to the
wizard would be to create a
simple HTML file so that we
have something which we
can execute from the web
browser in order to test our
access control. Begin by
creating a new file called
HelloWorld.html in the root
of you project.



33

2) Place the following HTML
code into the new file. This
should create a simple
HTML5 page based upon
the SAPUI5 framework with
a single Button (we will
learn much more about
SAPUI5 in later exercises).
When the button is pressed
it should disappear.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address:
http://<host>:<port>/worksh
op/admin/ui/exerciseMaster/
?workshop=xs&sub=EX1_2




3) Save and then activate your
new content.

4) Launch your web browser.
The URL path matches your
folder/package structure. It
would be
http://<host>:<port>/worksh
op/session#/g99/HelloWorld
.html where # is your
session id and 99 is your
group number. For
example if your session
letter was x and your group
number was 00 then the
URL would be:
http://<host>:<port>/wo
rkshop/sessionx/g00/H
elloWorld.html

You will be prompted for
authentication. Use your
current HANA System
Username and Password.





34

5) The URL path and resource
names for the XSEngine
are case sensitive.
Therefore a common
mistake of removing the
case when typing the URL
would result in the following
error message

Creating a database Schema
1) In the past, database
objects could only be
created via SQL directly in
the database catalog.
However this meant they
couldnt be transported via
delivery units like all other
repository objects. As part
of HANA Native
Development, we now have
tools to create database
objects via a repository
representation which
generates the catalog
objects upon activation.

We will create all of our
database objects within the
data folder of our project.
This simply helps keep the
various parts of our
application separated for
easier use and
maintenance.



35

2) First we will need a
database schema to hold all
of our database tables and
various other catalog
objects. Begin by creating a
file named
HANA_WORKSHOP<Sessi
on ID>_<Group
Number>.hdbschema. For
this example this would be
HANA_WORKSHOPX_00.h
dbschema.

3) The syntax of the schema
document is really quite
simple. Its:
schema_name=<your
schema name>;. Follow
the same pattern as the
filename for the creation of
your schema.
HANA_WORKSHOP<Sessi
on ID>_<Group Number>

For this example this would
be
HANA_WORKSHOPX_00

Save and Activate this file.


36

4) Expand the SAP HANA
System Library node in your
project and refresh the
Catalog folder. You will see
the new schema; however
you dont actually have
access to this Schema yet.
The activation of the
Schema was done by the
repository and consequently
the user SYS_REPO owns
the Schema. This is true of
all database objects created
in this new repository
approach. Next we will
create a repository role and
grant it to our user. Only
then will we have
authorization to see the
objects which we are
creating in this exercise.

Creating a repository role
1) Similar to the way that
catalog objects now have a
repository representation,
roles have a similar artifact.
In this step we will create
roles using this new
approach and grant this role
to our users.

The role object has an
Eclipse Wizard to help with
the creation of new roles.
Begin the process by
choosing New->Other




37

2) In the Wizard, under SAP
HANA Development,
choose Role.

3) Place the new role in the
data folder of your project.
Name the role user.

4) This creates a user.hdbrole
file and inserts the skeleton
of the role definition into the
edit.

38

5) Replace the package name
placeholder with your
exercise package name:
workshop.session<session>
.g<group number>.data.
For example if this were
session X and you were
group number 00, the
package value would be:
workshop.sessionx.g00.d
ata.

6) In your role definition, grant
select access to your
Schema:
HANA_WORKSHOP<sessi
on>_<Group Number>. For
example if you were in
Session X and Group
Number 00, your schema
would be named
HANA_WORKSHOPX_00.

7) Create a second role using
the same steps. Name this
second role admin.

8) Using the extends role
syntax, make your admin
role inherit from the user
role

9) Expand the Schema access
to include SELECT,
INSERT, UPDATE,
DELETE, and DROP

10) Save and activate both new
roles.



39

Grant the Role
1) We need only grant this role
to our user. Open the SQL
Console by right mouse
clicking on the SAP HANA
System Library node in your
project and choosing SQL
Console

2) You will need to call a
SQLScript Procedure to
perform the grant. This
procedure will run as
SYS_REPO and therefore
can grant the role to your
user (note: Access to
execute this procedure
should be extremely limited
since it gives anyone who
has it great power). The
Procedure you need to call
is
GRANT_ACTIVATED_ROL
E which has two input
parameters ROLENAME
and USERNAME.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X1_3



40




3) Your user now has the
assigned role

You have completed the
exercise!



You are now able to:

Create a connection to the HANA server in HANA Studio
Create a workspace which is linked to the HANA Server
Create a project which is linked to the workspace
Create a schema
Create access control files
Create a role
Create a HelloWorld.html file to test your setup



41

EXERCISE 2 CREATING DATABASE OBJECTS VIA THE REPOSITORY


Objective

In the past, database objects could only be created via SQL directly in the database catalog. However this meant they
couldnt be transported via delivery units like all other repository objects. As part of HANA Native Development, we
now have tools to create database objects via a repository representation which generates the catalog objects upon
activation.



Exercise Description

We create a schema to hold all of our database objects. Next we will use the new development objects (new as of
SPS6) hdbdd which utilizes the CDS syntax to define reusable types, structures and tables. We will also look at the
legacy way of creating tables with hdbtable. We will create database views via hdbview.

For example:
Create a HDBDD object
Use CDS Syntax to define types, structures and tables
Create a HDBTABLE object
Create a HDBVIEW object
Setup Automatic Table Data Loads


42

EXERCISE 2 SOLUTION

Explanation Screenshot
Creating the hdbdd
development artifact
1) We now want to create
two database tables one
for purchase order
headers and one for
items. Both of these
objects will be created via
a single development
object called
PurchaseOrder.hdbdd.

Begin this process by
right mouse clicking on
the data folder in your
project and choosing New
-> Other.

2) In the New wizard,
expand the SAP HANA
Development folder and
choose DDL Source File.
Then press Next.



43

3) Verify that the data folder
is selected. Type the
filename PurchaseOrder.
The file extension hdbdd
will be added
automatically for you.
Finally, press Finish.

4) The hdbdd file is opened
in the editor with the
correct namespace and
context already entered
for you.

5) Next we need to tell the
HDBDD file which
schema all objects should
be created within. Add a
@Schema note after the
namespace but before the
context and supply the
name of the Schema you
created in the previous
exercise:

HANA_WORKSHOP<Ses
sion ID>_<Group
Number>. For this
example this would be
HANA_WORKSHOPX_00
.


44

Defining reusable types and
structures
1) First we need to define
some reusable elemental
types. These will later be
used to define the data
type of individual columns
in our tables.

Create element types for
BusinessKey, SDate,
CurrencyT, AmountT,
QuantityT, UnitT, and
StatusT.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_1

2) We can also create
reusable structures with
multiple fields. This is
useful when the same
sets of fields are repeated
in multiple tables. Create
a reusable structure for
History with
CREATEDBY,
CREATEDAT,
CHANGEDBY, and
CHANGEDAT fields.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exerci
seMaster/?workshop=xs&
sub=EX2_2




45

Defining database tables
1) The syntax for creating
Entities is similar to types.
Entities will become
database tables when
activating the hdbdd file.
Create a purchase order
entity with these fields and
types:

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_3


2) Repeat this process for
the Item Entity.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exerci
seMaster/?workshop=xs&
sub=EX2_4


3) Here is the complete
source code for your
hdbdd file.
namespace workshop.sessionx.g00.data;
@Schema: 'HANA_WORKSHOPX_00'
context PurchaseOrder {

type BusinessKey : String(10);
type SDate : LocalDate;
type CurrencyT : String(5);
type AmountT : Decimal(15,2);
type QuantityT : Decimal(13,3);
type UnitT: String(3);
type StatusT: String(1);

Type HistoryT {
CREATEDBY : BusinessKey;
CREATEDAT : SDate;
CHANGEDBY : BusinessKey;
CHANGEDAT : SDate;
};

@Catalog.tableType : #COLUMN
46

Entity Header {
key PurchaseOrderId: BusinessKey;
History: HistoryT;
nullable NoteId: BusinessKey;
PartnerId: BusinessKey;
Currency: CurrencyT;
GrossAmount: AmountT;
NetAmount: AmountT;
TaxAmount: AmountT;
LifecycleStatus: StatusT;
ApprovalStatus: StatusT;
ConfirmStatus: StatusT;
OrderingStatus: StatusT;
InvoicingStatus: StatusT;
};

@Catalog.tableType : #COLUMN
Entity Item {
key PurchaseOrderId: BusinessKey;
key PurchaseOrderItem: BusinessKey;
ProductId: BusinessKey;
nullable NoteId: BusinessKey;
Currency: CurrencyT;
GrossAmount: AmountT;
NetAmount: AmountT;
TaxAmount: AmountT;
Quantity: QuantityT;
QuantityUnit: UnitT;
DeliveryDate: SDate;
};

};
4) Save and activate your
hdbdd file.



47

5) Open the SAP HANA
System Library in your
project and expand the
node for your Schema.

Within Procedures->Table
Types you should find the
structure for your HistoryT
type.

Within Tables you should
both your
PurchaseOrder.Header
and PurchaseOrder.Item
tables.

6) You can double click on
any of these objects to
open their definition.

48

7) For this workshop, we
have created an
application which will verify
the tables in your schema
and input some random
test data for you.

Run this application from
http://<hostname>:<port>/
workshop/solution/ui/cdsT
est.html




8) Input your Schema name
and press Create Data.

HANA_WORKSHOP<Ses
sion ID>_<Group
Number>. For this
example this would be
HANA_WORKSHOPX_00.



49

9) The tables in this page will
then display the newly
inserted data in your
header and item tables.

10) You can return to the
HANA Studio and browse
the data from there as well
by choosing Open Data
Preview

50

11) The same data from the
web application is now
displayed in the data
preview tool of HANA
Studio.

(Optional) Creating tables
via hdbtable
1) HDBDD was first
introduced in SP6. There
is an alternative
development object called
hdbtable which can also
be used from SP5 and
forward to create database
tables.

We now want to create two
database tables using this
alternative approach.
Begin by creating a new
file named
header.hdbtable



51

2) Here you need to supply
the schema name from the
previous step, the table
type (COLUMNSTORE),
all the table columns, and
the primary key. Use the
following fields:
i. OrderId type NVARCHAR length 10
ii. CreatedBy type NVARCHAR length 10
iii. CreatedAt type DATE
iv. Currency type NVARCHAR length 5
v. GrossAmount type Decimal length 15,2


3) Here is the complete table
definition

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_5


4) Repeat the process now
creating an item table
(item.hdbtable)

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_6


i. OrderId type NVARCHAR length 10
ii. OrderItem type NVARCHAR length 10
iii. ProductId type NVARCHAR length 10,
iv. Quantity type DECIMAL length 13,3
v. QuantityUnit type NVARCHAR length 3
vi. DeliveryDate type DATE

5) Save / Activate both of
your hdbtable files.

52

6) We were all able to use
very common table names,
because the package
hierarchy is used as a
namespace on the front of
the generated table. You
may need to refresh the
Tables folder in order to
see the new tables.

Creating Sequences
1) With the tables we
created, we use a unique
order id number as the
primary key. Therefore we
need a sequence to have
an auto incrementing
unique id generated for us
as we insert new data

Create a new file named
orderId.hdbsequence



53

2) Create a non-cycling
sequence within your
schema starting from
200000000 and ending
with 299999999. Make it
dependent upon your
header table with the full
package id on the front of
the header table name.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_7



3) Save / Activate your
sequence file.


54

SQL Views
1) Although most of the views
you create in HANA should
be modeled views
(Attribute, Analytic, or
Calculation views); it is
also possible to create
simple SQL views. We
follow a similar process as
to the previous steps to
create SQL views as a
repository file.

Create a new file named
ordersExt.hdbview

2) The syntax of this view file
is largely comprised of the
SQL Statement used to
create the join for the view.
Use the following syntax to
create a view between the
header and item tables of
the sample model. Also
because this SQL
Statement is embedded
within a JSON notation
syntax, the quotes inside
the SQL statement must
be escaped with a
backslash \.

Note: Due to the
complexity of this code
snippet, we highly
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_8




55

3) You can test the output of
your view from the Catalog
just as we learned to do
earlier with tables.

Automatic Table Data Loads
1) You may want to deliver
an initial set of data within
a table particular a
configuration table. In this
exercises we will learn
how to create automatic
data load configuration
and the accompanying
CSV files for just such a
situation.

The data load for table
requires two files 1. A
csv (comma separated) file
which holds the data you
want to load. 2. A hdbti file
which specifies the target
table for a source csv file.


56

2) For the header table we
created earlier in this
exercise, want to begin by
creating a csv file named
header.csv in the data
folder of your project.

3) By default, HANA Studio
might try to open CSV files
in Microsoft Excel.
However Excel creates
CSV files which arent
technically compatible with
this data load mechanism.
Therefore we will close
Excel and instead open
the header.csv file in a
plain text edit via Open
With -> Text Editor

4) Fill in two records into the
CSV file for header
records.

Note: You cut and paste it
from this web address
http://<hostname>:<port>/
workshop/admin/ui/exercis



57

eMaster/?workshop=xs&s
ub=EX2_9

5) Repeat this process for a
item.csv file.

Note: You cut and paste it
from this web address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_10



6) Now create a single
control file named
Purchase.hdbti. Here we
maintain the link between
the two previously created
csv files and the target
tables.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/
workshop/admin/ui/exercis
eMaster/?workshop=xs&s
ub=EX2_11


7) Save / Activate all 3 files
youve created so far.

58


8) You can return to the
Navigator view and browse
the data. From the tables
or views within the Catalog
folder, you can use either
the Open Content or Open
Data Preview to view the
data.

You have completed the
exercise!



You are now able to:

Create a HDBDD object
Use CDS Syntax to define types, structures and tables
View your generated catalog tables
Create Sequences
Create SQL Views
Configured Automatic Table Data Loads



59

EXERCISE 3 MODELING VIEWS

Objective

Although earlier we created a database SQL view, most views should be created as HANA specific view types
Attribute Views, Analytic Views, and Calculation Views. In this exercise, we will utilize these modeling tools to create
some more advanced views.

You created a basic header and item table earlier as well. Rather than spending time creating a larger series of tables
and sample data, the workshop will leverage the standard EPM (Enterprise Procurement Model) demo model which is
delivered as part of SHINE (SAP HANA Interactive Education). This model already exists in the workshop system
under the schema SAP_HANA_EPM_SP6 and contains Sales Orders, Purchase Orders, supporting master data, and
currency conversion and unit of measure base tables.





Exercise Description


Create an Attribute View
Create an Analytic View

60

EXERCISE 3 SOLUTION

Explanation Screenshot
Creating an Attribute View
1) In the models sub-package
of your workshop package,
create a new attribute view
based upon the expanded
information for the
products. This will require
joining the products, texts,
businessPartner, and
address tables.

From the right mouse click
on the models package,
choose New -> Other

2) In the New Wizard, expand
the SAP HANA Modeler
folder. Select Attribute
View and press Next.



61

3) Create an Attribute View
named AT_PRODUCTS.

4) To add tables to the data
foundation of your view,
you can drag and drop
them from the
SAP_HANA_EPM_SP6
Schema.

62

5) Add MasterData.Products,
MasterData.BusinessPartn
er, MasterData.Addresses
and Util.Texts (twice) to
your data foundation

6) Using the Add to Output
option from the context
menu, add the
PRODUCTID,
TYPECODE, CATEGORY,
CURRENCY, and PRICE
fields from the products
table to the output





63


7) Optionally, you can change
the name of a column as it
becomes part of the view.
For example you might
change CATEGORY to
ProductCategory.

64

8) We need to define a key for
the view. We can do this
by selecting the
PRODUCTID column in the
Output and setting Key
Attribute to True.

9) Drag and drop the NAMEID
column from the products
table to the TEXTID
column of the texts table.
Change the Join Type to
Text Join and select
Language as the Language
Column.


10) Add the TEXT column to
the output and change the
column name to
ProductName.



65

11) Create a similar join from
the DESCID column of
Products to the second
instance of the texts table.
Name the Text output
column ProductDesc.

12) Create a Referential join
between SUPPLIERID of
the product table and the
PARTNERID column of the
businessPartner table.
Add PARTNERID and
COMPANYNAME to the
output.


13) Add a Referential join
between the ADDRESSID
of the businessPartner
table to the ADDRESSID of
the addresses table. Add
the CITY, POSTALCODE,
STREET, BUILDING, and
COUNTRY columns of
addresses to the output.


66

14) Save your model

15) Activate your model

16) To test your Attribute View,
choose Data Preview from
the model toolbar.

17) In the data preview, there
are many tools for
performing analysis on the
view data. For an initial
test choose Raw Data and
make sure your outlook
looks similar to the
following:

18) If you have problems
creating your view, you can
refer to a sample
implementation in the
package
sap.hana.democontent.ep
mSP6.models



67

Creating an Analytic View
1) Now we will create an
Analytic View which
combines purchase order
table data with the product
attribute view we created in
the previous step. Because
we have various currency
based amounts in our
source data, we will also
create a calculated column
which contains a currency
conversion.

Using the same steps as
the previous part of the
exercise; in your models
package, create a new
Analytic View


2) Name your new view
AN_PURCHASE_ORDER
S

68

3) Drag and drop the
AT_PRODUCTS attribute
view from the previous part
of the exercise into the
Logical Join of your new
view.

4) Add the Purchase.Header
and Purchase.Item tables
from
SAP_HANA_EPM_SP6 to
the Data Foundation of
your view



69

5) Create a 1:n referential join
between Header and Item
on the
PURCHASEORDERID
column

6) Using Add to Output, add
the column
History.CREATEDAT from
the Header table and the
PURCHASEORDERID,
PURCHASEORDERITEM,
PRODUCTID,
CURRENCY, and
GROSSAMOUNT columns
from the Item table

7) Create an input parameter
named
IP_O_TARGET_CURREN
CY.



70

8) Configure as shown with
type NVARCHAR length 3
with a Semantic type of
Currency. It should be
mandatory and have a
default value of USD.

9) From the Semantics
Scenario, Set the Default
Schema to
SAP_HANA_EPM_SP6:

10) Select the Logical Join box
in the Scenario. You can
then drag and drop the
PRODUCTID from the data
foundation to the ProductId
column of the
AT_PRODUCTS view
creating a 1:1 referential
join.




71

11) In the output, create a new
Calculated Column for the
common currency gross
amount.

12) Create a Calculated
Column named
ConvGrossAmount which
is a summarized measure
for the base column Gross
Amount. This involves
writing an Expression that
sets the base value of
GROSSAMOUNT.

72

13) In the Advanced tab of the
calculated column creation
screen, configure the
currency conversion. Use
the CURRENCY column
from the Header table as
the source currency and
the
IP_O_TARGET_CURREN
CY input parameter as the
target. Set the Exchange
Type to 1001 and for the
Conversion Date use the
History_CREATEAT
column of the Header
table. YOU MUST
SELECT THESE VALUES
FROM THE VALUE HELP
AND NOT TYPE THEM IN.


14) Return to the Semantics
Scenario and choose the
Auto Assign button to have
the system generate
proposals for your
attributes and measures. If
the Auto Assign fails, you
can manually set the
ConvGrossAmount and
GrossAmount as measures
and the other fields as
attributes.

15) The GROSSAMOUNT and
ConvGrossAmount should
both be Measures and all
other columns should be
attributes.

16) Save and Activate your
Analytic View.



73



17) Use the Data Preview to
test your View. You should
see an Input Parameter
dialog. You can keep the
default value of USD

18) You should see output
similar to this. In particular
check the values of the
GROSSAMOUNT and
ConvGrossAmount
Columns. In this workshop
system exchange rates
have only been maintained
for USD<->EUR; therefore
those would be the only
records with different
values in the
ConvGrossAmount column.



74

EXERCISE 4 USING SQLSCRIPT
Objective

In this exercise, you will create a SQLScript procedure and leverage CE functions to read data from two tables and
return the result set as output. You will then create a SQLScript procedure which uses imperative logic to read a
product from a table and determine the sale price. Next, you will learn how to debug SQLScript procedures using the
Debug perspective in SAP HANA Studio.

Next, you will explore the concepts of User Defined Functions(UDFs). You will create a table UDF which simply
retrieves some employee data from the database, and a scalar UDF which calculates the sale price of a product.
Currently, you can only create UDFs via the SQL Console. Only the runtime object exists in the catalog. Support for
storing UDFs in the repository is planned for a future support package.

Next, you will be introduced to the concept of triggers. A trigger is a special kind of stored procedure that automatically
executes when an event occurs on a certain table. First you will create two tables using CDS which you will use to
explore the concept. You will then create a trigger for a table called products, which will insert a new record into the
productsLog table. Currently, you can only create triggers via the SQL Console. Only the runtime object exists in the
catalog. Support for storing triggers in the repository is planned for a future support package.

Finally, you will learn how to create a database procedure proxy in ABAP which allows you to call a SQLScript
procedure directly from the ABAP application server.

Exercise Description

Creating a procedure leveraging CE functions
Create a SQLScript procedure using CE functions which read data from the business partner and address tables
and return the result set via an output parameter.
Test this procedure by calling it from the SQL Console.

Creating a procedure leveraging imperative logic
Create a SQLScript procedure using imperative logic which reads a product from the products table and determines
the sale price based on the category of the product.
Test this procedure by calling it from the SQL Console.

Debugging SQLScript Procedures
Open a procedure and set breakpoints
Create a debug configuration for the procedure
Debug the procedure using the debug perspective
Set and remove breakpoints
Evaluate input/output parameters and local variables.

Creating Table User Defined Functions(UDFs)
Create a table user defined function from the SQL Console
Test the table UDF from the SQL Console






75

Creating Scalar User Defined Functions(UDFs)
Create a scalar user defined function from the SQL Console
Test the scalar UDF from the SQL Console

Creating Triggers
Create two tables using CDS format.
Create a trigger for the products table
Execute an INSERT against the products table
Check the results in both the products table and the productLog table.





76

EXERCISE 4 SOLUTION

Explanation Screenshot
Creating a procedure
leveraging CE functions

1) Right-click on the
procedures folder and
choose New, then
Other.

2) From the SAP HANA
Development folder,
choose SQLScript
Procedure. Click Next.



77

3) Enter the name of the
procedure as
get_bp_addresses_by_ro
le and click Finish. The
.procedure file extension
will be added for you
automatically.

4) The SQLScript Editor will
be opened. Click on the
Local Table Types tab.

5) Create a table type called
tt_bp_addresses. Enter
the code shown here in
the Local Table Types
tab. Refer to the exercise
solutions & templates web
page if you wish to
copy/paste the code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_1
create type tt_bp_addresses as table (
PARTNERID nvarchar(10),
PARTNERROLE nvarchar(3),
EMAILADDRESS nvarchar(255),
COMPANYNAME nvarchar(80),
ADDRESSID nvarchar(10),
CITY nvarchar(40),
POSTALCODE nvarchar(10),
STREET nvarchar(60)
)
78

6) Next, click on the
SQLScript tab.

7) Enter the coding as
shown here. This
procedure uses CE
functions to retrieve data
from two database tables,
filter the data by partner
role, and join the results
into the output parameter.
Refer to the exercise
solutions & templates web
page if you wish to
copy/paste the code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_2

CREATE PROCEDURE get_bp_addresses_by_role (
in partnerrole nvarchar(3),
out bp_addresses tt_bp_addresses )
LANGUAGE SQLSCRIPT
SQL SECURITY INVOKER
--DEFAULT SCHEMA <schema>
READS SQL DATA AS

BEGIN
/*****************************
Write your procedure logic
*****************************/
lt_bp =
CE_COLUMN_TABLE("SAP_HANA_EPM_SP6"."sap.hana.democontent.epmSP6.data::EPM.MasterData.Busin
essPartner",
[PARTNERID, PARTNERROLE, EMAILADDRESS, COMPANYNAME, ADDRESSID]);

lt_bp_proj =
CE_PROJECTION(:lt_bp,
[PARTNERID, PARTNERROLE, EMAILADDRESS, COMPANYNAME, ADDRESSID],
'"PARTNERROLE" = :partnerrole' );

lt_address =
CE_COLUMN_TABLE("SAP_HANA_EPM_SP6"."sap.hana.democontent.epmSP6.data::EPM.MasterData.Addre
sses", [ADDRESSID, CITY, POSTALCODE, STREET]);

bp_addresses = CE_JOIN(:lt_bp_proj, :lt_address, [ADDRESSID],
[PARTNERID, PARTNERROLE, EMAILADDRESS, COMPANYNAME,
ADDRESSID, CITY, POSTALCODE, STREET]);
END;

8) Click Save.



79

9) Make sure that your
procedure is selected in
the project explorer and
click the Activate button.

10) Once the procedure is
activated, right click on
the SAP HANA System
Library node in your
project and choose SQL
Console.

11) In the SQL Console
window, enter the
following CALL statement.
Make sure to substitute
the session id and group
number in the package
name of this CALL
statement. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_3
call _SYS_BIC."workshop.session<x>.g<00>.procedures/get_bp_addresses_by_role"( partnerrole
=> '02', bp_addresses => ? );
12) Click the Execute button.

80

13) The results of the
procedure call are then
shown.

Creating a procedure
leveraging imperative logic

1) Use what you have
learned so far in this
exercise to create another
procedure called
get_product_sale_price.
In the SQLScript tab,
enter the following code
as shown here. This
procedure uses straight
SQL(SELECT statements)
and some imperative logic
constructs to determine
the sale price of a product
based on the product
category. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_4

CREATE PROCEDURE get_product_sale_price ( IN productid NVARCHAR(10),
OUT product_sale_price
SAP_HANA_EPM_SP6."sap.hana.democontent.epmSP6.data::EPM.Procedures.tt_product_sa
le_price" )
LANGUAGE SQLSCRIPT
SQL SECURITY INVOKER
--DEFAULT SCHEMA <schema>
READS SQL DATA AS
BEGIN
/*****************************
Write your procedure logic
*****************************/
declare lv_category nvarchar(40) := null;
declare lv_discount decimal(15,2) := 0;

lt_product = select PRODUCTID, CATEGORY, PRICE
from "sap.hana.democontent.epmSP6.data::EPM.MasterData.Products"
where PRODUCTID = :productid;

select CATEGORY into lv_category from :lt_product;

if :lv_category = 'Notebooks' then
lv_discount := .20;
elseif :lv_category = 'Handhelds' then
lv_discount := .25;
elseif :lv_category = 'Flat screens' then
lv_discount := .30;
elseif :lv_category like '%printers%' then
lv_discount := .30;
else
lv_discount := 0.00; -- No discount
end if;

product_sale_price =
select PRODUCTID, CATEGORY, PRICE,
PRICE - cast((PRICE * :lv_discount) as decimal(15,2))
as "SALEPRICE" from :lt_product;

END;


81

2) Save and Activate your
new procedure. Finally,
call the procedure from
the SQL Console using
the following CALL
statement. Make sure to
substitute the session id
and group in the package
name of this CALL
statement. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_5
call _SYS_BIC."workshop.session<x>.g<00>.procedures/get_product_sale_price"(
productid => 'HT-1000', product_sale_price => ?);

3) The results of the
procedure call are then
shown.

Debugging SQLScript
Procedures

1) Open the procedure which
you created in Exercise 3
by double-clicking it from
your project.

2) Click the Open
Perspective button.

82

3) Select the Debug
perspective and click Ok.

4) If you do not see any line
numbers in the procedure
editor, you can enable this
by right-clicking on the
space to the left of the
editor, and choose Show
Line Numbers.



83

5) Set breakpoints at lines 14,
18, 20, 32, and 37 by
double-clicking in the
space immediately to the
left of the line number.

6) From the toolbar, click the
down arrow next to the
Debug icon. Choose
Debug Configurations...

84

7) In the following dialog,
double click on SQLScript
Procedure.

8) Enter the name of the
debug configuration. This
can be any name, but it is
recommended to use
something which reflects
the procedure which is
being debugged. Choose
the radio button for
Procedure to Debug, and
click Browse.



85

9) Browse to the procedure
and select it. Click Ok.

10) Next, click on the Input
Parameters tab.

11) In this tab, all input
parameters for the
procedure will be listed.
Set the value of the input
parameter as shown here
and click Apply, then
Debug.

86

12) You will notice that the
debug session has been
initiated. Continue to the
next step.

13) Execution has stopped at
the first breakpoint.
Continue to the next step

14) Click the Resume button
to continue execution to
the next breakpoint. You
will see execution stop at
the next breakpoint.

15) On the variables tab,
evaluate the values of the
input/output parameters
and intermediate variables.
To view the contents of a
table, right click on it, and
choose Open Data
Preview



87

16) A new tab appears at the
bottom of the perspective
which lists all the rows of
the table.

17) Continue debugging to the
end of the procedure and
evaluate the variables as
you wish. Once debugging
is complete, you can
delete the terminated
debug session by clicking
the Remove All
Terminated Launches
button.

18) Return to the SAP HANA
Development perspective
by clicking the button.

Creating Table User Defined
Functions(UDFs)

1) From your project, right
click on the SAP HANA
System Library node, and
choose SQL Console.

88

2) In the SQL Console, enter
the code as shown here.
This function will execute
a SELECT(INNER JOIN)
statement against the
employee and address
tables and filter by a fuzzy
search on the last name.
Make sure to substitute
your session id and group
number in the schema
and function name in the
CREATE FUNCTION
statement. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_6

CREATE FUNCTION
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/get_employees_by_name
_filter"
(lastNameFilter nvarchar(40))
RETURNS table ( EMPLOYEEID NVARCHAR(10),
"Name.FIRST" NVARCHAR(40),
"Name.LAST" NVARCHAR(40),
EMAILADDRESS NVARCHAR(255),
ADDRESSID NVARCHAR(10), CITY NVARCHAR(40),
POSTALCODE NVARCHAR(10), STREET NVARCHAR(60))

LANGUAGE SQLSCRIPT
SQL SECURITY INVOKER AS

BEGIN
RETURN
select a.EMPLOYEEID, a."Name.FIRST",
a."Name.LAST", a.EMAILADDRESS,
a.ADDRESSID, b.CITY, b.POSTALCODE, b.STREET
from "sap.hana.democontent.epmSP6.data::EPM.MasterData.Employees"
as a
inner join
"sap.hana.democontent.epmSP6.data::EPM.MasterData.Addresses"
as b
on a.ADDRESSID = b.ADDRESSID
where contains("Name.LAST", :lastNameFilter, FUZZY(0.9));
END;
3) Click the Execute button.

4) Browse the catalog and
make sure your function
has been created. Make
sure you are browsing
your specific schema
which you created in
exercise 2. You may
have to refresh the folder.



89

5) Next, use your table UDF
in a SELECT statement in
the SQL Console. Enter
the code as shown here.
Make sure to substitute
your session id and group
number in the schema
and function name. This
SELECT statement is
calling the UDF and
passing the filter value *ll*
which should return a
table of employees whose
last names contain two
Ls. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_7
select * from
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/get_employees_by_name
_filter"('*ll*');
6) Next, click the Execute
button.

7) The results are then
shown.

8) Optional: You can drop
the function by simply
using a DROP
FUNCTION statement. If
you wish to drop your
function, enter the code
shown here, and click
Execute. Make sure to
substitute your session id
and group number in the
schema and function
name. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_8
drop function
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/get_employees_by_name
_filter";
90

Creating Scalar User Defined
Functions(UDFs)

1) Next, create a scalar UDF
which applies a discount.
In the SQL Console, enter
the code as shown here.
Make sure to substitute
your session and group
number in the schema and
function name in the
CREATE FUNCTION
statement. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMast
er/?workshop=xs&sub=EX
4_9
CREATE FUNCTION
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/apply_discount"(
im_price decimal(15,2),
im_discount decimal(15,2))
RETURNS result decimal(15,2)
LANGUAGE SQLSCRIPT
SQL SECURITY INVOKER AS
BEGIN
result := :im_price - ( :im_price * :im_discount );
END;

2) Click Execute.

3) Browse the catalog and
make sure your function
has been created. Make
sure you are browsing
your user schema which
should be exactly the
same name as the user id
which you logged on with.
You may have to refresh
the folder.



91

4) Next, use your table UDF
in a SELECT statement in
the SQL Console. Enter
the code as shown here.
Make sure to substitute
your session id and group
number in the schema
and function name.
Refer to the exercise
solutions & templates web
page if you wish to
copy/paste the code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_10
select PRODUCTID, CATEGORY, PRICE,
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/apply_discount"(PRICE
, 0.33 )
as "SalePrice" from
"sap.hana.democontent.epmSP6.data::EPM.MasterData.Products";
5) Click Execute.

6) The results are then
shown.

7) Optional: You can drop
the function by simply
using a DROP
FUNCTION statement. If
you wish to drop your
function, enter the code
shown here, and click
Execute. Make sure to
substitute your session id
and group number in the
schema and function
name. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_11
drop function
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/apply_discount";
92

Creating Triggers

1) First, create two tables
using CDS. Right click on
the data folder and
choose New, then
Other.

2) From the following dialog,
select the DDL Source
File object from under the
SAP HANA Development
folder. Click Next.



93

3) Enter the name of the file
as Product. Then click
Finish. The .hdbdd file
extension is added for you
automatically.

4) In the editor, enter the
following code as shown
here. Verify that the
namespace contains your
session id and group
number packages. Make
sure that the schema
name is the schema that
you created in exercise 2.
Refer to the exercise
solutions & templates web
page if you wish to
copy/paste the code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_12

namespace workshop.session<x>.g<00>.data;

@Schema: 'HANA_WORKSHOP<X>_<00>'
context Product {

@Catalog.tableType: #COLUMN
Entity products{
key ProductId: String(10);
Category: String(40);
Price: Decimal(15,2);
};

@Catalog.tableType: #COLUMN
Entity productLog{
key ProductId: String(10);
key DateTime: UTCDateTime;
key UserName: String(20);
LogText: String(500);
};

};

94

5) Click Save.

6) Click Activate.

7) Browse the catalog under
your schema and find the
two new tables under the
Tables folder. You may
have to refresh the folder.



95

8) From your project, right-
click on the SAP HANA
System Library node and
choose SQL Console.

9) In the SQL Console, enter
the following coding for
creating the trigger. Make
sure to substitute your
session id and group
number in the schema,
the name of the trigger,
the table in which it is
being created for and in
the INSERT statement.
Refer to the exercise
solutions & templates web
page if you wish to
copy/paste the code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_13
CREATE TRIGGER "HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/add_insert_to_log"
AFTER INSERT ON
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>.data::Product.products"
REFERENCING NEW ROW newrow FOR EACH ROW
BEGIN

INSERT INTO "HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>.data::Product.productLog"
VALUES(:newrow."PRODUCTID",
now(),
CURRENT_USER,
:newrow."PRODUCTID" || ' has been created');
END;
10) Click Execute.

96

11) Browse the catalog under
your user schema and
find the trigger under the
Triggers folder. You
may have to refresh the
folder.

12) Next, enter the following
code into the SQL
Console.. Make sure to
substitute your session id
and group number in the
schema and name of the
table. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_14

INSERT into
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>.data::Product.products"
values( 'ProductA', 'Software', '299.99');
13) Click Execute.



97

14) Next, enter the following
code into the SQL
Console.. Make sure to
substitute your session id
and group number in the
schema and name of the
table. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_15
select * from
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>.data::Product.products";
select * from
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>.data::Product.productLog";

15) Click Execute.

16) The results of the two
SELECT statements are
shown. You can see that
after an INSERT into the
products table, an entry
has also been created in
the productLog table as
well.


98


17) Optional: You can drop
the trigger by simply using
a DROP TRIGGER
statement. If you wish to
drop your trigger, enter
the code shown here, and
click Execute. Make sure
to substitute your session
id and group number in
schema and the trigger
name. Refer to the
exercise solutions &
templates web page if you
wish to copy/paste the
code.
http://<host>:<port>/works
hop/admin/ui/exerciseMas
ter/?workshop=xs&sub=E
X4_16
drop trigger
"HANA_WORKSHOP<X>_<00>"."workshop.session<x>.g<00>/add_insert_to_log";
You have completed the
exercise!
You are now able to:

Create and test a procedure leveraging CE functions to read data from the database.

Create and test a procedure leveraging imperative logic.

Set and remove breakpoints
Create a debug configuration
Debug a procedure using the Debug perspective
Evaluate input/output parameters and local variables

Create and test a table user defined function
Create and test a scalar user defined function

Create tables using CDS format
Create a trigger
Test the trigger




99

EXERCISE 5 ODATA SERVICES

Objective

Learn how to use the generic OData service generation framework in HANA. We will define simple OData services,
OData services with relationships, and OData services with update capabilities.

The XSEngine contains a special tool for the creation of OData Services without needing to perform server side coding.
To create an OData service from an existing HANA table or view, you need only define an XSODATA service definition
file.




Exercise Description


Create a Basic OData Service
Create an OData Service with relationships
Create an OData Service with Create/Update/Delete operations and SQLScript exits

100

EXERCISE 5 SOLUTION

Explanation Screenshot
Creating a Simple OData
Service
1) We will create all of our
services objects within the
services folder of our
project. This simply helps
keep the various parts of
our application separated
for easier use and
maintenance.

Create a new file called
businessPartners.xsodata
in the services package of
your project.

2) The editor might cause this
file to open in a new
window with Notepad.






101

3) If this does happen, simply
close this window. Then
right click on the file and
choose Open With -> Text
Editor.

4) We want to define an
OData service to expose
the business partner table.
The syntax of the
XSODATA service is
relative easy for this use
case. We need only define
a namespace (your
package path), the name
of the HANA Table we will
base the service from (
sap.hana.democontent.e
pm.data::businessPartne
r) and the name of the
OData entity
(BusinessPartners).
Therefore the content of
the XSODATA file would
be.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/w
orkshop/admin/ui/exercise
Master/?workshop=xs&sub
=EX5_1



102

5) Save and activate the file.

6) Now run the service from
Chrome. The URL to run
your service would be
http://<hostname>:<port>/w
orkshop/session#/gXX/servi
ces/businessPartners.xsoda
ta where # is your session
id and XX is your group
number. For example if
your session was x and
your group number was 00
then the URL would be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/servi
ces/businessPartners.xsoda
ta

The resulting document
describes the service
entities. We only had the
one entity named
BusinessPartners.



103

7) You can now adjust the
URL slightly and add the
$metadata parameter to the
end of it.
The URL to run your service
would be
http://<hostname>:<port>/w
orkshop/session#/gXX/servi
ces/businessPartners.xsoda
ta/$metadata where # is
your session id and XX is
your group number. For
example if your session
letter was X and your group
number was 00 then the
URL would be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/servi
ces/businessPartners.xsoda
ta/$metadata

You can see the field
descriptions for all the
attributes of the OData
service.

8) In order to view the data of
the entity, you would
append BusinessPartners
to the end of the URL:

http://<hostname>:<port>/w
orkshop/sessionx/g00/servi
ces/businessPartners.xsoda
ta/BusinessPartners

You are now able to see the
data from the
businessPartner table.

104

9) You can also experiment
with standard OData URL
parameters like $top, $skip,
or $filter. These options are
interpreted and handled by
the OData service of the
XSEngine for you. You get
complex service handling
without any coding. For
example the following URL
would return only three
business partner records
and would skip the first five
records. Such parameters
are helpful when
implementing server side
scrolling, filtering, or sorting
in table UI elements.

http://<hostname>:<port>/<
workshop/sessionx/g00/ser
vices/businessPartners.xso
data/BusinessPartners?$to
p=3&$skip=5

10) The direct test of the OData
service within a browser is
fine for development
testing; but this is hardly
how end users will interact
with the service. The OData
service is normally called
from within a web page. We
have a test web page which
can dynamically call your
service. It can be accessed
at the URL:

http://<hostname>:<port>/w
orkshop/solution/ui/odataTe
st.html

The first tab lets you
test this simple service.
The other tabs will be
used to test later parts
of this exercise. Fill your
Service Path and Entity
name and press
Execute Service to test
your service.



105

Creating an OData Service
with an Entity Relationship
1) The first example of this
exercise was very
simplistic because it
only exposed one
database table as a
single entity. Often you
need to also represent
relationships between
multiple entities. For
example we might want
to build an OData
service which has both
the Purchase Order
Header and Items. For
this we would build a
1:many relationship
between the two
entities.


2) Returning to HANA
Studio, you should now
create a new OData
service named
purchaseOrders.xsodat
a and extend it to
include the
sap.hana.democontent.
epmSP6.data::EPM.Pur
chase.Header and
sap.hana.democontent.
epmSP6.data::EPM.Pur
chase.Item tables. Next
create a navigation
1:many association.
The new content of the
definition file should
look like this:

Note: if you dont want
to type this code, we
recommend that you cut
and paste it from this
web address
http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX5_2

Save and Activate the
service.

106

3) Test using the same
steps as in the previous
section of this exercise.
The URL to run your
service would be
http://<hostname>:<port
>/workshop/session#/g
XX/services/purchaseO
rders.xsodata where #
is your session letter
and XX is your group
number. For example if
your session letter was
x and your group
number was 00 then the
URL would be:

http://<hostname>:<port
>/workshop/sessionx/g0
0/services/purchaseOrd
ers.xsodata

Notice that the base
service definition now
has two entities

4) The Header data now
has a hyperlink
relationship to the item
entity



107

5) Once again you can
return to the test web
page which can
dynamically call your
service. It can be
accessed at the URL:

http://<hostname>:<port
>/workshop/solution/ui/o
dataTest.html

The second tab (Multi-
Entity Read) lets you
test this multi-entity
service. Fill your
Service Path and Entity
name and press
Execute Service to test
your service. Select a
PO Header Record to
load the correct items
for the header.

Creating an OData Service
with Create Operation and
SQLScript Exit
1) Create another OData
service named
user.xsodata for table
sap.hana.democontent.
epmSP6.data::EPM.Us
er.Details. This time,
also link the create
operation to the
SQLScript
sap.hana.democontent.
epmSP6.procedures::us
ersCreateMethod. This
will be the exit code that
performs validation
before the insert of the
new record.

Note: if you dont want
to type this code, we
recommend that you cut
and paste it from this
web address
http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX5_3


108

2) We are sharing the
same SQLScript
procedure for creation,
but here is the code of
this procedure for you
to study.


CREATE PROCEDURE SAP_HANA_EPM_SP6.usersCreateMethod(IN row
SYSTEM."sap.hana.democontent.epmSP6.data::EPM.User.Details",
OUT error
SYSTEM."sap.hana.democontent.epmSP6.data::EPM.Procedures.tt_err
ors")
LANGUAGE SQLSCRIPT
SQL SECURITY INVOKER AS
BEGIN
/*****************************
Write your procedure logic
*****************************/
declare lv_pers_no string;
declare lv_firstname string;
declare lv_lastname string;
declare lv_e_mail string;

select PERS_NO, FIRSTNAME, LASTNAME, E_MAIL
into lv_pers_no, lv_firstname,
lv_lastname, lv_e_mail
from :row;

if :lv_e_mail = '' then
error = select 500 as http_status_code,
'Invalid email ' || lv_firstname as
error_message,
'No Way! E-Mail field can not be empty' as
detail from dummy;
else
insert into
"sap.hana.democontent.epmSP6.data::EPM.User.Details"
values
("sap.hana.democontent.epmSP6.data::purchaseOrderId".NEXTVAL,
lv_firstname,
lv_lastname, lv_e_mail);
end if;

END;



109


3) Once again you can
return to the test web
page which can
dynamically call your
service. It can be
accessed at the URL:

http://<hostname>:<port
>/workshop/solution/ui/o
dataTest.html

4) From the third tab
(Creation) you can call
your service and create
a record with the entries
you supply. Create a
record with all fields
filled in. Then try
creating a record
without an email
address and verify that
you receive the custom
error message from the
SQLScript procedure.

You have completed the
exercise!



You are now able to:

Created a Simple OData Service
Created an OData Service with Multiple Entities
Created an OData Service with CRUD operations and a SQLScript Exit
110

EXERCISE 6 SERVER SIDE JAVASCRIPT

Objective

XSJS or Server Side JavaScript is used to create custom services and is the main imperative and control flow logic
layer in HANA Native Applications. In this exercise we will create simple XSJS Services, access the database and
format data with XSJS services and user the new outbound connectivity features in SPS6 to call external services.

The XSODATA services are a very fast way to build OData services for existing database artifacts. However,
sometimes you need more control over the processing logic of the service handler or a custom output format. For this
reason, we can also write custom service handlers using server side JavaScript.


Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise.

For example:

Create a Hello World XSJS Service
Create an XSJS Service with database access and custom output format
Create an XSJS Service with outbound HTTP Connectivity
Debug an XSJS Service




111

EXERCISE 6 SOLUTION

Explanation Screenshot
Creating a Hello World XSJS
Service
1) Use New->Other.

2) From the New Wizard,
choose XS JavaScript
Source File from the SAP
HANA Development folder

112

3) Select the services folder.
Name your new source file:
HelloWorld.xsjs.

4) We want to create a service
which uses the Database
APIs to call a select from
the dummy table and
outputs the results along
with a Hello World text
string.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=x&sub=E
X6_1

Save and Activate your new
service.




113

5) Test the service in your
browser. The URL to run
your service would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/services/HelloWo
rld.xsjs. For example if your
session letter was x and
your group number was 00
then the URL would be:

http://<hostname>:<port>/w
orkshop/sessionx/g00/servi
ces/HelloWorld.xsjs



Creating an XSJS Service
with custom output format
1) Now we want to extend the
concepts of the XSJS
service from the first half of
this exercise. Weve already
seen how we can use our
own custom logic in an
XSJS service. Next we
want to see how we can
use a custom output format.
We will also see how we
can perform SQL to use
data from the database, but
manipulate or format that
returned data. The final
result will be a service
which reads the Business
Partner data but returns it in
a tab delimited format ready
to open in Microsoft Excel.
Using the same steps as
before use the file wizard to
create another xsjs service
named exercise.xsjs.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X6_2

We will explain it block by
block in a moment.


114

2) First weve added an
import to a reusable library.
We can create such
libraries and share them
between projects and
services. This particular
library helps lookup
reusable language
independent texts from the
database. We will use it to
fill in the column headers of
our Excel export
$.import("sap.hana.democontent.epmSP6.services", "messages");
var MESSAGES = $.sap.hana.democontent.epmSP6.services.messages;
3) We add a new function to
handle the data retrieval
from the Business Partner
Table and formatting into
Text Tab Delimited. The
XSJS server side logic
contains various built-in
APIs (referenced via the $
object). Here you see the
usage of the trace object
and the db (database)
objects. We build the SQL
Query and pass it to the
database using syntax very
similar to JDBC or ODBC.
In reality, the XS engine
communicates directly with
the HANA Index server to
retrieve this data

Next you see that we can
build a custom formatted
string in order to get the
text, tab-delimited output
we want. Finally we can
also set any response
headers, which is
necessary to control the
Content-Disposition so the
output acts like a file
download from the
browser.

4) This block is actually the
entry point to the service
handler but must appear
after all referenced
functions. Here we can
query the request URL and
determine which action to
take. This way a single
XSJS file might have
multiple services or query
parameters. We will look
for the URL parameter



115

called cmd to decide which
path to take. These are
just examples, as you have
complete control over the
definition of all URL
parameters and how they
are handled by the service
5) Save and Activate your
service.

6) Test the application in your
browser. The URL to run
your service would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/services/exercise.
xsjs?cmd=Excel . For
example if your session
letter was x and your group
number was 00 then the
URL would be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/servi
ces/exercise.xsjs?cmd=Exc
el


116

7) Your data should then
show up in Excel

Creating an XSJS Service
with outbound HTTP
Connectivity
1) A new feature in SP6 is the
ability for XSJS services to
also make outbound HTTP
calls. In this step we will
extend the previous service
to make a request to the
Library of Congress Image
database and return the
results to HANA.



117

2) First we must create an
XSHTTPDEST file. This file
defines the outbound
destination connection
parameters. This file must
be created in the same
package as the service
which will use it. Create a
new file named
images.xshttpdest in your
services folder.

The URL for the remote
service is www.loc.gov.
The port is 80. The path is
/pictures/search/?fo-
json&q=. The proxy host is
proxy and the proxy port is
8080. Please use the
instructions from
workshop leader as the
proxy host and port can
vary depending upon the
conditions of the works. If
no proxy is required,
simply change the value
of useProxy to false.

Save and active this file.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X6_3



118

3) Although not needed for
this exercise, the XS Admin
website can also be used
to maintain HTTP
Destination settings after
creating the xshttpdest file
via the developer tools.
Only from this website can
you configure more
advanced settings such as
client authentication.



119

4) Now edit the exercise.xsjs
from the previous exercise.
Add a new function to the
service to call the outbound
HTTP connection. Take in
to additional URL
parameters for the remote
search term and the image
index in the search results.

Be sure to remember to
replace your correct
package path in the
readDestination call.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address
http://<hostname>:<port>/w
orkshop/admin/ui/exercise
Master/?workshop=xs&sub
=EX6_4


5) Extend the entry point
block as well to include the
call to this new function.

Save and activate the
service.

120

6) Test the application in your
browser. The URL to run
your service would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/services/exercise
.xsjs?cmd=Images&search
=<your search term>.

For example if your session
letter was x and your group
number was 00 and you
wanted to search for
images of HANA then the
URL would be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/servi
ces/exercise.xsjs?cmd=Im
ages&search=HANA


7) You can page through the
search results by adding
the index URL parameter.
To search for the 10
th

image in the HANA results
set use this URL:
http://<hostname>:<port>/w
orkshop/sessionx/g00/servi
ces/exercise.xsjs?cmd=Im
ages&search=HANA&inde
x=10




121

Debug a XSJS Service from
HANA Studio
1) In order to debug XSJS
services, there are several
configuration steps that are
required. First, the you must
first enable debugging in
the xsengine.ini file. From
the Administrative
perspective, expand
xsengine.ini, then expand
debugger. Change the
value for enabled to true.
This step is already done
for you in this HANA
system, continue to the next
step.

2) Another prerequisite is that
your user id must have the
privilege to debug. In SP6,
this privilege is granted via
a standard role
sap.hana.xs.debugger::Deb
ugger. This step has
already been done for you
in this HANA system,
continue to the next step.

3) Next, you need to create a
debug configuration. Click
the down arrow next to the
Debug As button, then
Debug Configurations.

122

4) Double click XS
JavaScript.

5) Enter the name of the
configuration as
XS_Workshop. Next,
enter the host and port.
Host and port will be
supplied to you by the
instructor. Finally, enter
your user id and password,
and click Apply, then
Close.



123

6) Next, open the exercise.xsjs
file that you created earlier.

7) In the editor, navigate to the
downloadExcel function.
You can set breakpoints by
double clicking in the bar to
the far left.

8) You can also set a
breakpoint using Toggle
Breakpoint from the
context menu.

124

9) Set breakpoints at lines 10,
24, and 39.

10) Before we can start the
debugger we must first test
the service once in a web
browser in order to know
our session id. The session
id must be supplied to the
debugger on start up so it
knows which session to
connect to and debug.
Launch Chrome and open
the developer tools.



125

11) Make sure you are on the
Network tab of the
developer tools.

12) Test the application in your
browser. The URL to run
your service would be
http://<host>:<port>/worksh
op/session<session>/g<gro
up>/services/exercise.xsjs?
cmd=Excel . For example if
your session letter was x
and your group number was
00 then the URL would be:
http://<host>:<port>/worksh
op/sessionx/g00/services/ex
ercise.xsjs?cmd=Excel


126

13) After calling the service you
can display the Headers
details of the request to
exercise.xsjs. In the
Request Headers there
should be a cookie called
xsSessionId. The value of
this cookie will be the value
you use in the next steps.

14) Switch back to SAP HANA
Studio without closing
your web browser. Switch
to the Debug perspective.

15) Click the down arrow next
to the Debug As button
and choose Debug
Configurations.



127

16) Choose the debug
configuration which you
created earlier and choose
Debug.

17) Select your user id from the
dropdown, then match the
session id in the dialog to
the one in your web
browser. Click Select.

128

18) You can now refresh your
web browser to make
another request to this
same service. This should
start the interactive
debugger. You should see
the debugger stopping
processing on the first
breakpoint. You can also
see the values in your
JavaScript variables.

19) Try experimenting with
various features of the
debugger. You can change
values of variables in the
debugger. Try changing the
query string before it is
passed to the
prepareStatement.
Experiment with the various
navigation and observation
tools built into the debugger



129

Alternative: Debug a XSJS
Service from the SAP HANA
Web-based Development
Workbench

1) You can also debug an
XSJS service from the SAP
HANA Web-based
Development Workbench.
Open a browser and go to
the following URL.
http://<host>:<port>/sap/ha
na/xs/ide/ Enter the user id
and password and click
Login.

2) Browse the repository to
your specific package,
workshop.session<session_
id>.g<group_number> and
double click on the
exercise.xsjs file under the
services package.

130

3) Set breakpoints at lines 10,
24, and 39 by simply
clicking on the line number.

4) Open a new tab from your
browser. You must use a
new tab, and not a new
browser window.

5) Enter the URL as
http://<host>:<port>/worksh
op/sessionx/g00/services/ex
ercise.xsjs?cmd=Excel and
hit enter. This browser tab
is now waiting for the
debugger to respond.




131

6) Switch back over to the
SAP HANA Web-based
Development Workbench.

7) You will notice that
execution has stopped at
the first breakpoint.
Continue to the next step.

8) On the right side of the
screen, you will find the
options for step forward,
continue, step into, and step
out. You can also evaluate
and change values of the
variables within the scope.
Try experimenting with
these buttons as you
debug.

You have completed the
exercise!



You are now able to:

Create a Hello World XSJS Service
Create an XSJS Service with database access and custom output
format
Create an XSJS Service with outbound HTTP Connectivity
Debug an XSJS Service

132

EXERCISE 7 UI5 BASICS

Objective

In this exercise, you will learn the basics of creating a SAPUI5 Project and creating a Hello World SAPUI5 Application.


Exercise Description

Create an SAPUI5 project which is linked to the workspace
Create a HelloWorld UI5 Application
(Optional) Create a text bundle



133

EXERCISE 7 SOLUTION

Explanation Screenshot
Create a SAPUI5 Project
1) Move to the Project
Explorer view, and right-
click in the white space.
Choose New, then
Other.

2) In the New Project wizard,
select Application Project
under the category SAPUI5
Application Development

134

3) Name the project
HelloWorld<Session ID>.
For example if this was
Session x, name your
project HelloWorldX Keep
all other default values.

4) Supply the name of the
base html page and
controller/view you will
create. We can add
additional pages to this
project later. Supply a
name HelloWorld.




135

5) Do not switch to the Java
EE perspective when
prompted:

6) We now have an Eclipse
Project with a bootstrap
html page in the
WebContent folder and a
HelloWorld controller and
view in an inner
helloworld<session id>
sub-package.

136

Share the SAPUI5 Project
with the HANA Repository
1) Connect this project to the
HANA Repository by
choosing Team->Share
Project

2) Choose the SAP HANA
Repository Plug-In



137

3) Choose Browse to select
the repository package to
create your package within.

138

4) Share the Project with your
Repository Workspace and
to the repository package
workshop.session<session
id>.g<group number>.ui.
For example if your
session was Session X and
your group was 00, the
repository package would
be
workshop.sessionx.g00.ui.



139

5) Double check your
Repository Package from
the previous step. Confirm
that you have Add project
folder as sub-package
selected. Finally check the
New project location. It
should have your package
path plus the project name
as the final folder. If all is
correct, press Finish to
share the project.

6) Activate from the Project
Level to make sure that all
parts of the project get
properly stored in the HANA
Repository.

140

7) You can also activate from
the toolbar or with the
keyboard shortcut
CTRL+F3

8) The SAPUI5 project wizard
always inserts a bootstrap
location to the sap-ui-core.js
which is incorrect for SAP
HANA. Therefore the first
step of every new project is
to correct the index.html
document. Change the
script src from
resources/sap-ui-core.js to
/sap/ui5/1/resources/sap-ui-
core.js

9) The createContent function
of the HelloWorld.view.js is
where all UI element
rendering should reside. We
can instantiate the Button
UI element class as
myButton and then return it
from at the end of the
createContent function.
Any UI element (or element
group) returned from this
function will be rendered.

Note: if you dont want to
type this code, we
recommend that you cut
and paste it from this web
address:
http://<host>:<port>/worksh
op/admin/ui/exerciseMaster/
?workshop=xs&sub=EX7_1

10) Save / Activate all objects
from the project folder.



141

Testing your Hello World
Application
1) Test your application in a
web browser. The URL
would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/ui/HelloWorld<Se
ssion>/WebContent/. For
example if you were in
session x and group
number 00 your URL would
be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/ui/Hel
loWorldX/WebContent/

The sample solution is also
available at
http://<hostname>:<port>/s
ap/hana/democontent/epm
SP6/ui/HelloWorld/



2) You will be prompted for
authentication. Use your
current HANA System
Username and Password.
Your password is the same
you used to logon to SAP
HANA Studio (and which
was supplied by your
instructor).

3) The URL path and resource
names for the HANA Native
Applications are currently
case sensitive. Therefore a
common mistake of
removing the case when
typing the URL would result
in the following error
message

142

Creating a Text Bundle
(Optional)
1) In most of these exercises
we will simply hard code our
texts to keep everything
simple. However in real
applications, text strings
should be maintained
separately so they can
easily be translated. For
HANA based UI5
development you create a
text bundle named
hdbtextbundle. Now we will
adjust the HelloWorld
application to use a text
bundle.

2) Create a new folder within
your WebContent folder
called i18n.



143

3) In this for create a file
named
messagebundle.hdbtextbun
dle

4) Add the following text to this
file.

Save and Activate the file.

5) Go to the index.html file in
your HelloWorld project.
Add the following lines in
the script block but before
the loading of the view.
/*************** Language Resource Loader *************/
jQuery.sap.require("jquery.sap.resources");
var sLocale =
sap.ui.getCore().getConfiguration().getLanguage();
var oBundle = jQuery.sap.resources({url :
"./i18n/messagebundle.hdbtextbundle", locale: sLocale});
6) Your index.html now looks
like this:

144

7) Go to your
HelloWorld.view.js. Change
the setText function of the
button to use the text
bundle.

myButton.setText(oBund
le.getText("helloworld
"));

8) Save, activate and test your
application. The Hello
World text should appear.

9) Although not part of this
exercise, the hdbtextbundle
can be exported by the rtt
tool (which is part of the
HANA Client). The text can
then be translated and
imported back into the
system.

10) For instance, you might add
a German version of the
text in the translation file.

11) At the repository level there
is still the single
hdbtextbundle file; but
multiple language versions
are stored internally and
used automatically.



145



12) Now if you force the sample
implementation to run in
German (sap-ui-
language=de or change
your browser language
settings), you will see that
the same
messagebundle.hdbtextbun
dle is requested; but now
the content returned by the
server is German text.

You have completed the
exercise!

Create an SAPUI5 project which is linked to the workspace
Create a HelloWorld UI5 Application
(Optional) Create a text bundle

146

EXERCISE 8 CONSUMING ODATA FROM UI5

Objective

The XSEngine contains a special tool for the creation of OData Services without needing to perform server side coding.
To create an OData service from an existing HANA table or view, you need only define an XSODATA service definition
file. In SPS6, this generic OData service framework also allows for Create/Update/Delete Operations.

In this exercise the XSODATA services have already been created for you. You will focus on how to consume and
interact with these services from the SAPUI5 user interface technology.




Exercise Description


Consume a Basic OData Service within UI5 binding the service to a Table
Use the OData Meta Data to dynamically create the UI5 Table Columns
Consume an OData Service with a Create operation



147

EXERCISE 8 SOLUTION

Explanation Screenshot
Consume a Basic OData
Service within UI5 binding the
service to a Table
1) Using the steps you
learned in the previous
exercise, create a new
UI5 Application project
named
odataBasic<Session
ID>. For example if this
was Session x, name
your project
odataBasicX. Keep all
other default values.

2) Supply the name of the
base html page and
controller/view you will
create. We can add
additional pages to this
project later. Supply a
name odataBasic.

148

3) Using the same steps as
the previous exercise,
share the project with the
HANA Repository.

Share the Project with your
Repository Workspace and
to the repository package
workshop.session<session
id>.g<group number>.ui.
For example if your session
was Session X and your
group was 00, the
repository package would
be
workshop.sessionx.g00.ui


4) The SAPUI5 project wizard
always inserts a bootstrap
location to the sap-ui-
core.js which is incorrect
for SAP HANA. Therefore
the first step of every new
project is to correct the
html document. Change
the script src from
resources/sap-ui-core.js to
/sap/ui5/1/resources/sap-
ui-core.js

While you are editing the
index.html also go ahead
and add sap.ui.table to the
data-sap-ui-libs. You must
declare the UI element
libraries you will utilize in
your application. We will
be using the table in
addition to the common
library.




149

5) To avoid having to do
too much typing, we
have prepared some
template code for you
which already has the
definition of the table UI
element and the table
columns, but none of
the logic to consume
the OData service. You
can cut and paste this
template code from this
address into the
createContent function
of your
odataBasic.view.js file:

Note: if you dont want
to type this code, we
recommend that you cut
and paste it from this
web address
http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX8_1

You should notice that
there are two
commented To-Do
sections in this code
which you just copied
into the file.




6) In the first To-Do
location you should add
the code to create a
model object named
oModel of type
sap.ui.model.odata.OD
ataModel. Use the
provided service
/workshop/solution/servi
ces/businessPartners.x
sodata/. If you need
help writing this code
please refer to the
solution at:

http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX8_2



150

7) In the second To-Do
location you should set
the model named
oModel to the table
control named oTable.
Create a sorter (type
sap.ui.model.Sorter)
which uses the column
PartnerId. Bind the
table to the entity
BusinessPartners and
add the sorter object to
the binding. If you need
help writing this code
please refer to the
solution at:

http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX8_3




8) Thats all that is
necessary to connect
the Table UI element to
the OData service. We
get built in table sorting
and filtering, as well as
server side scrolling via
the various built-in
parameters of the
OData service
framework.

Save and Activate your
project.




151

9) Test your application in a
web browser. The URL
would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/ui/odataBasic<Se
ssion>/WebContent/. For
example if you were in
session x and group
number 00 your URL would
be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/ui/od
ataBasicX/WebContent/

Try the sort or filter ability
on one of the columns to
test out the built-in features
of the OData Service.

The sample solution is also
available at
http://<hostname>:<port>/s
ap/hana/democontent/epm
SP6/ui/odataBasic/





Use oData Metadata to
dynamically create the
columns.
1) In the previous part of
this exercise we hard
coded all the table
column definitions in the
template. However,
oData services expose
all their meta data and
we can use this feature
to build the columns
dynamically.

Return to your view file.
Delete the complete
block of lines after the
Table Column
Definitions comment
and before the
oTable.setModel line.



152

2) You can create a
connection to the
metadata object via the
function
getServiceMetadata of
your model object.
Inside this meta data
you will find the
columns of the service
at
dataServices.schema[0]
.entityType[0].property.
Loop over this collection
and create a column for
each property.name in
the service dynamically.

If you need help writing
this code please refer to
the solution at:

http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX8_4

Save and Activate your
project.


3) Test your application in a
web browser. The URL
would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/ui/odataBasic<Se
ssion>/WebContent/. For
example if you were in
session x and group
number 00 your URL would
be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/ui/od
ataBasicX/WebContent/

Notice that you now have all
the columns of the service;
not just the few you had
before.

The sample solution is also
available at
http://<hostname>:<port>/s
ap/hana/democontent/epm
SP6/ui/odataMeta/




153

Consume an OData Service
with Create Option
6) Using the steps you
learned in the previous
exercises, create a new
UI5 Application project
named
odataCRUD<Session
ID>. For example if this
was Session x, name
your project
odataCRUDX. Keep all
other default values.


7) Supply the name of the
base html page and
controller/view you will
create. We can add
additional pages to this
project later. Supply a
name odataCRUD.


154

8) Using the same steps
from the previous
exercises, share the
project with the HANA
Repository.

Share the Project with
your Repository
Workspace and to the
repository package
workshop.session<sess
ion id>.g<group
number>.ui. For
example if your session
was Session X and your
group was 00, the
repository package
would be
workshop.sessionx.g00.
ui

9) The SAPUI5 project
wizard always inserts a
bootstrap location to the
sap-ui-core.js which is
incorrect for SAP
HANA. Therefore the
first step of every new
project is to correct the
html document. Change
the script src from
resources/sap-ui-core.js
to
/sap/ui5/1/resources/sa
p-ui-core.js

While you are editing
the index.html also go
ahead and add
sap.ui.table to the data-
sap-ui-libs. You must
declare the UI element
libraries you will utilize
in your application. We
will be using the table in
addition to the common
library.



155

10) The complete View
Implementation is
provided for you as a
template. It has a table
control built from the
odata service
/workshop/solution/servi
ces/user.xsodata/ - all
of which is very similar
to the earlier exercise.
In addition, this view
has input fields for
creating a new record. It
also has the ability to
update records in the
table control; not just
display them.

The template can be
accessed at:
http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX8_5




11) In this exercise we will
focus on the implement
of the event handlers
which is all done in the
controller.js file.

Begin editing the
controller by adding a
declaration for the
oModel that is set to
null. This will allow us to
pass the model
instance from the view
to the controller.

156

12) We need to add to
event handlers,
callUserService (which
performs the creation of
new records) and
updateService (which
updates records from
the table). Insert the
empty functions in the
controller as shown.

3) For callUserService,
you first need to get
access to the model
object via the controller
with a call to
sap.ui.getCore().byId("i
dodataCRUD1").getCon
troller().oModel.

Next you need to create
a JSON object with the
service fields
(PERS_NO,
FIRSTNAME,
LASTNAME, and
E_MAIL). PERS_NO
can get a hardcoded
value of 0000000000.
The other fields should
be read from the screen
with
sap.ui.getCore().byId("<
insert field
id>").getValue();

Finally you need to set



157

a custom header of
content-type with the
value of
application/json;charset
=utf-8 in the model.
Then you can call the
model.create function
for the entity /Users.

If you need help writing
this code please refer to
the solution at:

http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX8_6


4) The implementation of
updateService is very
similar. You need to
access the model as
before. You can get the
index of the table for the
changed record from
Event.getSource().oPar
ent.getIndex().

You can build the JSON
record as before, but
you only need to fill in
the PERS_NO and
whatever field was
changed. You can
access the fields in the
table via the id
__field<index>-
col<index>-row+ the
table index you read
earlier.

Set the same model
header and then call the
update function.

If you need help writing
this code please refer to
the solution at:

http://<hostname>:<port
>/workshop/admin/ui/ex
erciseMaster/?worksho
p=xs&sub=EX8_7




158


13) Save and activate your
project.

14) Test your application in
a web browser. The
URL would be
http://<hostname>:<port
>/workshop/session<se
ssion>/g<group>/ui/odat
aCRUD<Session>/Web
Content/. For example if
you were in session x
and group number 00
your URL would be:
http://<hostname>:<port
>/workshop/sessionx/g0
0/ui/odataCRUDX/Web
Content/

Try both creating a new
record and editing
existing records.

The sample solution is
also available at
http://<hostname>:<port
>/sap/hana/democonten
t/epmSP6/ui/odataCRU
D/




You have completed the
exercise!



You are now able to:

Consume a Basic OData Service within UI5 binding the service to a Table
User the OData Meta Data to dynamically create the UI5 Table Columns
Consume an OData Service with a Create operation


159

EXERCISE 9 CONSUMING XSJS FROM UI5

Estimated time: XX minutes

Objective

XSJS or Server Side JavaScript is used to create custom services and is the main imperative and control flow logic
layer in HANA Native Applications.

The XSODATA services are a very fast way to build OData services for existing database artifacts. However,
sometimes you need more control over the processing logic of the service handler or a custom output format. For this
reason, we can also write custom service handlers using server side JavaScript.


Exercise Description

Consume XSJS Services via JQuery AJAX calls.
Learn how to use the liveUpdate and linked fields for interactive search


160

EXERCISE 9 SOLUTION

Explanation Screenshot
Consume XSJS Services via
JQuery AJAX calls
6) Using the steps you learned
in the previous exercises,
create a new UI5
Application project named
xsjsMultiply<Session ID>.
For example if this was
Session x, name your
project xsjsMultiplyX. Keep
all other default values.

7) Supply the name of the
base html page and
controller/view you will
create. We can add
additional pages to this
project later. Supply a
name xsjsMultiply.




161

8) Using the same steps as
the previous exercises,
share the project with the
HANA Repository.

Share the Project with your
Repository Workspace and
to the repository package
workshop.session<session
id>.g<group number>.ui.
For example if your session
was Session X and your
group was 00, the
repository package would
be
workshop.sessionx.g00.ui

9) The SAPUI5 project wizard
always inserts a bootstrap
location to the sap-ui-core.js
which is incorrect for SAP
HANA. Therefore the first
step of every new project is
to correct the html
document. Change the
script src from
resources/sap-ui-core.js to
/sap/ui5/1/resources/sap-ui-
core.js

10) The complete View
Implementation is provided
for you as a template. It
has two input fields for the
numeric values which are
multiplied. We will then call
the service on the server
when the user changes the
value in either field. Note:
of course you could perform
simple math on the client
side. We are using this
very simple example in
order to focus on the

162

techniques for creating and
calling the XSJS services
without needing to get into
too much detail.

The template can be
accessed at:
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X9_1



11) In the controller add an
event handler called
onLiveChange which has
two parameters oEvent
and oVal. This is the event
which is triggered every
time the value is changed in
either input field.

Using jQuery.ajax call the
URL
/workshop/solution/services/
multiply.xsjs?cmd=multiply
adding on the num1 value
from the oEvent and num2
value from the oVal input
parameter. On Success of
the AJAX call, call a
controller event named
onCompleteMultiply. If there
is a failure call a controller
event named onErrorCall.

If you need help writing this
code please refer to the
solution at:

http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X9_2


12) In the onCompleteMultiply,
accept the response object
as an input parameter
called myTxt. This will field
will contain the result of the
multiplication in clear text.
Use the
sap.ui.core.format.NumberF
ormat to format the output
as an interger and set the



163

value back into the oResult
textView.

If you need help writing this
code please refer to the
solution at:

http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X9_3


13) In the onErrorCall, produce
an error dialog
(sap.ui.commons.Message
Box.show) and output the
jqXHR.responseText as the
details of this error.

If you need help writing this
code please refer to the
solution at:

http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X9_4


14) Save and activate your
project.

Test your application in a
web browser. The URL
would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/ui/xsjsMultiply<Se
ssion>/WebContent/. For
example if you were in
session x and group
number 00 your URL would
be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/ui/xsj
sMultiplyX/WebContent/

Since we are using the live
change event on the input
fields, you only need to start
typing into either field to
trigger the call to the server
and the calculation of the
results

The sample solution is also

164

available at:

http://<hostname>:<port>/s
ap/hana/democontent/epm
SP6/ui/xsjsMultiply/



Use the liveUpdate and linked
fields for interactive search
8) We now want to build an
application which will
search the HANA
Repository using XSJS and
display a repository object
in the browser.

Using the steps you learned
in the previous exercises,
create a new UI5
Application project named
xsjsRepository<Session
ID>. For example if this
was Session x, name your
project xsjsRepositoryX.
Keep all other default
values.





165

9) Supply the name of the
base html page and
controller/view you will
create. We can add
additional pages to this
project later. Supply a
name xsjsRepository.


10) Using the same steps as
the previous exercises,
share the project with the
HANA Repository.

Share the Project with your
Repository Workspace and
to the repository package
workshop.session<session
id>.g<group number>.ui.
For example if your session
was Session X and your
group was 00, the
repository package would
be
workshop.sessionx.g00.ui

166

11) The SAPUI5 project wizard
always inserts a bootstrap
location to the sap-ui-
core.js which is incorrect
for SAP HANA. Therefore
the first step of every new
project is to correct the
html document. Change
the script src from
resources/sap-ui-core.js to
/sap/ui5/1/resources/sap-
ui-core.js

12) The complete View
Implementation is provided
for you as a template. It
has three input fields for the
package path, filename,
and file extension. The
search will be linked so only
files within the selected
package will be displayed.
Notice that we are using the
sap.ui.commons.AutoCompl
ete UI element for the input
fields. This element has a
suggest event which we will
implement as a call to an
XSJS service.

The template can be
accessed at:
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X9_5

.

13) For the controller we also
have a template to save you
some time. This template
already has the error
handling, helper functions,
and implementation for two
of the three event handlers.
You will have to supply the
implementation for the third
handler.

The template can be
accessed at:
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X9_6




167


14) You should now complete
the implementation of the
loadObjectFilter function.
You can study the other
event handlers for a hint.
You need access to the
controller object as we did
earlier in the XSODATA
CRUD exercise. The
oEvent input parameter will
supply you with access to
the current typed value. If
the input parameter is *,
replace the value with .
Get the package value from
the input field id Package.
Then call the service
/workshop/solution/services/
repository.xsjs?cmd=getObj
List. If successful, call the
controller function
onLoadObjFilter. If error,
call the controller method
onErrorCall.

If you need help writing this
code please refer to the
solution at:

http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X9_7


15) You should now complete
the implementation of the
onLoadObjectFilter
function.

The XSJS service returns
the object information in
JSON format to the
parameter myJSON. Loop
over all elements in
myJSON.Objects and
added each
OBJECT_NAME to the
oSearchControl for the
input field named Object.

If you need help writing this
code please refer to the
solution at:

http://<hostname>:<port>/w

168






orkshop/admin/ui/exercise
Master/?workshop=xs&sub
=EX9_8

16) Save and activate your
project.

Test your application in a
web browser. The URL
would be
http://<hostname>:<port>/w
orkshop/session<session>/
g<group>/ui/xsjsRepostiory
<Session>/WebContent/.
For example if you were in
session x and group
number 00 your URL would
be:
http://<hostname>:<port>/w
orkshop/sessionx/g00/ui/xsj
sRepositoryX/WebContent/

Test the service by
searching in the package
workshop.solution.services.
View the file repository.xsjs.

The sample solution is also
available at:

http://<hostname>:<port>/s
ap/hana/democontent/epm
SP6/ui/xsjsRepository



You have completed the
exercise!



You are now able to:

Consume XSJS Services via JQuery AJAX calls.
Learn how to use the liveUpdate and linked fields for interactive search



169

EXERCISE 10 UI INTEGRATION SERVICES


Objective

SAP HANA UI Integration Services (UIS) is a set of Eclipse-based and browser-based tools, as well as client-side
APIs, which enable you to integrate standalone SAP HANA Extended Application Services (XS) applications into web
user interfaces to support end-to-end business scenarios. These user interfaces are referred to as application sites.
Pre-built SAP HANA client applications components that are integrated into application sites are referred to as widgets.


Exercise Description

Create Widgets
Create XML Specifications
Create an Application Site
Configure the Application Site

170

EXERCISE 10 - SOLUTION

Explanation Screenshot
Create a Widget
1) To integrate an XS client
application, client
application component or
other web application into
application sites, you need
to create a widget based on
this application.

Create a uis folder within
your project to hold all your
SAP HANA UI Integration
Services content


2) Create the widgets
specification XML file. In the
projects context menu,
choose New->File.




171

3) Name your file sample.xml


172

4) This file can either embed
the widgets client-side code
within a CDATA section, or
reference different source
files. To create a simple
Hello World widget, enter
the following content.

You can cut and paste this
template code from this
address into your
sample.xml file:
http://<hostname>:<port>/w
orkshop/admin/ui/exerciseM
aster/?workshop=xs&sub=E
X10_1

Save and activate this file.





5) The next step is to create a
widget design-time object;
to do this, run the Create
New Widget wizard as
follows.

In the project's context
menu in Project Explorer,
choose New > Other....

In the New dialog box,
choose SAP HANA
Development > Widget,
and choose Next




173

6) In the New Widget dialog
box, choose the parent
folder, enter the widget file
name and specification file
name, and choose Next.
Note: The specification file
should be located under the
current project's folder










7) In the next step of the
wizard, set the widget
properties, and choose
Finish. A new file is added
to the specified location:
sample.xswidget.

To make the widget
available for application
sites, activate the
sample.xswidget file



174

Create an Application Site
1) In the next step, you create
an application site that acts
as a UI container for the
widgets comprising the
application. To create a
new application site in the
SAP HANA Studio:

In the project's context
menu in Project Explorer,
choose New > Other

In the New dialog box,
choose SAP HANA
Development >
Application Site, and then
choose Next


2) In the New Application Site
dialog box, select a parent
folder, enter the site
properties, and choose
Finish



175

3) The application site editor
will then open a web
application in place within
the HANA Studio. This is
why you see the HANA
Login screen. Use your
database credentials to
login.

4) The Site is opened as an
empty template.

5) The blue design panel on
the right provides tools to
edit site layout and content.
In the first option, Site
Properties, you can view
the properties of the site
and modify some of them.
One of the important
properties is the URL of the
application sites end-user
version. Until the application
site is activated from the
SAP HANA Studio, opening
this URL results in a Site
not found page

176

6) The design panels second
option, Pages, enables you
to create, delete, rename
and order the site pages in
the sites navigation tabstrip
(sometimes referred to as
workset elements).

In the Pages option,
rename the first page from
Welcome to First Page

7) The third option of the
design panel, Widgets,
contains a catalog of all
widgets activated in the
current project.

The widget created in the
previous step should be
visible in the pane after
selecting your package.

8) Drag and drop the widget to
add it to the page.

9) After you add the widget, its
content is loaded,
displaying the simple Hello
World application defined in
the specification XML. You
can now resize the widget
and reposition it on the
page



177

10) Click on the blue box on the
upper right corner of the
widget to expand its
settings.

11) For example from here you
could change the title of the
widget.

12) To make the site available
to end users, activate it

178




13) Open the design panels
Site Properties option. You
can click on the Runtime
URL to test the application.

14) The runtime version of the
application site should open
in a new browser window.

You have completed the
exercise!



Create Widgets
Create XML Specifications
Create an Application Site
Configure the Application Site



179

EXERCISE 11 DELIVERY UNITS AND TRANSPORT OF CONTENT
Estimated time: 20 minutes

Objective

Delivery Units are the container in which we package software for transportation to other systems. Delivery Units
include objects within packages in the repository. In this exercise, you will create a deliver unit for your specific
package. You can then export this delivery unit and take all your work with you for reference.

Exercise Description

Create a Delivery Unit
Export a Delivery Unit

180

EXERCISE 11 SOLUTION

Explanation Screenshot
Create a Deliver Unit using
the HALM tool
1) Open the browser and go to
the following URL.
http://<host>:<port>/sap/ha
na/xs/lm/ Enter your userid
and password and click
Login.

2) Click on Products from the
first level navigation.




181

3) Next, click Delivery Units
from the second level
navigation.

4) Click the large plus sign on
the left side of the page.

5) Enter the name of the
delivery unit as
WORKSHOP<session>_<gr
oup>. For example if your
session was x and group
number was 00, your
Delivery Unit would be
named WORKSHOPX_00.
Also, give a description.
Click Create.

182

6) Under the Installed DUs
node, scroll down and
select your delivery unit.



183

7) Change the version to 1.0.0
and click the Assign
button.

8) Enter the name of your
package,
workshop.session<session_
id>.g<group_number>.
Select the Select
Subpackages checkbox
and click Ok.

184

9) You will notice that your
package and all sub-
packages have been added
to the delivery unit.
Continue to the next step.

10) Click Save.

11) A success message should
be displayed at the bottom
of the page.

Export a Delivery Unit using
the HALM tool

1) From the first level
navigation, click on
Upload/Download.




185

2) From the second level
navigation, make sure you
are on the Export To File
page. Scroll down and
select your delivery unit
which you created in the
last section.

186

3) Next, click the Export DU to
File button.

4) Save the file to a location.



187

5) The export file uses a
compressed format similar
to ZIP and can be opened
with a tool like WinRAR.
The compressed file
contains all the packages
as folders:

Alternative: Create and export
a Delivery Unit using the SAP
HANA Web-based
Development Workbench
1) You can also do the above
steps using the SAP HANA
Web-based Development
Workbench. Open the
browser and go to the
following URL.
http://<host>:<port>/sap/ha
na/xs/ide/ Enter your userid
and password and click
Login.

188

2) Click Delivery Unit, then
Create new Delivery Unit
and assign Package.

3) Enter the name of the
delivery unit as
WORKSHOP<session>_<gr
oup>. For example if your
session was x and group
number was 00, your
Delivery Unit would be
named WORKSHOPX_00.
Also, enter the vendor as
sap.com , the person
responsible, and a version
number. Enter the name of
your package as
workshop.session<session_
Id>.g<group_number>.
Click Ok. Afterwards a
success message will briefly
be displayed in the upper
right hand corner of the
page.

4) Next, click Delivery Unit,
then Export Delivery Unit to
local File System.



189

5) Enter the name of your
delivery unit. Also, enter the
same vendor as you
defined when creating the
delivery unit. Click Ok.

6) Save the file to a location.

7) The export file uses a
compressed format similar
to ZIP and can be opened
with a tool like WinRAR.
The compressed file
contains all the packages
as folders:

190



You have completed the
exercise!



You are now able to:

Create a delivery unit
Export a delivery unit



191

EXERCISE 12 PUTTING IT ALL TOGETHER PURCHASE ORDER WORKLIST

Objective

The exercises so far have been intentionally small in scope so that you can focus on learning individual techniques.
However it is also good to see how all these parts fit together into a large scale, realistic application. This final exercise
will utilize both XSODATA and XSJS services to present a purchase order worklist.
Exercise Description

It will have a connection between hierarchy levels of the XSODATA service to display PO Items for the selected
Purchase Order Header.


It will also have transactional update capabilities to delete, approve, or reject purchase orders


192

In addition to the Filter within the table, it has a search engine like filter field which allows a single search string to
function across several columns of the underlying view.


Finally, it leverages the power of HANA to process large volumes of data very quickly. We therefore can have a report
that performs a sum on all gross values of the purchase orders, converted to a common currency and grouped by
several options. This is all done dynamically without the need for pre-built aggregates


Because of the size and complexity of this final solution, this exercise is not so much about building the complete
solution from scratch. Instead it is designed to be a walkthrough and explanation of the major parts of this application
which you can study also at a later time. It intentionally doesnt cover 100% of the steps required to build this complete
application. It is also expected that you apply what youve learned throughout this workshop and complete many of the
steps without extensive guidance from this exercise document

If at any time you want to execute the completed exercise, you can run it from the web browser via the following URL:
http://<host>:<port>/sap/hana/democontent/epmSP6/ui/poworklist/

There is also a mobile/Fiori version of this application available at:
http://<host>:<port>/sap/hana/democontent/epmSP6/poa/



193

Table Rendering:


Phone Rendering:


194

EXERCISE 12 - SOLUTION

Explanation Screenshot
Exercise Preparations
1) Before you begin building
this exercise, you will need
access to a large number of
template objects. Within the
workshop package there is
already a sub-package
named template which
contains all the content you
will need to build this
exercise.

The easiest way to access
this content is to checkout
this project and add it to
your Project Explorer.
Unlike the session package
youve been using, your
account has read only
access to the template
package. Therefore you
should be able to check out
the content, but if you
change anything in this
project and attempt to
check in, you will receive an
unauthorized error message




195

2) Begin by checking out the
existing project from the
sap.hana.democontent.epm
SP6 package

3) Click Next

196

4) Click OK

5) Import the Project:



197

6) The epmSP6 project should
now be visible in your
Project Explorer.

7) You now have the complete
template project available in
your HANA Studio
workspace. This can be a
very convenient way to cut
and paste blocks of code
from the templates into your
own project as you work.

Remember that you have
Read Only access to this
template package.
Therefore if you accidentally
change something and
save/commit it, you get an
error with a failed commit
and the message that your
User is not authorized

198

8) If you do this by accident
you can clear the problem
marker by right clicking on
the parent package of the
object in question and
choosing Team->Revert.
This will re-copy the objects
from the server

9) If at any time you want to
execute the completed
exercise, you can run it
from the web browser via
the following URL:
http://<hostname>:<port>/s
ap/hana/democontent/epm
SP6/ui/poworklist/




199

The Data Model
1) All the tables which are
needed by this application
are contained in the
Schema
SAP_HANA_EPM_SP6.

2) Up until this point we have
primarily been working with
the businessPartner table.
You can double click on any
of the table from the
Navigator view to see the
technical definition of it.

200

3) You might take a few
minutes to look at each of
the tables in this Schema,
as this exercise application
will use most of them. You
will be able to better see the
relationships between the
tables in a moment when
we look at the views, but
understanding the low level
structure of the data model
at the table level can also
be useful.

In particular you might take
note that all text
descriptions are stored in a
central texts table instead of
in each entity table.
Likewise the addresses for
business partners and
employees are also stored
together in a central
addresses table.

If you have an ABAP
development background,
you might be familiar with
the concept of Data
Dictionary Domains. Often
small sets of allowed value
domains for a data field are
stored at this level. For
example the Lifecycle
Status at the Purchase
Order level only stores a
single character code, but
displays a language
dependent description at
runtime



4) In HANA we dont yet have
a exactly the concept to the
Data Dictionary Domain yet
(although that's where
HDBDD/CDS is headed).
Therefore in this project we
created a central constants
table which holds all the
domain values and
language dependent
descriptions. This table can
then be joined to each of
the entity tables to provide
the proper descriptions for
fixed values



201


5) Any table in HANA can be
created via the Navigator
New Table menu option or
via SQL CREATE TABLE
syntax. That wasnt actually
how these tables were
created. When you create
the tables directly in a
Schema via SQL, they
arent assigned to a
package and therefore not
transportable via Delivery
Unit like the rest of the
artifacts weve been
creating today.

For example, the sample
SQL Syntax to create a
table in HANA:

202

6) As part of HANA Native
Development we also have
an artifact called HDBDD,
which allows us to define
tables, table types, etc.
The HDBDD objects are
edited as source files just
like XSJS and XSODATA
objects. When you activate
them from within a Project,
they cause the specified
database objects to be
created or altered.

All the tables in this
workshop were created with
this approach.



203

7) Once you have fully studied
the tables of this workshop
data model, lets move onto
the Views of the data
model. This is where the
relationships between the
various entities in the data
model are defined. All the
views were created with the
package
sap.hana.democontent.ep
mSP6.models and are
visible via the template
project you checked out
earlier.

8) For example the
AT_BUYER view combines
the businessPartner with
the addresses.

204

9) You can study the rest of
the major entity
relationships in the
workshop model via the
remaining Views. You can
also preview the data in
views.

10) The Analytic Views go
beyond simple entity
relationships and are built
for high speed calculation
and summarization of data
(OLAP processing). In
particular they will be used
later to support the
reporting requirement to
summarize the purchase
order gross amount by
various groupings



205

11) A simple SELECT SUM on
the GrossAmount column
would not produce accurate
results because we have
various currencies in use. A
quick SQL Statement
verifies that we have
multiple currencies in use
within our data.

12) The Analytic View offers a
solution to this problem by
allowing us to build a
Calculated Column with all
values converted to a
common currency. First we
need an Input Parameter for
the View so that the target
currency can be passed into
the view

206

13) Next we can define a
Calculated Measure. For
the expression of this
Calculated Measure, we will
simply copy in the value
from the GrossAmount
field.

14) The real power comes from
the Currency Conversion.
We configure a currency
conversion based upon the
POCreatedAt date of the
purchase order using the
Currency field from the
purchase order as the
source and the
IP_O_TARGET_CURRENC
Y Input Parameter as the
target.



207

15) Using massively parallel
processing, HANA is able to
calculate the currency
conversions and aggregate
the results across millions
of rows in fractions of a
second. For example we
select the aggregated
converted GrossAmount
by product categories and
have the results back in
less than 100 milliseconds.

XSODATA Services
1) To support the user
interfaces requirements we
will need to create two
XSODATA Services

The first one will supply the
Purchase Order and Item
items as a single entity and
will be bound to the main
Purchase Orders table in
the Worklist UI.

2) Begin by creating a file
named poWorklist.xsodata
in the services package of
your workshop project.

Using what you learned in
the earlier exercises, create
an OData service definition
for the Attribute View

208

sap.hana.democontent.ep
mSP6.models::AT_PURC
HASE_ORDER_WORKLIS
T named PO_WORKLIST.
One major difference for the
earlier exercise is that we
are now using a View
instead of a Table.
Therefore you must also
use the addition keys
(PurchaseOrderId,Purc
haseOrderItem) to the
service definition.
Note: If you get stuck, you
can always look at the
sample solution in the
template project we
imported earlier.

Save, activate and test your
new service using the
techniques we learned in
the XSODATA exercise
3) The second OData service
will be a navigable
hierarchy between
Purchase Order Header
and Item. This way the
single service can be bound
to both the General Data
(Header Information) and
the Purchase Order Items
Table. This service will only
display the single entity
details for the selected
record in the main Purchase
Orders UI Table

Begin by creating a file
named
poWorklistJoin.xsodata in
the services package of
your workshop project

Using what you learned in
the earlier exercises, create
an OData service definition
for the Catalog View
sap.hana.democontent.ep
mSP6.data::purchaseOrde
rHeaderExt with the keys
(PurchaseOrderId)
named
PurchaseOrderHeader.
The second entity, called
PurchaseOrderItem, will
use the Attribute View



209

sap.hana.democontent.ep
mSP6.models::AT_PURC
HASE_ORDER_WORKLIS
T and needs the keys
("PurchaseOrderId","Purc
haseOrderItem"). Finally
create a 1 to many
navigation Association
between the two entities
called PO_Item

Note: If you get stuck, you
can always look at the
sample solution in the
template project we
imported earlier

Save, activate and test your
new service using the
techniques we learned in
XSODATA Exercise.

XSJS Services
1) In order to support the user
interface requirements we
will create two XSJS
services. One will contain
all the read only activities
while the other contains the
data update operations.

210

2) The Query XSJS service
will handle the Super
Search filter event. As the
user types into this field the
value will be sent to the
server and multiple queries
will executed across the
various search field show
possible matching values

This Query XSJS service
will also support the
Reports tab by calling the
Analytic View we explored
early and transforming the
results to JSON for usage in
the client side chart

3) Begin by creating a file
named
poWorklistQuery.xsjs in
the services package of
your workshop project.

You can reuse the
Excel/downloadExcel
function from the XSJS
Exercise earlier. You then
need to add a function for
the filter and getTotalOrders
commands. The
getSessionInfo command
can be met using the
fillSessionInfo function of
the reusable library:
sap.hana.democontent.epm
SP6.services
session.xsjslib

4) The implementation of the
getFilter function (which
supports the Super Search)
isnt all that much different
than the Excel Download
from the XSJS exercise.
The major difference is the
output format of JSON
instead of text tab delimited.
You also need multiple
selections from different
tables/views in order to



211

support searches by
Company Name, Partner
City, Product Category,
Product Id, Product Name,
Product Description, and
Purchase Order ID

Based upon what youve
learned about creating
XSJS services, create an
implementation for this
function with the following
requirements. You need to
read the input parameters
groupby, currency,
filterterms, and
filterattribute. If currency is
empty, use USD as the
default value. Using the
input parameters mentioned
above, perform the query
against
sap.hana.democontent.ep
mSP6.models::AN_PURC
HASE_COMMON_CURRE
NCY for the top 5
summarized common
currency GrossAmount
values. Transform the
results to a JSON structure
named entries, using the
attributes name and value.
Dont forget to escape your
SQL Statement for usage
within JavaScript
5) The Update XSJS service
will support the Delete,
Approve and Reject actions

212

6) Begin by creating a file
named
poWorklistUpdate.xsjs in
the services package of
your workshop project.

You will need to implement
functions to support the
delete and approve/reject
actions.

You should check various
lifecycle status rules before
updating the records.

You cant delete if the
Lifecycle is closed. For
Example:
You cant delete if the
lifecycle status is cancelled
If PO is already approved,
you cant delete
If PO is confirmed, you cant
delete
If PO is sent, you cant
delete
If PO is delivered, you cant
delete
If PO is invoiced, you cant
delete
If lifecycle is cancelled, you
cant approve or reject
If Lifecycle is deleted, you
cant approve or reject
If PO Is confirmed, you
cant approve or reject
If PO Is Confirmed and
Sent, you cant reject
If PO is delivered, you cant
reject
If PO is invoiced, you cant
reject


User Interface
1) The final step is to create
the user interface itself.
There are many files which
are part of this user
interface as we have
heavily utilized the SAPUI5
MVC (Model View
Controller) design in order
to provide modularity.



213

2) Create a new SAPUI5
Project within your ui folder
called poWorklist<Session
ID>. The template folder
already has a sample
implementation. You may
wish to copy parts (like the
images and i18n folders)
from the template folder.
However try to implement
as much of the UI on your
own as possible utilizing
what youve learned so far.
Some highlighted concepts
follow.

3) Weve briefly discussed the
MVC technique in SAPUI5.
You must add the MVC
initialization to
poWorklist.html.

214

4) In many of the previous
exercises, we have
hardcoded the text strings
into the UI. For this final,
more realistic example; we
want to use proper text
resource files. In the i18n
package we already have
the default English and
German text property files.
Now we want to add in the
code to utilize these text
resources

5) In the global.js file, there
needs to be a section near
the beginning where we add
the initialization of the text
processing.

The following three lines of
JavaScript code need to be
added in order to access
the current Language
Locale and initialize a text
bundle object for later
usage.

6) For the remainder of the UI
files, instead of hard coding
text strings we can now
access them via the
oBundle object and the
getText function. For
example:

7) Similar to XSODATA
Exercise, we want to bind
the poWorklist.xsodata
service to the Purchase
Orders Table in the
Table.view.js file. Utilizing
what you learned in this
earlier exercise, please
implement section.



215





8) Simliar to the XSJS
Exercise, we want to
connect the custom XSJS
search service to the user
interface. We will begin by
creating the UI elements in
the Search.view.js.

9) Now that we have the UI
elements for the Search, we
also need to implement the
event handlers in
Search.controller.js

Very much like the earlier
exercises we need to use
jQuery.ajax to call our
poWorklistQuery.xsjs
service, passing the query
parameters from the
oEvent function parameter

10) Save and activate all the
objects within the ui
package of your workshop
project.


11) Test your poworklist
application from your
browser. The URL to run
your test application would
be
http://<host>:<port>/worksh
op/session<session>/g<gro
up>/ui/poworklist<session
id>/WebContent/

For example if your session
letter was x and your group
number was 00 then the
URL would be:

http://<host>:<port>/worksh
op/sessionx/00/ui/poworklist
X/WebContent/


You have completed the
exercise!




216

EXERCISE 13 PUTTING IT ALL TOGETHER ADAPT TO USE UIS

Objective

In this exercise, we will use SAP HANA UI Integration Services (UIS) to create the components of the Purchase Order
Worklist application developed in the previous exercise. These standalone application components are referred to as
widgets. We will then proceed to integrate these widgets into a web user interface referred to as application site, which
supports the end-to-end business scenario.

Prerequisites
The HANA_UI_INTEGRATION_SVC delivery unit is imported and activated. (See Appendix C)
You are assigned to the role sap.hana.uis.db::SITE_DESIGNER (Your Workshop role already contains this
role)
You and other users are assigned to the role sap.hana.uis.db::SITE_USER

Project Structure
The project consists of the following components:
Table (1)
Details (2)
Search (3)
Reports (4)

These components implement the Model-Controller-View (MVC) design pattern.

The project is using the JavaScript and HTML files, created in the previous exercises or taken from the sample solution
in /sap/hana/democonten/epmSP6/ui/poworklist/. You will need to copy the original files into a number of new folders,
as shown in the figure below. Then, you will work on the copied files to adjust the JavaScript code to work in the UIS
environment, and make some modifications to the views and controllers to leverage the UIS capabilities.

In the previous exercises, all views are combined in one file, index.html.
In this exercise, we will create separate HTML files for each of the three views contained in index.html, plus a new one
for the reports.



217

EXERCISE 13 SOLUTION

Explanation Screenshot
Project Structure
1) In your main project, add
the following subfolders to
your uis folder:

/html for HTML files (views)
/js for JavaScript files
(controllers and models)
/i18n for hdbtextbundle files
/site for application site files
/widget for widget files
/xml for widget specification
XML files
.

2) Copy the original JS files
from the po_worklist
project folder to the uis/js
folder and the
hdbtextbundle files to the
uis/i18n folder .


218

Create Components
1) In this section you will
create some new client side
code that breaks down the
PO Worklist application into
4 standalone components.
Notice that the original html
and js files are the basis for
the new files but should
remain unchanged.

Under /html, create the
table.html file that
references <your package
structure>.uis.js.Tabl
e

Also be sure to change the
View name in the controller
and view JavaScript files as
well.

2) In the copied Detail.view.js
and Detail.controller.js files,
make the following
changes:

Remove or comment the
display of the Reports tab in
Detail.view.js.

Remove or comment the
attachment of the table row
selection event.

Copy table.html as
tabs.html, and change
viewName to uis.js.Detail
instead of uis.js.Table:
Before:

After:


3) In the copied
Search.controller.js
and Search.view.js files,
make the following
changes.

In Search.controller.js,
comment all lines of the
setFilter method and then
add the line
gadgets.sapcontext.publish(
"searchTerms", terms); to
avoid binding of table to
filter.

Copy table.html as

//Reports Tab
buildReportsTab(oController, oTabStrip);

//Attach a controller event handler to the Header PO Table Row Select Event
sap.ui.getCore().byId("poTable").attachEvent("rowSelectionChange",
oController.onRowSelect);
//Reports Tab
//buildReportsTab(oController, oTabStrip);

//Attach a controller event handler to the Header PO Table Row Select Event
//sap.ui.getCore().byId("poTable").attachEvent("rowSelectionChange",
// oController.onRowSelect);


219

search.html, and change
viewName to uis.js.Search
instead of uis.js.Table.

4) Copy Detail.view.js to
Report.view.js, make the
following changes

Remove building of all tabs
except Reports.

Rename the
buildReportTab method to
buildReport.

Change the method
implementation to return
Matrix layout instead setting
a new reports tab.

Copy table.html as
report.html, and change
viewName to UIS.js.Report
instead of UIS.js.Table.
Copy the controller and
adjust it as well.
Before:


After:





Create Widget XML
Specifications
1) Widget specification XML
files are descriptors that
contain some generic
widget properties and the
widget content source code.
The content is shown either
as a reference to an HTML
implementation file or is
directly embedded within
the XMLs [(CDATA)]
section. Specification XML
also lists required features,
such as sap-context to
enable communication
between widgets on a page,
or gadgetprefs to enable
widget property persistance.

In the uis/xml folder, create
1. table.xml


2. tabs.xml


3. search.xml

var oTabStrip = new sap.ui.commons.TabStrip("tabStripDetail");
oTabStrip.setWidth("100%");

//General Data Tab
buildGeneralTab(oController, oTabStrip);

//Item Tab
buildItemsTab(oController, oTabStrip);

//Notes Tab
buildNotesTab(oController, oTabStrip);

//Reports Tab
buildReportsTab(oController, oTabStrip);

//Attach a controller event handler to the Header PO Table Row Select Event
sap.ui.getCore().byId("poTable").attachEvent("rowSelectionChange",
oController.onRowSelect);

return oTabStrip;
//Reports Tab
var reportView = buildReport(oController);
reportView.setWidth("100%");
return reportView;
<Module>
<ModulePrefs title="Purchase Order Worklist">
<Require feature="sap-context"/>
</ModulePrefs>
<Content type="html" href="/<your project path>/uis/html/table.html">
</Content>
</Module>
<Module>
<ModulePrefs title="Purchase Order Details">
<Require feature="sap-context"/>
</ModulePrefs>
<Content type="html" href="/<your project path>/uis/html/tabs.html">
</Content>
</Module>
220

the following widget
specification XML files




4. report.xml


2) Save and activate each file
Create Widgets
1) To integrate the
components that you have
created in the former steps
into an application site, you
need to create widgets
based on these
components. To do,
perform the following steps
for each:

In the project's context
menu in Project Explorer,
choose New > Other....



<Module>
<ModulePrefs title="Purchase Order Search">
<Require feature="sap-context"/>
</ModulePrefs>
<Content type="html" href="/<your project path>/uis/html/search.html">
</Content>
</Module>
<Module>
<ModulePrefs title="Purchase Order Reports">
<Require feature="gadgetprefs"/>
</ModulePrefs>
<Content type="html" href="/<your project path>/uis/html/report.html">
</Content>
</Module>


221

2) In the New dialog box,
choose SAP HANA
Development > Widget,
and choose Next.

222

3) In the New Widget dialog
box, choose the parent
folder, enter the file name,
browse to the specification
file name, and choose Next.

4) In the next step, see that
the widget's title appears as
defined in the specification
XML.

5) Repeat this procedure to
create the tabs, search and



223

report widgets, using the
corresponding specification
XML files. Save and
activate all files.

Create an Application Site
1) In the next step, you will
create an application site
that acts as a UI container
for the widgets comprising
the application.

In the project's context
menu in Project Explorer,
choose New > Other


2) In the New dialog box,
choose SAP HANA
Development >
Application Site, and then
choose Next.

224

3) In the New Application Site
dialog box, select a parent
folder, enter the site
properties, deselect the
Open in browser checkbox
and choose Finish.


Design an Application Site
1) In the Project Explorer,
double-click
PO_APPLICATION_SITE.x
sappsite to open the
application site in the
browser-based design
environment. In this
environment, you can
create and manage pages,
and place and organize
widgets to support a
business scenario.



225

2) Open the Widgets pane
choosing Widgets on the
blue design panel. The
widgets that were created
and activated in the
previous steps appear in
the pane

3) Drag and drop each of the
four widgets on the page,
resize and adjust them as
required.


4) To make the application site
available to end users,
activate it in the SAP HANA
Studio

Implementing Communication
Between Widgets
1) As of now, even though
your widgets are on the
same page, they are
disconnected. In order to
make them communicate
with each other in a
meaningful way, use the
UIS sap-context feature. To
do so, make the following
modifications in the
JavaScript files in the SAP
HANA Studio project.

In Table.controller.js,
publish the row selection
event using the
gadgets.sapcontext.Publish
method:




//Table Row Select Event Handler
onRowSelect: function(oEvent){
var oTable = oEvent.getSource();
var povalue =
oEvent.getSource().getModel().getProperty("PurchaseOrderId",oTable.getContextByIndex(oTabl
e.getSelectedIndex()));
if(povalue){
gadgets.sapcontext.publish("rowSelect", povalue);
}
},
226


2) In Detail.view.js
subscribe to the row
selection change using the
gadgets.sapcontext.S
ubscribe method.





3) Add the following code to
Detail.controller.js to
support
contextRowSelect.





4) In the application site in
browser, click on a row in
the Purchase Order Worklist
widget, and see the details
of this order displayed in the
Purchase Order Details
widget as a response.


5) In Search.controller.js,
publish the search term
change event:


//Reports Tab
//buildReportsTab(oController, oTabStrip);

//Attach a controller event handler to the Header PO Table Row Select Event
//sap.ui.getCore().byId("poTable").attachEvent("rowSelectionChange", oController.onRowSelect);

/*UIS - make sure connection with container has been established then subscribe to events*/
gadgets.HubSettings.onConnect = registerContext;
function registerContext(){
function rowSelectContextChanged(topic, context){
/*Get property rowSelect from context and call Detail.Controller
contextRowSelect(purchase_order_id)*/
var poId = context.getPropertyByKey("rowSelect")[0];
oController.contextRowSelect(poId);
}
/*UIS - Register context changes for property rowSelect*/
gadgets.sapcontext.subscribe(rowSelectContextChanged);
}
contextRowSelect: function(poId){

var Context = "/PurchaseOrderHeader(PurchaseOrderId='"+poId+"')";
var oLayout = sap.ui.getCore().byId("mLayout1");
var oLayout2 = sap.ui.getCore().byId("mLayout2");
oLayout.bindContext(Context);
oLayout2.bindContext(Context);
//oView.bindContext(Context);ddd

var oTableItems = sap.ui.getCore().byId("poItemTable");
var ContextItem =
"/PurchaseOrderHeader(PurchaseOrderId='"+poId+"')/PurchaseOrderItem";
var sort1 = new sap.ui.model.Sorter(
"PurchaseOrderId,PurchaseOrderItem");
oTableItems.bindRows(ContextItem,sort1);
},
setFilter: function(terms, attribute)
{
//filterTerms = terms;
/*UIS - Publish searchTerms changes*/
gadgets.sapcontext.publish("searchTerms", terms);



227




6) In Table.view.js,
subscribe to this event:







7) In Table.controller.js,
create the setFilter
method to support search
filter changes (similar to
setFilter in
Search.controller.js).


oToolbar1.addItem(oButton1);

oTable.setToolbar(oToolbar1);

/*UIS - Register context changes for property searchTerms*/
gadgets.HubSettings.onConnect = registerContext;
function registerContext(){
function searchContextChanged(topic, context){
var terms = context.getPropertyByKey("searchTerms")[0];
oController.setFilter(terms,"COMPANY");
}
gadgets.sapcontext.subscribe(searchContextChanged);
}
return oTable;
228




8) In the application site in
browser, type a search term
in the Purchase Order
Search widget, choose a
suggestion and see
matching results appear in
the Purchase Order Worklist
table.


setFilter: function(terms, attribute)
{
//filterTerms = terms;
var mySplitResults = terms.split(' | ' + oBundle.getText("attribute") + ' ');
gFilterTerms = mySplitResults[0];
gFilterAttribute = mySplitResults[1];

if(gFilterTerms=="*") this.emptyFilter();

oTable = sap.ui.getCore().byId("poTable");

//Change from the Display Attribute Names to the property names in the ODATA service
switch(gFilterAttribute)
{
case 'Company Name':
gFilterAttribute='CompanyName';
break;
case 'Product ID':
gFilterAttribute='ProductId';
break;
case 'Product Name':
gFilterAttribute='ProductName';
break;
case 'Product Desc':
gFilterAttribute='ProductDesc';
break;
case 'City':
gFilterAttribute='PartnerCity';
break;
case 'Category':
gFilterAttribute='ProductCategory';
break;
case 'Purchase Order ID':
gFilterAttribute='PurchaseOrderId';
break;
}


//Build OData Service Sorter by PO ID, and Item
var sort1 = new sap.ui.model.Sorter("PurchaseOrderId,PurchaseOrderItem");

//Build the OData Service Filter Options
if(gFilterTerms=="")
{ oTable.bindRows("/PO_WORKLIST",sort1,[]); }
else
{ var aflt1 = new
sap.ui.model.Filter(escape(gFilterAttribute),sap.ui.model.FilterOperator.EQ,escape(gFilterTerms));
oTable.bindRows("/PO_WORKLIST",sort1,[aflt1]); }

//Set the Number of Rows in table header and clear the table lead selection
var iNumberOfRows = oTable.getBinding("rows").iLength;
oTable.setTitle(oBundle.getText("pos",[numericSimpleFormatter(iNumberOfRows)]));
oTable.clearSelection();

},


229




Personalize Preferences
1) You can personalize
widgets by using the
GadgetPrefs API that
provides read and write
access to widget
preferences persisted on
the server side.

In Report.view.js, do the
following:

Create an instance of the
GadgetPrefs object and call
gadgetPrefs.getPreference
to get the current value of
the filterReport preference.

Set the value of filterReport
preference when dropdown
selection changes, and call
gadgetPrefs.setPreference
to persist the new value.


See required additions below between comments //Add for
personalization implantation:



2) In the application site in
browser, choose an option
in the dropdown box of the
Purchase Order Reports
widget. Refresh the site and
see that your choice is
selected.


You have completed the
exercise!




function buildReport(oController) {

//Group By DDLB
oLayout = new sap.ui.commons.layout.MatrixLayout({width:"auto"});
var oGroupBy = new sap.ui.commons.DropdownBox("DDLBGroupBy", {
tooltip:oBundle.getText("group_by"),
width:"150px",
items:[new sap.ui.core.ListItem("Null", {text:"" }),
new sap.ui.core.ListItem("PartnerCompanyName",
{text:oBundle.getText("company") }),
new sap.ui.core.ListItem("ProductCategory",
{text:oBundle.getText("product_cat") }),
new sap.ui.core.ListItem("PartnerCity",
{text:oBundle.getText("city") }),
new sap.ui.core.ListItem("PartnerPostalCode",
{text:oBundle.getText("postal") }),
new sap.ui.core.ListItem("ProductId",
{text:oBundle.getText("product") })],
change:function (oEvent) {
//Add for personalization implementation (1/2)
var groupBy = oEvent.oSource.getSelectedItemId();
gadgetPrefs.setPreference('filterReport', groupBy, function () {
});
oController.setGroupBy(oEvent,oController);
//Add for personalization implementation (1/2)
}});

oGroupBy.setSelectedItemId("Null");



//Add for personalization implementation (2/2)
var gadgetPrefs = new gadgets.GadgetPrefs();
var filter = gadgetPrefs.getPreference("filterReport");
if (filter) {
oController.setContextGroupBy(filter);
}
//Add for personalization implementation (2/2)
230

APPENDIX A: INSTALLING THE WORKSHOP AND DEMO DELIVERY UNITS

Explanation Screenshot
Prerequisite Checks
3) Before installing the delivery
units for this workshop into
a new HANA System, there
are a few prerequisite
checks. This content has
been tested on SAP HANA
Revision 61 and should be
useable on Revision 60 and
higher.

You should also have
imported the HANA UI
Integration Services
Delivery if not already
installed in your system.

Before you import this
content, please check the
security configuration on the
_SYS_REPO user.

From the HANA Studio,
Expand the Security folder
for your system. Then
expand Users and double
click on _SYS_REPO.

4) Please Confirm that
_SYS_REPO has the
Object Privilege for
DEBUG(SYS) with
EXECUTE and Grantable to
Others. Without this access
the import of the role in the
workshop delivery unit will
fail.




231

5) You should also have
imported the HANA UI
Integration Services
Delivery Unit if not already
installed in your system.

From the HANA Application
Lifecycle Manager you can
check the installed delivery
units.

Access the HALM from
http://<hostname>:<port>/s
ap/hana/xs/lm/

You can then navigate to
the Products and
DeliveryUnits tabs.
In the list of Delivery Units
you should find the
HANA_UI_INTEGRATION_
SVC Delivery Unit.
Otherwise proceed to
Appendix C for steps on
how to install this Delivery
Unit.

Importing Delivery Units
6) There are two Delivery
Units which must be
installed in your system in
order to complete the
exercises in this workshop.
The first is the HANA Demo
Model (SHINE) which we
use as the base tables and
content for the workshop.

The second Delivery Unit
imports the workshop
templates, roles, and
source code website.

You must import the Demo
Model before the Workshop
Delivery Units.



232

7) Access the HALM from
http://<hostname>:<port>/s
ap/hana/xs/lm/

Go to the Upload/Download
tab and then the Import
From File. Click Browse to
select the delivery unit file
from your local file system.

Finally press Import DU
from file to start the import
process.

Perform this process for the
HANA_DEMOCONTENT_E
PM_SP6 file and then
repeat this process fort he
HANA_DEV_WORKSHOP
file.


Post-Installation Setup Steps
8) After Import, you will need
to grant a role to your user.
For a system admin you
would grant the
workshop.admin.roles::work
shop_admin role. For
workshop students you
would assign the
workshop.admin.roles::work
shop_user.

While you are maintaining
your user, make sure o set
your Session Client to 001.
This is needed for the
currency conversions in the
Analytic Views.









233





9) With a user who as the
admin role, you can
complete the configuration
of the demo model. To do
this you must run the demo
model data generator
application:

http://<hostname>:<port>/s
ap/hana/democontent/epm
SP5/admin/



10) This application can be
used to reload the base
data or to generate any
amount of data that you
want. However these steps
are options.

The only thing you must do
is choose the Create
Synonyms option once after
the first import.



You have completed the
exercise!




234

APPENDIX B: INSTALLING THE WEB IDE
The new browser based development tools the Web IDE and the Web-based Development Workbench
are both delivered in SP6. However they are shipped as Non-Automatic content. This means that the
delivery units are already installed on the file system of your HANA Server, but they have not been imported
into the repository. You must perform this import and installation manually.

Explanation Screenshot
Installation
1) From the SAP HANA
Studio, choose File->Import.



235

2) Select the import source
SAP HANA Content >
Delivery Unit, and choose
Next


3) Select the target system for
the delivery unit. Make sure
you are utilizing a system
connection that has the
necessary system
authorizations for import.


236

4) Choose the Server option.
In the dropdown list of
available files, select
<path>/HANA_XS_IDE.tgz,
and choose Finish.
.



5) Repeat this process for the
file named
HANA_XS_EDITOR.




237





You have completed the
exercise!




238

APPENDIX C: INSTALLING SAP HANA UI INTEGRATION SERVICES
SAP HANA UI Integration Services (UIS) is a set of Eclipse-based and browser-based tools, as well as client-side
APIs, which enable you to integrate standalone SAP HANA Extended Application Services (XS) applications into web
user interfaces to support end-to-end business scenarios. These user interfaces are referred to as application sites.
Pre-built SAP HANA client applications components that are integrated into application sites are referred to as widgets.

To use SAP HANA UI Integration Services, perform the following steps:

Explanation Screenshot
Installation
1) From the SAP HANA
Studio, choose File->Import.



239

2) Select the import source
SAP HANA Content >
Delivery Unit, and choose
Next


3) Select the target system for
the delivery unit. Make sure
you are utilizing a system
connection that has the
necessary system
authorizations for import.


240





4) Choose the Server option.
In the dropdown list of
available files, select
<path>/HANA_UI_INTEGR
ATION_SVC.tgz, and
choose Finish.
.



5) Assign yourself and other
users to the following roles

sap.hana.uis.db::SITE_DES
IGNER: to design
application sites

sap.hana.uis.db::SITE_USE
R: to use application sites


You have completed the
exercise!





2013 by SAP AG 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 AG.
The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. National product specifications
may vary.
These materials are provided by SAP AG and its affiliated companies (SAP Group) for informational purposes only, without representation or warranty of any kind, and
SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in
the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as consti tuting an additional warranty.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other
countries.
Please see
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark
for additional trademark information and notices.

You might also like