cd163_exercises_vho_final important for sap hana

8/9/2019 Cd163_exercises_vho_final Important for Sap Hana

http://slidepdf.com/reader/full/cd163exercisesvhofinal-important-for-sap-hana 1/87

SAP HANA – APPLICATION SERVICES BASICS

CD163

Virtual TechEd

Exercises / SolutionsRich Heilman / SAP Labs, LLC.Thomas Jung / SAP Labs, LLC.



2

Table of Contents

Before You Start ................................................................................................................................................. 3

A. HANA Studio Configuration ..................................................................................................................... 3

B. HANA Studio Add System ...................................................................................................................... 11

C. HANA Studio Add Additional User ........................................................................................................ 13

Exercise 1 ......................................................................................................................................................... 16

Create Project and Maintain a Package Structure ........................................................................................ 16

1. Create a new package. .................................................................................................................... 16

2. Create a Project .............................................................................................................................. 18

3. Link the Project to your HANA Repository ................................................................................... 20

4.

Add Packages to your Project ........................................................................................................ 22

5.

Create a New Package .................................................................................................................... 23

Exercise 2 ......................................................................................................................................................... 27

Hello World .................................................................................................................................................. 27

1.

Create an XSAPP ........................................................................................................................... 27

2.

Create a simple Hello World HTML file ....................................................................................... 32

Exercise 3 ......................................................................................................................................................... 35

OData Service ............................................................................................................................................... 35

1. Creating a simple OData Service ................................................................................................... 35

2.

Creating an OData Service With Multiple Entities ........................................................................ 39

3.

Optional: Calling the OData Service From the User Interface ...................................................... 40

Exercise 4 ......................................................................................................................................................... 45

XSJS – Server Side JavaScript Service ........................................................................................................ 45

1.

Creating a simple XSJS Service ..................................................................................................... 45

2.

Extending the XSJS Service ........................................................................................................... 49

3. Optional: Calling the XSJS Service From the User Interface ........................................................ 51

Exercise 5 ......................................................................................................................................................... 55

Bonus: Putting it all together – Purchase Order Worklist ............................................................................ 55

1.

Exercise Overview ......................................................................................................................... 55

2.

Exercise Preparations ..................................................................................................................... 57

3. The Data Model .............................................................................................................................. 64

4. XSODATA Services ...................................................................................................................... 73

5.

XSJS Services ................................................................................................................................ 75

6.

User Interface ................................................................................................................................. 79



4

3. Add -showNewFeatures XS_TEAM_PROVIDER to the Target option. This command line

launch parameter will enable the unreleased features of the HANA Developer Workbench within HANA Studio.

4. Apply the changes to the shortcut and then launch HANA Studio via it.5. Switch to the Modeler perspective in HANA Studio.

6. Choose Window->Preferences



5

7. In the Preferences dialog, navigate to Developer Workbench -> Repository Access.

8. Press the Browse button and search for the directory where you installed the HANA Client 64-bit. It shouldcontain a file called REGI.EXE.

9. You have now configured the connection between HANA Studio and a special executable within the HANAClient. This REGI.EXE is the application which allows local check-in/out of resources for editing within HANAStudio.

10. None of the perspectives within HANA Studio currently contain the unreleased developer tools which we justconfigured. Therefore we must manually add the view of these tools to the Modeler perspective.



6

11. To begin to add the view, choose Window ->Show View->Other …

12. In the Show View dialog, choose Project Explorer under the General group.



8

16. Choose Install/Update -> Available Software Sites. Then add a new software site forHTTP://download.eclipse.org/releases/helios

17. Choose Help->Install New Software

http://download.eclipse.org/releases/helios





9

18. Choose the new Install Site which you just configured in the previous step.

19. After populating the list of available tools to install, expand the Web, XML, and Java EE Development folder.Then select the following tools

o Eclipse Web Development Toolso JavaScript Development Toolso Web Page Editor



10

20. Confirm the installation details and press Next

21. Accept the terms of the license agreement and press Finish.22. Installation will then begin and take several minutes.



11

23. Upon complete you will have to restart HANA Studio

B. HANA Studio Add System

Please Note: This step has already been completed for you in the standard TechEd Frontend Image.However the steps are documented here in case you need to repeat them on your own systems.

We need to create an initial connection to the HANA Server Backend.1. From the Modeler Perspective and the Navigator View, right mouse click and choose Add System.

2. In the Specify System dialog use the following values:Hostname: coe-he-076.wdf.sap.corp



12

Instance Number: 00

3. For the Connection Properties use the following values:Your user id is CD163_XX where XX is your group number. For example if your group number is 99, then youruser id would be CD163_99. Your password is Welcome12 (case sensitive).



13

4. You should now see a connection in the Navigator for System ANA and your user.

C. HANA Studio Add Additional User

In this step we will create a new connection in the HANA Studio for your user id. This is the connection that you will

use in the remainder of the exercises. A base system connection has already been created for you (see previoussetup step). We can copy from this existing ANA system connection and apply a new User to it.

1. From the Modeler Perspective and the Navigator View of the HANA Studio, locate the existing systemconnection for system ANA. There may be multiple connections on this laptop for other TechEd sessions. Besure you are using the correct connection as your starting point. From the existing connection, right mouse



14

click and choose Add Additional User .

2. The system, hostname, and instance number have all been copied from the existing connection. You needonly supply your user name and password in the Connection Properties dialog. Your user id is CD163_XX where XX is your group number. For example if your group number is 99, then your user id would beCD163_99. Your password is Welcome12 (case sensitive).

3. Press Finish. A new ANA System Connection for your user is now visible in the Navigator view. This is the

system connection you should use for all exercises.



15



16

Exercise 1

Create Project and Maintain a Package Structure

In this first exercise we will learn the basics of project and package setup. All transportable work must be placed into a

HANA package. The package provides both the namespace for development objects but also the grouping of itemsinto Delivery Units. Delivery Units are the mechanism for transporting objects between HANA Systems.

1. Create a new package.

a. From the Navigator View of the HANA Studio Modeler Perspective, expand the Content folder for your ANA System Connection. These are all the current packages which you have access to view on thissystem.

b. Expand the session folder under CD163 which corresponds to your workshop’s session. Because thishands-on session will be given multiple times at each TechEd event, we will use different sessionletters to separate each classes’ work. The session letter for virtual TechEd is Session-V.

c. We will now create a package for your group. The group numbers were assigned to you whenreceiving your virtual TechEd Information. This ensures that every attendee has a unique namespacefor their work. All the content you create today will then be placed within this unique session/group



17

package hierarchy. Right mouse click on the session-v and choose New->Package.

d. Create a new package named XX-MMDD (where XX is your group number, MM is the Month, and DDis the Day). For example if your group number were 99 and your session was V and today wasOctober 7, then you would create a package named 99-1007 under cd163.session-v.

e. You have your new, empty package. From the Navigator you can create artifacts like HANA Views orSQLScript Procedures. However we want to create new developer centric artifacts which run in theXSEngine. These types of artifacts cannot be created or edited from the Navigator tool. We will



18

therefore use the Team Provider/Project Explorer for the remainder of this workshop.

2. Create a Project

a. From the Project Explorer View (just below the Navigator View we have been using up until this point),right mouse click and choose New->Project



19

b. Choose General->Project. In HANA 1.0 SP4, HANA Studio Team Provider doesn’t yet support anyother type of Eclipse projects. There will be HANA specific project types in HANA 1.0 SP5.

c. This project is only created on your client machine; therefore the name you choose doesn’t have tomatch anything on the server even if this is a shared HANA system with many developers. However,for this TechEd workshop we will use a naming standard for the projects since these laptops will beused for multiple workshops. Please create a project named CD163#-XXMMDD where # is yourSession Letter, XX is your group number, MM is the Month and DD is the date. For example if youwere in Session V and your Group Number was 99-1007, then your Project would be named CD163V-99-1007.



20

d. You now have a standard Eclipse project folder in your Project Explorer; however it is not yet linked toany HANA system.

3. Link the Project to your HANA Repository

a. Right mouse click on your new project folder and choose Team->Share Project.

b. Depending upon your version of the HANA Studio, you MIGHT receive a dialog asking you to selectyour Repository type. The HANA Studio we are using for TechEd only has the SAP HANA Repository

plug-in installed and therefore this step is skipped. On other systems you might use in the future you



21

could see a dialog which looks like this where you need to choose SAP HANA Repository.

c. You should then see a list of all the configured HANA Systems and Users within your HANA Studio.Choose the system ANA for your User ID (CD163_XX where XX is your Group Number – For Exampleif your Group Number is 99, then your user is CD163_99).

d. Click Finish and then wait while the meta data of the repository is copied to your local folder. This stepcan take a minute or more to complete.



22

e. The icon of your project folder is now changed to show the connection to the HANA Repository.Likewise the folder description now contains the connected HANA System ID and User.

4. Add Packages to your Project

a. Right mouse click on your new project and choose Team->Add Packages.

b. From the list of all available packages in the HANA Repository, choose the one you created in theearlier step named XXMMDD (where XX is your group number, MM is the Month, and DD is the Date).For example if your group number were 99, your session was V and today was October 7 th; then the



23

package you choose here would be cd163.session-v.99-1007.

c. This package is now part of your project. A local folder has been created within the Eclipse projectworkspace. Any files or folders which you create within this folder will automatically be committed tothe HANA Repository. You can now work with the project like any standard Eclipse project, yetartifacts are stored, versioned, and activated on the HANA server.

5. Create a New Packagea. Once we have the project connection to HANA we can create sub- packages from the Project Explorer.

Begin by right mouse clicking on your group number package within the Project and choosing New-



24

>Folder .

b. Create a ui (case sensitive) folder for holding user interface artifacts.



25

c. Repeat the previous steps to create a package named logic (also case sensitive) within your grouppackage.



26

d. You could now go back to the Navigator view and refresh the Content folder. You should be able tosee your newly created ui and logic packages from this view as well.



27

Exercise 2

Hello World

In this second exercise we will learn the basics of HANA Repository/XSEngine based development. We will focus on

the developer process and tools and not necessarily any particular programming model. In later exercises we willintroduce two of the major programming models.

1. Create an XSAPP

a. The first artifacts we must create is the XSAPP (or XSA on HANA 1.0 Rev 33 or lower). The XSAPPfile is necessary for exposing any content via the XSEngine web server. It controls the userauthentication as well as the URL path of the application.

b. Begin by right mouse clicking on the group number package/folder of your project and choosing New->File

c. Create a file named cd163 and which ends in the extension xsapp. The full name should becd163.xsapp. The names of the individual development artifacts don’t need to be unique because the



28

package hierarchy also functions as the namespace and web server path.

d. The newly created file is visible in your Project Explorer. The icon (white star on a black background)for the file signifies that this object exists on the client side but has not been committed to the HANARepository yet.



29

e. After a short time, the file will automatically be committed to the repository and the icon will change.This icon (grey diamond) means the file is in the repository, but there is an inactive version.

f. Commits to the repository happen automatically whenever you save files on the client side or can beforced by choosing Team -> Commit.



31

j. You should notice that as soon as you save the file, the client is committing the changes to the server.This dialog is displayed in the very bottom right hand corner of HANA Studio.

k. All objects are stored in an inactive state when first committed. Therefore before this artifact can beused on the server it must be activated. Choose Team->Activate from the parent folder. This willactivate all inactive objects. Individual object activation is not yet supported in HANA 1.0 SP4;therefore activation always takes place at the folder/package level.

l. Once successfully activated, the icon next to the object will change.



32

2. Create a simple Hello World HTML file

a. Now we need to create a simple HTML file so that we have something which we can execute from theweb browser. Begin by creating a new file within the ui folder called HelloWorld.html (see creationsteps from previous part of the exercise).

b. The HTML page tries to open in an in-place web browser. Instead we want to edit the file. Rightmouse click on the file and choose Open With … Text Editor instead.

c. Place the following HTML code into the new file. This should create a simple HTML5 page basedupon the SAPUI5 framework with a single Button. When the button is pressed it should disappear.

Note: if you don’t want to type this code, we recommend that you cut and paste it from this webaddress

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html






33

d. Save and then activate your new content.

e. Launch Internet Explorer 32-bit. The URL path matches your folder/package structure. It would behttp://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/ui/HelloWorld.html where # is yoursession letter, XX is your group number, MM is the Month, and DD is the Date. For example if yoursession letter was t and your group number was 99 and today was October the 7th then the URLwould be:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/ui/HelloWorld.html

You will be prompted for authentication. Use your current HANA System Username and Password:Your user id is CD163_XX where XX is your group number. For example if your group number is 99,then your user id would be CD163_99. Your password is Welcome12 (case sensitive).






34

f. The URL path and resource names for the XSEngine are currently case sensitive. Therefore acommon mistake of removing the case when typing the URL would result in the following error

message.

g. Congratulations! You have just built your first HANA Application Services based application.



35

Exercise 3

OData Service

1. Creating a simple OData Service

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

b. By applying what you’ve learned in the previous exercises; create a new file called cd163.xsodata inthe logic package of your project.

c. Eclipse doesn’t really know what editor to use for XSODATA files, so it tried to open Notepad from theoperating system. We can open the file in a better editor using right mouse click and Open With ->Text Editor .



36

We want to define an OData service to expose the business partner table. The syntax of theXSODATA service is relative easy for this use case. We need only define a namespace(teched.163.logic), the table schema (TECHEDEPM), the name of the HANA Table we will base theservice from (teched.epm.db/businessPartner ) and the name of the OData entity(BusinessPartners). Therefore the content of the XSODATA file would be.

You can also access the exercise solution code from:http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=3.1

d. Activate and run your service. The URL to run your service would be http://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/logic/cd163.xsodata where # is your session letter,XX is your group number, MM is the Month, and DD is the Date. For example if your session letterwas t and your group number was 99 and today was October the 7th then the URL would be:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsodata

e. You should see output similar to this since Internet Explorer, without any 3rd

party plug-ins, doesn’tknow how to display the ATOM format of the OData document. Choose Save and open. Alternativelyyou can attempt to test in Chrome (available from the Start Menu under Browsers). We recommendChrome for this exercise because it opens the content without having to use the Save and openoptions.

f. On any of these tests you might receive the Error that the content couldn’t be downloaded afterchoosing Save and open. If you receive this error, simply choose Retry and the content should appear.

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=3.1








37

g. You will then have an Operating System provided Open with dialog similar to this. Use Notepad todisplay the results.

h. The resulting document describes the service entities. We only had the one entity namedBusinessPartners.

i. 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://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-

MMDD/logic/cd163.xsodata/$metadata where # is your session letter, XX is your group number, MM isthe Month, and DD is the Date. For example if your session letter was t and your group number was99 and today was October the 7th then the URL would be:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsodata/$metadata






38

j. Following the same steps as before to save the document and open it in Notepad, you can see thefield descriptions for all the attributes of the OData service.

k. In order to view the data of the entity, you would append BusinessPartners to the end of the URL.http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsodata/BusinessPartners/

Although the formats of the data returned from the OData Service aren’t really intended for humanconsumption or display in the web browser. In later steps of this exercise you will see how this ODatais easily consumed by HTML5 UI elements on the client side. There are also free plug ins available formany browsers which can assist with the display of this content for testing.

l. You can also experiment with standard OData URL parameters like $top, $skip, or $filter. Theseoptions are interpreted and handled by the OData service of the XSEngine for you. You get complexservice 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

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsodata/BusinessPartners/





39

server side scrolling, filtering, or sorting in table UI elements.http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsodata/BusinessPartners/?$top=3&$skip=5

2. Creating an OData Service With Multiple Entities

a. The first example of this exercise was very simplistic because it only exposed one database table as asingle entity. Often you need to also represent relationships between multiple entities. For example wemight want to build an OData service which has both the Business Partner information but also theBusiness Partner Address. For this we would build a 1:1 relationship between the two entities.

Returning to HANA Studio, you should now edit your pervious cd163.xsodata service definition fileand extend it to include the teched.epm.db/addresses table with an entity name of BPAddress. Nextcreate a navigation 1:1 association named Address between the AddressId field of the BusinessPartner table and the Addresses table. The new content of the definition file should look like this:You can also access the exercise solution code from:

You can also access the exercise solution code from:http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=3.2

b. Save and activate the service definition file.

c. Test using the same steps as in the previous section of this exercise. The URL to run your servicewould be http://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/logic/cd163.xsodata where# is your session letter, XX is your group number, MM is the Month, and DD is the Date. For exampleif your session letter was t and your group number was 99 and today was October the 7th then theURL would be:


Notice that the base service definition now has two entities:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsodata/BusinessPartners/?$top=3&$skip=5













40

d. The Business Partner data now has a hyperlink relationship to the address entity

3. Optional: Calling the OData Service From the User Interfacea. As we’ve seen, the OData Service isn’t necessarily designed to be easily human readable. However

they are very well suited for enabling data exchange to mobile devices and browser basedapplications. In this exercise we will build a user interface table which is bound to our XSODATAservice we’ve designed up to this point.

b. In the UI Package of your project create a new HTML file named xsodataTest.html.

c. The HTML page tries to open in an in-place web browser. Instead we want to edit the file. Rightmouse click on the file and choose Open With … Text Editor instead.



41

d. To avoid having to do too much typing, we have prepared some template code for you which alreadyhas 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 your xsodataTest.htmlfile:


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

f. The first To-Do is where you can place the logic to create the OData model and link it to the URL ofyour service. Here we use relative URLs, so the browser automatically uses the cd163.xsodataservice from the logic folder under your group folder.






42

var oModel = new sap.ui.model.odata.ODataModel("../logic/cd163.xsodata/",

false);

g. In the second To-Do area we want to build an automatic sort on Partner Id and then bind the table tothe Business Partners entity of our service.

var sort1 = new sap.ui.model.Sorter("PartnerId");

oTable.bindRows("/BusinessPartners",sort1);

h. That’s all that is necessary to connect the Table UI element to the OData service. We get built in tablesorting and filtering, as well as server side scrolling via the various built-in parameters of the OData

service framework.



43

i. Save and activate your xsodataTest.html page.

j. Test your xsodataTest.html application from Internet Explorer 32-bit. The URL to run your testapplication would be http://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/ui/xsodataTest.html where # is your session letter, XX is your group number, MM is the Month,

and DD is the Date. For example if your session letter was t and your group number was 99 and todaywas October the 7th then the URL would be:http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/ui/xsodataTest.html

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

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/ui/xsodataTest.html





44



45

Exercise 4

XSJS – Server Side JavaScript Service

1. Creating a simple XSJS Service

a. 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 acustom output format. For this reason, we can also write custom service handlers using server sideJavaScript.

b. Using what you’ve learned in the previous exercises, create a new file within the logic package calledcd163.xsjs.

c. Eclipse doesn’t really know what editor to use for XSJS files, so it tried to open Notepad from theoperating system. We can open the file in a better editor using right mouse click and Open With ->Other .



46

d. From the Editor Selection dialog, choose JavaScript Editor . This way you will get syntax highlightingand other features specific to editing JavaScript.

e. We want to create a service which will accept two input integer values and multiply them together. Theresults of this math will be passed back as text in the body of the response object.

f. You can access the completed source for this exercise here if you wish to cut and paste it.







47

g. We will explain it block by block in a moment.

h. We begin the XSJS file with the function which will handle the primary action of our service handler – performing the multiplication. It reads the two input parameters from the request object. Aftermultiplying them together, it places the result back into the response body. It also sets the responsereturn code to OK.

i. This block is actually the entry point to the service handler but must appear after all referencedfunctions. Here we can query the request URL and determine which action to take. This way a singleXSJS file might have multiple services or query parameters. We will look for the URL parameter calledcmd to decide which path to take. For now we will only support cmd=mult ip ly . Later we will addanother operation to our service. These are just examples, as you have complete control over the



48

definition of all URL parameters and how they are handled by the service.

j. Save and activate the new service handler file.

k. Test the application in Internet Explorer 32-bit. The URL to run your service would be http://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/logic/cd163.xsjs?cmd=multiply&num1=10&num2=5 where # is your session letter, XX is your

group number, MM is the Month, and DD is the Date. For example if your session letter was t and yourgroup number was 99 and today was October the 7th then the URL would be:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsjs?cmd=multiply&num1=10&num2=5

l. Go ahead and change some of the values you pass in via num1 or num2 parameters to test that themultiplication is working properly.








49

m. Try changing the value passed to the cmd parameter.

2. Extending the XSJS Service

a. Now we want to extend the XSJS service from the first half of this exercise. We’ve already seen howwe can use our own custom logic in an XSJS service. Next we want to see how we can use a customoutput format. We will also see how we can perform SQL to use data from the database, butmanipulate or format that returned data. The final result will be a service which reads the BusinessPartner data but returns it in a tab delimited format ready to open in Microsoft Excel.

b. Continue editing the cd163.xsjs file from the previous part of this exercise.

c. You can access the completed source for this exercise here if you wish to cut and paste it.

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=4.2 We will explain it block by block in a moment.

d. We add a new function to handle the data retrieval from the Business Partner Table and formatting intoText 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 SQLQuery and pass it to the database using syntax very similar to JDBC or ODBC. In reality, the XSengine 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 outputwe 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.






50

e. Next we extend the entry point switch to test for the new command: excel.

f. Save and activate the edited cd163.xsjs file.

g. Test the application in Internet Explorer 32-bit. The URL to run your service would be http://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/logic/cd163.xsjs?cmd=excel where # is your

session letter, XX is your group number, MM is the Month, and DD is the Date. For example if yoursession letter was t and your group number was 99 and today was October the 7th then the URLwould be:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/logic/cd163.xsjs?cmd=excel

h. You should see an Open/Save prompt in the browser:

i. Choose Open and Excel should open. You will receive a dialog warning, but go ahead and choose Yes.








51

j. Your data should then show up in Excel.

3. Optional: Calling the XSJS Service From the User Interface

a. While the XSJS was relatively easy to test from the web browser directly via URL parameters, it is alsobeneficial to see what kind of client side JavaScript could be used to integrate such a service call into

the user interface. In this exercise we will build a user interface with two input fields for the numericvalues which are multiplied. We will then call the service on the server when the user changes thevalue in either field. Note: of course you could perform simple math on the client side. We are usingthis very simple example in order to focus on the techniques for creating and calling the XSJS serviceswithout needing to get into too much detail. The final exercise of this workshop contains a much morerealistic service implementation.

b. In the UI Package of your project create a new HTML file named xsjsTest.html.



52

c. We will use a more sophisticated approach in this test web page than in the previous one. This time wewill leverage the Model View Controller techniques of SAPUI5. Therefore we will need to create a sub-package/folder called xsjsTest within our ui package.

d. Now create two JavaScript files within this new xsjsTest package. Name one Multiply.controller.js and one Multiply.view.js.

e. To avoid having to do too much typing, we have prepared some template code for you which alreadyhas the definition of the UI elements and the event triggers to call your service.

You can cut and paste this template code from this address into your xsjsTest.html file:

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=4.3a

You can cut and paste this template code from this address into your Multiply.view.js file:

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=4.3b









53

You can cut and paste this template code from this address into your Multiply.controller.js file:

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=4.3c

f. Template code is complete except in the case of the Multiply.controller.js. Here we have two To-Dosections where the service call to your XSJS service must be placed.

g. In both of these To-Do locations you need to place the jQuery.ajax call to the URL of your XSJSservice, passing the value from the two UI input fields to the corresponding URL parameters.






54

h. Save and activate the three files you’ve just created.

i. Test your xsjsTest.html application from Internet Explorer 32-bit. The URL to run your test applicationwould be http://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/ui/xsjsTest.html where # is

your session letter, XX is your group number, MM is the Month, and DD is the Date. For example ifyour session letter was t and your group number was 99 and today was October the 7th then the URLwould be:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/ui/xsjsTest.html

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








55

Exercise 5

Bonus: Putting it all together – Purchase Order Worklist

1. Exercise Overview

a. The exercises so far have been intentionally small in scope so that you can focus on learning individualtechniques. However it is also good to see how all these parts fit together into a large scale, realisticapplication. This bonus exercise will utilize both XSODATA and XSJS services to present a purchaseorder worklist with 1.1 million records. It will have a connection between hierarchy levels of theXSODATA service to display PO Items for the selected Purchase Order Header.



56

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

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

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



57

pre-built aggregates.

e. Because of the size and complexity of this final solution, this exercise is not so much about building thecomplete solution from scratch. Instead it is designed to be a walkthrough and explanation of themajor parts of this application which you can study also at a later time. It intentionally doesn’t cover100% of the steps required to build this complete application.

f. If at any time you want to execute the completed exercise, you can run it from Internet Explorer 32-bitvia the following URL:

http://coe-he-076.wdf.sap.corp:8000/teched/epm/ui/poWorklist.html

2. Exercise Preparations

a. Before you begin building this exercise, you will need access to a large number of template objects.Within the cd163 package there is already a sub-package named template which contains all the






58

content you will need to build this exercise.

b. The easiest way to access this content is to create another project and check out this package into it.Unlike the session package you’ve been using, your account has read only access to the templatepackage. 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.



59

c. Begin as we did very early in this workshop by creating a new Project named CD163_Template in theProject Explorer.



60

d. Use the Team->Share Project option to connect this Project to the same HANA connection as theworkshop project you’ve been using.

e. From your new CD163_Template project use Team->Add Packages to add the cd163.template.00 package.

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



61

work.

g. Remember that you have Read Only access to this template package. Therefore if you accidentallychange something and save it, you get a problem marker with a failed commit and the message that



62

your User is not authorized.

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



63

well as resetting the problem marker.

i. If at any time you want to execute the completed exercise, you can run it from Internet Explorer 32-bitvia the following URL:







64

3. The Data Model

a. All the tables which are needed by this application are contained in the Schema TECHEDEPM.

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

c. You might take a few minutes to look at each of the tables in this Schema, as this exercise applicationwill use all of them. You will be able to better see the relationships between the tables in a momentwhen we look at the views, but understanding the low level structure of the data model at the table

level can also be useful.



65

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 employeesare also stored together in a central addresses table.

If you have an ABAP development background, you might be familiar with the concept of DataDictionary 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 singlecharacter code, but displays a language dependent description at runtime.

In HANA we don’t yet have a similar concept to the Data Dictionary Domain. Therefore in thisproject we created a central constants table which holds all the domain values and languagedependent descriptions. This table can then be joined to each of the entity tables to providethe proper descriptions for fixed values.



66

d. Any table in HANA can be created via the Navigator New Table menu option or via SQL CREATETABLE syntax. That wasn’t actually how these tables were created. When you create the tables

directly in a Schema via SQL, they aren’t assigned to a package and therefore not transportable viaDelivery Unit like the rest of the artifacts we’ve been creating today.



67

The sample SQL Syntax to create a table in HANA

As part of XS based development we also have an artifact called HDBTABLE, which allows usto define tables, table types, etc. The HDBTABLE objects are edited as source files just likeXSJS and XSODATA objects. When you activate them via the Team Provider, they causethe specified database objects to be created or altered.

Although the syntax for the HDBTABLE objects will change between HANA 1.0 SP4 and SP5,here is a sample of the current SP4 syntax. All the tables in this workshop were created withthis approach.

e. Once you have fully studied the tables of this workshop data model, let’s move onto the Views of thedata model. This is where the relationships between the various entities in the data model are defined.

All the views were created with the package teched.epm.db and are visible and editable via the



68

Navigator view of HANA Studio.

f. For example the BUSINESS_PARTNERS_EXTENDED view combines the businessPartner with theaddresses, employees (for the created by and change by details), and constants (for the BusinessPartner Role Description) tables.



69

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

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

A simple SELECT SUM on the GrossAmount column would not produce accurate resultsbecause we have various currencies in use. A quick SQL Statement verifies that we have



70

multiple currencies in use within our data.

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



71

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

The real power comes from the Currency Conversion. We configure a currency conversionbased upon the CreatedAt date of the purchase order using the Currency field from the



72

purchase order as the source and the COMMON_CURRENCY Input Parameter as the target.

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 selectthe aggregated converted GrossAmount by product categories and have the results back in433 milliseconds.



73

4. XSODATA Services

a. To support the user interfaces requirements we will need to create two XSODATA Services.

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

Begin by creating a file named poWorklist.xsodata in the logic package of your workshopproject.



74

Using what you learned in the earlier exercises, create an OData service definition for the Attribute View teched.epm.db/PURCHASE_ORDER_WORKLIST named PO_WORKLIST.One major difference for the earlier exercise is that we are now using a View instead of aTable. Therefore you must also use the addition keys(“PurchaseOrderId”,”PurchaseOrderItem”) 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 Exercise 3.

c. 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 thePurchase Order Items Table. This service will only display the single entity details for the selectedrecord in the main Purchase Orders UI Table.



75

Begin by creating a file named poWorklistJoin.xsodata in the logic package of yourworkshop project.

Using what you learned in the earlier exercises, create an OData service definition for the Attribute View teched.epm.db/PO_HEADER_EXTENDED with the keys(“PurchaseOrderId”) named PO_WORKLIST. The second entity, called PO_ITEMS, will usethe Attribute View teched.epm.db/PO_ITEM_EXTENDED and needs the keys("PurchaseOrderId","PurchaseOrderItem","PurchaseOrderSchedule") . Finally create a 1to 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 weimported earlier.

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

5. XSJS Services

a. In order to support the user interface requirements we will create two XSJS services. One will containall the read only activities while the other contains the data update operations.

b. The Query XSJS service will handle the Super Search filter event. As the user types into this field thevalue will be sent to the server and multiple queries will executed across the various search field showpossible matching values.



76

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



77

Begin by creating a file named poWorklistQuery.xsjs in the logic package of your workshopproject.

Copy the template implementation of poWorklistQuery.xsjs from the CD163_Template project. This includes a partial implementation which will save you some time typing. Forexample it already has the complete Excel Download implementation that we created inExercise 4.

You can study the implementation of the getFilter function (which supports the Super Search),although it isn’t all that much different than the Excel Download from Exercise 4. The major

difference is the output format of JSON instead of text tab delimited.

The getTotalOrders function implementation is missing and you must complete it.

Based upon what you’ve learned about creating XSJS services, create an implementation forthis 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 againstteched.ep.db/PO_ITEM_DETAILS_COMMON_CURRENCY for the top 5 summarized

common currency GrossAmount values. Transform the results to a JSON structure named



78

entries, using the attributes name and value. Don’t forget to escape your SQL Statement forusage within JavaScript.

If you have problems and need a sample implementation, you access it from this URL:


c. The Update XSJS service will support the Delete, Approve and Reject actions.

Begin by creating a file named poWorklistUpdate.xsjs in the logic package of your workshopproject.

Copy the template implementation of poWorklistUpdate.xsjs from the CD163_Template project. This includes a partial implementation which will save you some time typing.






79

There is already an implementation for the approvePO function, but a critical section of thedeletePO function is missing.

By studying the logic of the approvePO function, adapt that implementation to complete thedeletePO function. In order to delete a Purchase Order, you need to set the LifecycleStatus to X.

If you have problems and need a sample implementation, you access it from this URL:


6. User Interface

a. The final step is to create the user interface itself. There are many files which are part of this userinterface as we have heavily utilized the MVC (Model View Controller) design in order to providemodularity.






80

b. The easiest way to begin is to copy the poWorkslist.html and all objects within the poWorklist package from the CD163_Template project to your workshop package.

Open Windows Explorer and navigate to your HANA Studio workspace(C:\Users\student\hdbstudio). Here you will see each of your projects represented by filesystem folder.

Copy poWorklist.html and the folder poWorklist from the template project.



81

Now Paste the objects into the ui package of your project workspace.

Return to the Project Explorer in HANA Studio. You will notice the new files and folders don’tshow up yet. Do NOT press F5 or choose Refresh from the menu. This will refresh the project

from the server, not the client, and overwrite the files we just copied. If you do this, pleaserepeat the previous steps. Instead choose Team->Commit. This will force the new files to besent to the server and will consequently also show up in the Project Explorer.



82

You should now see all the template objects for the UI in your workshop project.

Like the previous parts of this exercise, the templates are incomplete and have several To-Dosections which you must complete.

c. We’ve briefly discussed the MVC technique in SAPUI5, but we haven’t really studied the code neededto initialization MVC from the start HTML page. In this first To-Do block, you must add the MVCinitialization to poWorklist.html.



83

First use sap.ui.localResources to set the sub-package poWorklist as the storage location forall View and Controller files.

Next create the initial view named poWorklist.Shell of type JavaScript.

Place the View at the content div location.

You can also cut and paste this code from this URL:


d. In all the previous exercises, we have hardcoded the text strings into the UI. For this final, morerealistic example; we want to use proper text resource files. In the res package we already have thedefault English and German text property files. Now we want to add in the code to utilize these textresources.

In the global.js file, there is a To-Do near the beginning where we need to add the initializationof the text processing.

The following three lines of JavaScript code need to be added in order to access the currentLanguage Locale and initialize a text bundle object for later usage. You can also cut and paste






84

this code from this URL:

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=5.6d

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

Later you can test the UI in the alternative German texts by adding sap-ui-language=de to theURL.






85

e. Similar to Exercise 3.3, we want to bind the poWorklist.xsodata service to the Purchase Orders Tablein the Table.view.js file. Utilizing what you learned in this earlier exercise, please implement the twoTo-Do sections in this file.

If you have any problems you can also access the solution code from this URL:

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=5.6e

f. Simliar to Exercise 4.3, we want to connect the custom XSJS search service to the user interface. Wewill begin by creating the UI elements in the Search.view.js.

We need to create a Panel, a Search Field with both the search and suggest events. You canaccess the solution code for the UI elements from this URL:

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=5.6f









86

g. Now that we have the UI elements for the Search, we also need to implement the event handlers inSearch.controller.js.

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

If you have any problems you can also access the solution code from this URL:

http://coe-he-076.wdf.sap.corp:8000/teched/cd163/exercises.html?sub=5.6g

h. Save and activate all the objects within the ui package of your workshop project.i. Test your poWorklist.html application from Internet Explorer 32-bit. The URL to run your test

application would be http://coe-he-076.wdf.sap.corp:8000/cd163/session-#/XX-MMDD/ui/poWorklist.html where # is your session letter, XX is your group number, MM is the Month,

and DD is the Date. For example if your session letter was t and your group number was 99 and todaywas October the 7th then the URL would be:

http://coe-he-076.wdf.sap.corp:8000/cd163/session-t/99-1007/ui/poWorklist.html











© 2012 by SAP AG. All rights reserved.SAP and the SAP logo are registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo are trademarks orregistered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and the Sybase logo are registered trademarks of Sybase Inc.Sybase is an SAP company. Crossgate is a registered trademark of Crossgate AG in Germany and other countries. Crossgate is an SAP company.

cd163_exercises_vho_final important for sap hana

Documents