CD164_exercises_solutions.pdf

8/11/2019 CD164_exercises_solutions.pdf

http://slidepdf.com/reader/full/cd164exercisessolutionspdf 1/75

BUILDING USER INTERFACES FOR SAP HANA

NATIVE APPLICATIONSCD164

Exercises / Solutions

Rich Heilman / SAP HANA Product ManagementThomas Jung / SAP HANA Product Management

Tobias Kaufmann / Customer Solution AdoptionDavid Kviti / Product OwnerMakoto Sugishita / Customer Solution AdoptionWinfried Wenisch / Product Owner



2

Contents

Getting Help ........................................................................................................................................................... 4

Source code solutions ............................................................................................................................................ 4

Exercise 1 – Logon, Project Setup, and Hello World ......................................................................................................... 5

Exercise 1 – Solution ......................................................................................................................................................... 6

Create a connection to the HANA server ............................................................................................................... 6

Create a group package ........................................................................................................................................ 8

Create a Repository Workspace ............................................................................................................................ 9

Create a SAPUI5 Project ....................................................................................................................................... 9

Share the SAPUI5 Project with the HANA Repository ......................................................................................... 13

Testing your Hello World Application ................................................................................................................... 17

Creating a Text Bundle (Optional) ....................................................................................................................... 18

Exercise 2 – OData Services ........................................................................................................................................... 22

Exercise 2 – Solution ....................................................................................................................................................... 23

Consume a Basic OData Service within UI5 binding the service to a Table ....................................................... 23

Use OData Metadata to dynamically create the columns. ................................................................................... 28

Consume an OData Service with Create Option ................................................................................................. 29

Exercise 3 – Server Side JavaScript ............................................................................................................................... 36


Consume XSJS Services via JQuery AJAX calls ................................................................................................ 37

Use the liveUpdate and linked fields for interactive search ................................................................................. 42

Exercise 4 – UIS – Integrate Purchase Oders List and Details ....................................................................................... 47


Create Widget XML Specification ........................................................................................................................ 48

Create Widgets .................................................................................................................................................... 49

Create Application Site ........................................................................................................................................ 51

Design Application Site ........................................................................................................................................ 54

How communication Between Widgets works ..................................................................................................... 56

OPTIONAL: Create the Report Widget ................................................................................................................ 57

Enable Widget Personalization ............................................................................................................................ 60

Appendix A – Getting Started – Steps which were already done on the Client Image for you ....................................... 63

Appendix A – Solution...................................................................................................................................................... 64

Configure Regi for SAP HANA Studio ................................................................................................................. 65



3

Installing SAPUI5 Tools into SAP HANA Studio .................................................................................................. 66

Appendix B: Installing SAP HANA UI Integration Services ............................................................................................. 71

Installation ............................................................................................................................................................ 71



4

BEFORE YOU START

User: CD164Y_XX – Where Y is your Session ID and XX is your ASSIGNED Group Number – Example: CD164A_01

PASSWORD: HANARocks2013

SERVER: coe-he-084.wdf.sap.corp

SYSTEM Number: 20

HTTP Port: 8020

Session Id:

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/hana_dev_en.pdf

The integrated help within SAP HANA Studio (content identical to the above mentioned online help)

For SAPUI5, the development SDK is delivered in every HANA system. For this system you can load it from:http://coe-he-084.wdf.sap.corp:8020/sap/ui5/1/sdk/

Source code solutions

All source code solutions and templates for all exercises in this document can be found in the following webpage.http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164

In some cases it might be a little easier to copy and paste the coding instead of typing it all manually. Ifcopying/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 sourcecode for each exercise by clicking on the appropriate exercise in the navigation bar.http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd16 4

Exercise Estimated Duration

1. Exercise 1 – Logon, Project Setup and Hello World 15 minutes

2. Exercise 2 – OData Services 20 minutes

3. Exercise 3 – Server Side JavaScript 15 minutes

4. Exercise 4 – UIS – UI Integration Services 30 minutes

http://help.sap.com/hana/hana_dev_en.pdf



http://coe-he-084.wdf.sap.corp:8020/sap/ui5/1/sdk/


http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164









5

EXERCISE 1 – LOGON, PROJECT SETUP, AND HELLO WORLD

Estimated time: 15 minutes

Objective

In this exercise, you will learn the basics of creating a connection to the HANA server, creating a SAPUI5 Project, andcreating a Hello World SAPUI5 Application.

Exercise Description

Create a connection to the HANA server in HANA Studio

Create a workspace which is linked to the HANA Server

Create a SAPUI5 project which is linked to the workspace

Create a HelloWorld UI5 Application

(Optional) Create a text bundle



6

EXERCISE 1 – SOLUTION

Explanation Screenshot

Create a connection to theHANA server

1) Start by opening the SAPHANA Studio by doubleclicking the icon on thedesktop or by launching itfrom the Windows StartMenu.

2) Make sure you are in the

SAP HANA Developmentperspective by clicking onthe button..

3) Click on the “SAP HANASystems” view. Ignore allthe folders/system entriescreated for other TechEdsessions. Right click andchoose “Add System…”.



7

4) Input the server hostname(coe-he-084.wdf.sap.corp)and the instance number(20). Press the Nextbutton.

5) Enter the user id andpassword which theinstructor has provided toyou. Click “Finish”.



8

6) You should now have anew connection with yourspecific user id for the M41system. Please make sureto use this connection forthe rest of the exercise.Please DO NOT use the“Demo” or any otherconnections.

Create a group package

1) Expand the “cd164”package under the Contentfolder. There should besession specific packagesalready created for you.Because this hands-onsession will be givenmultiple times, we will usedifferent session letters toseparate each classes’work. The session instructorwill tell you what sessionpackage to use for yoursession. For this exampledocument we will usesession x. Right-click on thesession package andchoose “New”, then

“Package”.

2) In the package dialog, youwill create a package foryour group. The groupnumbers will be provided bythe instructor. This ensuresthat every attendee has aunique namespace for theirwork. All the content youcreate today will then beplaced within this uniquesession/group package

hierarchy. Enter the nameof the package as yourgroup number.

For example, if theassigned group number is“00” and your sessionpackage is sessionx, thenthe complete packagename would becd164.sessionx.g00. Thatisced164<dot>sessionx<dot

>g00. You will use this



9

same naming conventionthroughout the rest of theexercise document. Click“OK”.

Create a RepositoryWorkspace

1) Switch to the “SAP HANARepositories” view. Clickthe icon for “CreateRepository Workspace”.

2) Select the M41 systementry you createdpreviously. Enter the nameof the workspace asCD164<session id>. In this

example our session id is xtherefore we enterCD164X.

3) You should now see thenew workspace in the SAPHANA Repositories view.

Create a SAPUI5 Project

1) Move to the “ProjectExplorer” view, and right-click in the white space.Choose “New”, then“Other”.



10

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



11

3) Name the projectHelloWorld<Session ID>.For example if this wasSession x, name yourproject HelloWorldX Keepall other default values.



12

4) Supply the name of thebase html page andcontroller/view you willcreate. We can addadditional pages to thisproject later. Supply aname HelloWorld.

5) Do not switch to the JavaEE perspective whenprompted:



13

6) We now have an EclipseProject with a bootstraphtml page in theWebContent folder and aHelloWorld controller andview in an innerhelloworld<session id>sub-package.

Share the SAPUI5 Projectwith the HANA Repository

1) Connect this project to theHANA Repository bychoosing Team->ShareProject



14

2) Choose the SAP HANARepository Plug-In

3) Choose Browse to selectthe repository package tocreate your package within.



15

4) Share the Project with yourRepository Workspace andto the repository packagecd164.session<sessionid>.g<group number>. Forexample if your sessionwas Session X and yourgroup was 00, therepository package wouldbe cd164.sessionx.g00.

5) Double check yourRepository Package fromthe previous step. Confirmthat you have Add projectfolder as sub-packageselected. Finally check theNew project location. Itshould have your packagepath plus the project nameas the final folder. If all iscorrect, press Finish toshare the project.



16

6) Activate from the ProjectLevel to make sure that allparts of the project getproperly stored in the HANARepository.

7) You can also activate fromthe toolbar or with thekeyboard shortcutCTRL+F3

8) The SAPUI5 project wizard

always inserts a bootstraplocation to the sap-ui-core.jswhich is incorrect for SAPHANA. Therefore the firststep of every new project isto correct the index.htmldocument. Change thescript src fromresources/sap-ui-core.js to/sap/ui5/1/resources/sap-ui-core.js



17

9) The createContent functionof the HelloWorld.view.js iswhere all UI elementrendering should reside. Wecan instantiate the ButtonUI element class asmyButton and then return itfrom at the end of thecreateContent function. Any UI element (or elementgroup) returned from thisfunction will be rendered.

Note: if you don’t want totype this code, werecommend that you cutand paste it from this webaddress:http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164&sub=EX1_1

10) Save / Activate all objectsfrom the project folder.

Testing your Hello WorldApplication

1) Test your application in a

web browser. The URLwould be http://coe-he-084.wdf.sap.corp:8020/cd164/session<session>/g<group>/HelloWorld<Session>/WebContent/. For exampleif you were in session x andgroup number 00 your URLwould be:http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/HelloWorldX/WebContent/

The sample solution is alsoavailable at http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/HelloWorldX/

2) You will be prompted forauthentication. Use yourcurrent HANA SystemUsername and Password.

http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164&sub=EX1_1






http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/HelloWorldX/WebContent/




http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/HelloWorldX/




















18

Your password is the sameyou used to logon to SAPHANA Studio (and whichwas supplied by yourinstructor).

3) The URL path and resourcenames for the HANA Native Applications are currentlycase sensitive. Therefore acommon mistake ofremoving the case whentyping the URL would resultin the following errormessage

Creating a Text Bundle(Optional)

1) In most of these exerciseswe will simply hard code our

texts to keep everythingsimple. However in realapplications, text stringsshould be maintainedseparately so they caneasily be translated. ForHANA based UI5development you create atext bundle namedhdbtextbundle. Now we willadjust the HelloWorldapplication to use a textbundle.





20

6) Your index.html now lookslike this:

7) Go to yourHelloWorld.view.js. Changethe setText function of thebutton to use the textbundle.

myButton.setText(oBundle.getText("helloworld

"));

8) Save, activate and test yourapplication. The HelloWorld text should appear.

9) Although not part of thisexercise, the hdbtextbundlecan be exported by the rtttool (which is part of theHANA Client). The text canthen be translated andimported back into thesystem.



21

10) For instance, you might adda German version of thetext in the translation file.

11) At the repository level thereis still the singlehdbtextbundle file; butmultiple language versionsare stored internally andused automatically.

12) Now if you force the sampleimplementation to run inGerman (sap-ui-

language=de or changeyour browser languagesettings), you will see thatthe samemessagebundle.hdbtextbundle is requested; but nowthe content returned by theserver is German text.

13) You have completed theexercise!

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 SAPUI5 project which is linked to the workspace Create a HelloWorld UI5 Application (Optional) Create a Text Bundle



22

EXERCISE 2 – ODATA SERVICES


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 definitionfile. 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 andinteract with these services from the SAPUI5 user interface technology. If you are interested in the process to createthese services, please refer to TechEd course CD162.


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



23



Consume a Basic ODataService within UI5 binding theservice to a Table

1) Using the steps youlearned in the first exercise,create a new UI5 Application project namedodataBasic<Session ID>.For example if this wasSession x, name yourproject odataBasicX. Keep

all other default values.



24

2) Supply the name of thebase html page andcontroller/view you willcreate. We can addadditional pages to thisproject later. Supply aname odataBasic.

3) Using the same steps as

Exercise 1, share theproject with the HANARepository.

Share the Project with yourRepository Workspace andto the repository packagecd164.session<sessionid>.g<group number>. Forexample if your sessionwas Session X and yourgroup was 00, therepository package would

be cd164.sessionx.g00



25

4) The SAPUI5 project wizardalways inserts a bootstraplocation to the sap-ui-core.js which is incorrectfor SAP HANA. Thereforethe first step of every newproject is to correct thehtml document. Changethe script src fromresources/sap-ui-core.js to/sap/ui5/1/resources/sap-ui-core.js

While you are editing theindex.html also go aheadand add sap.ui.table to thedata-sap-ui-libs. You mustdeclare the UI elementlibraries you will utilize inyour application. We willbe using the table inaddition to the commonlibrary.

5) To avoid having to dotoo much typing, wehave prepared sometemplate code for youwhich already has thedefinition of the table UIelement and the table

columns, but none ofthe logic to consumethe OData service. Youcan cut and paste thistemplate code from thisaddress into thecreateContent functionof yourodataBasic.view.js file:

Note: if you don’t wantto type this code, werecommend that you cut

and paste it from thisweb address http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exer ciseMaster/?workshop=cd164&sub=EX2_1

You should notice thatthere are twocommented To-Do sections in this codewhich you just copied

into the file.
















26

6) In the first To-Dolocation you should addthe code to create a

model object namedoModel of typesap.ui.model.odata.ODataModel. Use theprovided service/cd164/admin/solutions/services/businessPartners.xsodata/. If youneed help writing thiscode please refer to thesolution at:

http://coe-he-

084.wdf.sap.corp:8020/workshop/admin/ui/exer ciseMaster/?workshop=cd164&sub=EX2_2

7) In the second To-Dolocation you should setthe model namedoModel to the tablecontrol named oTable.Create a sorter (typesap.ui.model.Sorter)

which uses the columnPartnerId. Bind thetable to the entityBusinessPartners andadd the sorter object tothe binding. If you needhelp writing this codeplease refer to thesolution at:

http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exer

ciseMaster/?workshop=cd164&sub=EX2_3

























27

8) That’s all that isnecessary to connectthe Table UI element tothe OData service. Weget built in table sortingand filtering, as well asserver side scrolling viathe various built-inparameters of theOData serviceframework.

Save and Activate yourproject.

9) Test your application in aweb browser. The URLwould be http://coe-he-084.wdf.sap.corp:8020/cd164/session<session>/g<group>/odataBasic<Session>/WebContent/. For exampleif you were in session x andgroup number 00 your URLwould be:http://coe-he-

084.wdf.sap.corp:8020/cd164/sessionx/g00/odataBasicX/WebContent/

Try the sort or filter abilityon one of the columns totest out the built-in featuresof the OData Service.

The sample solution is alsoavailable at http://coe-he-084.wdf.sap.corp:8020/cd1

64/admin/solutions/ui/odataBasic/

http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/odataBasicX/WebContent/





http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/odataBasic/















28

Use OData Metadata todynamically create thecolumns.

1) In the previous part of

this exercise we hardcoded all the tablecolumn definitions in thetemplate. However,oData services exposeall their meta data andwe can use this featureto build the columnsdynamically.

Return to your view file.Delete the completeblock of lines after the

Table ColumnDefinitions commentand before theoTable.setModel line.

2) You can create aconnection to themetadata object via thefunctiongetServiceMetadata ofyour model object.

Inside this meta datayou will find thecolumns of the serviceatdataServices.schema[0].entityType[0].property.Loop over this collectionand create a column foreach property.name inthe service dynamically.

If you need help writingthis code please refer to

the solution at:

http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exer ciseMaster/?workshop=cd164&sub=EX2_4

Save and Activate yourproject.














29

3) Test your application in aweb browser. The URLwould be http://coe-he-084.wdf.sap.corp:8020/cd164/session<session>/g<group>/odataBasic<Session>/WebContent/. For exampleif you were in session x andgroup number 00 your URLwould be:http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/odataBasicX/WebContent/

Notice that you now have allthe columns of the service;not just the few you hadbefore.

The sample solution is alsoavailable at http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/odataMeta/

Consume an OData Servicewith Create Option

1) Using the steps youlearned in the firstexercise, create a newUI5 Application projectnamedodataCRUD<SessionID>. For example if thiswas Session x, nameyour projectodataCRUDX. Keep allother default values.






http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/odataMeta/















30

2) Supply the name of thebase html page andcontroller/view you willcreate. We can addadditional pages to thisproject later. Supply aname odataCRUD.

3) Using the same stepsas Exercise 1, share theproject with the HANARepository.

Share the Project withyour RepositoryWorkspace and to therepository packagecd164.session<sessionid>.g<group number>.For example if yoursession was Session Xand your group was 00,the repository packagewould becd164.sessionx.g00





32

6) In this exercise we willfocus on the implementof the event handlers – which is all done in thecontroller.js file.

Begin editing thecontroller by adding adeclaration for theoModel that is set tonull. This will allow us topass the modelinstance from the viewto the controller.

7) We need to add toevent handlers,callUserService (which

performs the creation ofnew records) andupdateService (whichupdates records fromthe table). Insert theempty functions in thecontroller as shown.



33

3) For callUserService,you first need to getaccess to the modelobject via the controllerwith a call tosap.ui.getCore().byId("idodataCRUD1").getController().oModel.

Next you need to createa JSON object with theservice fields(PERS_NO,FIRSTNAME,LASTNAME, andE_MAIL). PERS_NOcan get a hardcodedvalue of “0000000000”.The other fields shouldbe read from the screenwithsap.ui.getCore().byId("<insert fieldid>").getValue();

Finally you need to seta custom header ofcontent-type with thevalue ofapplication/json;charset=utf-8 in the model.

Then you can call themodel.create functionfor the entity /Users.

If you need help writingthis code please refer tothe solution at:















34

4) The implementation ofupdateService is verysimilar. You need toaccess the model asbefore. You can get theindex of the table for thechanged record fromEvent.getSource().oPar ent.getIndex().

You can build the JSONrecord as before, butyou only need to fill inthe PERS_NO andwhatever field waschanged. You canaccess the fields in thetable via the id __field<index>-col<index>-row+ thetable index you readearlier.

Set the same modelheader and then call theupdate function.

If you need help writingthis code please refer tothe solution at:


8) Save and activate yourproject.
















36

EXERCISE 3 – SERVER SIDE JAVASCRIPT


Objective

XSJS or Server Side JavaScript is used to create custom services and is the main imperative and control flow logiclayer 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 thisreason, we can also write custom service handlers using server side JavaScript.


Consume XSJS Services via JQuery AJAX calls.

Learn how to use the liveUpdate and linked fields for interactive search







39

without needing to get intotoo much detail.

The template can beaccessed at:http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164&sub=EX3_1

6) In the controller add anevent handler calledonLiveChange which hastwo parameters – oEvent

and oVal. This is the eventwhich is triggered everytime the value is changed ineither input field.

Using jQuery.ajax call theURL/cd164/admin/solutions/services/multiply.xsjs?cmd=multiply adding on the num1value from the oEvent andnum2 value from the oValinput parameter. On

Success of the AJAX call,call a controller eventnamed onCompleteMultiply.If there is a failure call acontroller event namedonErrorCall.

If you need help writing thiscode please refer to thesolution at:

http://coe-he-084.wdf.sap.corp:8020/work

shop/admin/ui/exerciseMaster/?workshop=cd164&sub=EX3_2

























40

7) In the onCompleteMultiply,accept the response objectas an input parametercalled myTxt. This will fieldwill contain the result of themultiplication in clear text.Use thesap.ui.core.format.NumberFormat to format the outputas an interger and set thevalue back into the oResulttextView.



8) In the onErrorCall, producean error dialog(sap.ui.commons.MessageBox.show) and output the jqXHR.responseText as thedetails of this error.



























41


Test your application in aweb browser. The URLwould be http://coe-he-084.wdf.sap.corp:8020/cd164/session<session>/g<group>/xsjsMultiply<Session>/WebContent/. For exampleif you were in session x andgroup number 00 your URLwould be:http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/xsjsMultiplyX/WebContent/

Since we are using the livechange event on the inputfields, you only need to starttyping into either field totrigger the call to the serverand the calculation of theresults

The sample solution is alsoavailable at:

http://coe-he-084.wdf.sap.corp:8020/cd1

64/admin/solutions/ui/xsjsMultiply/

http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/xsjsMultiplyX/WebContent/





http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/xsjsMultiply/















42

Use the liveUpdate and linkedfields for interactive search

1) We now want to build anapplication which will

search the HANARepository using XSJS anddisplay a repository objectin the browser.

Using the steps you learnedin the first exercise, create anew UI5 Application projectnamedxsjsRepository<SessionID>. For example if thiswas Session x, name yourproject xsjsRepositoryX.

Keep all other defaultvalues.

2) Supply the name of thebase html page andcontroller/view you willcreate. We can addadditional pages to thisproject later. Supply aname xsjsRepository.



43

3) Using the same steps asExercise 1, share theproject with the HANARepository.

Share the Project with yourRepository Workspace andto the repository packagecd164.session<sessionid>.g<group number>. Forexample if your sessionwas Session X and yourgroup was 00, therepository package wouldbe cd164.sessionx.g00

4) The SAPUI5 project wizardalways inserts a bootstraplocation to the sap-ui-core.js which is incorrect

for SAP HANA. Thereforethe first step of every newproject is to correct thehtml document. Changethe script src fromresources/sap-ui-core.js to/sap/ui5/1/resources/sap-ui-core.js

5) The complete ViewImplementation is providedfor you as a template. It

has three input fields for thepackage path, filename,and file extension. Thesearch will be linked so onlyfiles within the selectedpackage will be displayed.Notice that we are using thesap.ui.commons.AutoComplete UI element for the inputfields. This element has asuggest event which we willimplement as a call to anXSJS service.



44


.

6) For the controller we alsohave a template to save yousome time. This templatealready has the errorhandling, helper functions,and implementation for twoof the three event handlers.You will have to supply the

implementation for the thirdhandler.


7) You should now completethe implementation of theloadObjectFilter function.You can study the otherevent handlers for a hint.You need access to thecontroller object as we didearlier in the XSODATACRUD exercise. TheoEvent input parameter willsupply you with access tothe current typed value. Ifthe input parameter is *,

replace the value with “”.Get the package value fromthe input field id “Package”.Then call the service/cd164/admin/solutions/services/repository.xsjs?cmd=getObjList. If successful, callthe controller functiononLoadObjFilter. If error,call the controller methodonErrorCall.

If you need help writing this

code please refer to the

























45

solution at:


8) You should now completethe implementation of theonLoadObjectFilterfunction.

The XSJS service returnsthe object information inJSON format to theparameter myJSON. Loop

over all elements inmyJSON.Objects andadded eachOBJECT_NAME to theoSearchControl for theinput field named “Object”.


http://coe-he-084.wdf.sap.corp:8020/wor

kshop/admin/ui/exerciseMaster/?workshop=cd164&sub=EX3_8

























46


Test your application in aweb browser. The URLwould be http://coe-he-084.wdf.sap.corp:8020/cd164/session<session>/g<group>/xsjsRepostiory<Session>/WebContent/. Forexample if you were insession x and groupnumber 00 your URL wouldbe:http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/xsjsRepositoryX/WebContent/

Test the service bysearching in the packagecd164.admin.solutions.services. View the filerepository.xsjs.

The sample solution is alsoavailable at:

http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/xsjsR

epository



Consume XSJS Services via JQuery AJAX calls.

Learn how to use the liveUpdate and linked fields for interactive search

http://coe-he-084.wdf.sap.corp:8020/cd164/sessionx/g00/xsjsRepositoryX/WebContent/





http://coe-he-084.wdf.sap.corp:8020/cd164/admin/solutions/ui/xsjsRepository















47

EXERCISE 4 – UIS – INTEGRATE PURCHASE ODERS LIST AND DETAILS


Objective

In this exercise, we will use SAP HANA UI Integration Services (UIS) to integrate the supplied components of thePurchase Orders application into a web user interface supporting the end-to-end business scenario, further referred toas application site. The standalone components of the application are referred to as widgets.

For an introduction to the SAP HANA UIS see chapter 11.2 athttp://help.sap.com/hana/SAP_HANA_Developer_Guide_en.pdf


The application that you will create contains two widgets: Purchase Order Worklist and Purchase Order Details.

In your project (HelloWorldX, where x is the session ID), create a folder and name it uis.

http://help.sap.com/hana/SAP_HANA_Developer_Guide_en.pdf





48


Step Details

Create Widget XML Specification

1. Widget specification XML file isa descriptor that contains widgetproperties and either referencesthe HTML implementation of thewidget or directly embeds theHTML code within the<Content> section. Specification

XML also lists required features,such as sap-context to enablecommunication between widgetson a page, or gadgetprefs toenable personalization.

2. In the uis folder, create thewidget specification filestable.xml and tabs.xml andopen them with the text editor(and not with the XML Editor asproposed).

3. Copy the following content, orcopy it from http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?wor kshop=cd164&sub=tableXML and paste it into table.xml:

<Module>

<ModulePrefs title="Purchase Order Worklist"><Require feature="sap-context"/>

</ModulePrefs>

<Content type="html" href="/uis/html/table.html"></Content>

</Module>

4. Copy the following content orcopy it from http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?wor kshop=cd164&sub=tabsXMLand paste it into tabs.xml

<Module>

<ModulePrefs title="Purchase Order Details"><Require feature="sap-context"/>

</ModulePrefs>

<Content type="html" href="/uis/html/tabs.html"></Content>

</Module>

http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164&sub=tableXML












49

5. Save and activate each file fromits context menu.

Step Details

Create Widgets

1. Create widget objects based onthe widget specification XMLs.To do so, perform the followingsteps for each:

2. In the project's context menu inProject Explorer, choose New >Other.

3. In the New dialog box, chooseSAP HANA Development >Widget, and choose Next.







52

3. In the New dialog box, chooseSAP HANA Development > Application Site, and thenchoose Next.

4. In the New Application Sitedialog box, select the parentfolder HelloWorldx/uis

(where X is the sessionID),enter the site name and title,and choose Finish.



53

5. The newly created site opens inthe embedded browser. At thispoint, the uis folder in yourproject should look similar to:



54

Step Details

Design Application Site

1. If the site is not open inthe embedded browserdesign environment,double-click the.xsappsite file in theProject Explorer. Enteryour logon credentials inthe logon box thatopens.

In the designenvironment, you cancreate and managepages, and place andorganize widgets tosupport a businessscenario.

2. Open the Widgets paneby pressing + icon onthe blue design panel.



55

3. The widgets that wecreated in the previoussteps appear in thepane.To easily locate yourwidgets, choose your

project folder from thedropdown box.

4. Drag and drop each ofthe widgets on thedefault Welcome page,resize and adjust themas shown:



56

Step Details

How communication

Between Widgets works1. In the application

site in browser,click on a row in thePurchase OrderWorklist widget,and see the detailsof this orderdisplayed in thePurchase OrderDetails widget.

Thiscommunicationbetween widgets isenabled by using apublish-subscribemessagingmechanismprovided by theSite Context API.

There is no thing

to be do ne here in

the next steps,

th is is rather an

explanat ion how

this is ref lected in

the code .

For details, see thecode samplesbelow that are

2. In the eventpublishingJavaScript, the rowselection event is

published using thegadgets.sapcon

text.Publish

method:

//Table Row Select Event Handler onRowSelect: function(oEvent){

var oTable = oEvent.getSource();var povalue =oEvent.getSource().getModel().getProperty( "PurchaseOrderId",oTable.getCont

extByIndex(oTable.getSelectedIndex()));if(povalue){

gadgets.sapcontext.publish("rowSelect", povalue);}

},



57

3. In the eventreceivingJavaScript, thesubscription to therow selectionchange is done

using thegadgets.sapcon

text.Subscribe

method.

Step Details

OPTIONAL: Create the ReportWidget

1. Now you will create theReport widget thatdisplays various purchaseorder reports. You needto save and close theapplication site beforeproceeding.

2. In the uis folder, create

the report.html file

using the context menu(New->File) thatgenerates purchase orderreports.to edit it: Openwith>Other>JavaScriptEditor.

3. Copy the followingcontent or copy it fromhttp://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164&sub=Report_Commented_HTML and paste intothe file and save:

<!DOCTYPE HTML><html>

<head>

<meta http-equiv="X-UA-Compatible" ontent="IE=edge">

<title>Purchase Order Worklist</title>

<script src="/sap/ui5/1/resources/sap-ui-core.js"id="sap-ui-bootstrap"

data-sap-ui-

libs="sap.ui.ux3,sap.ui.commons,sap.ui.table,sap.viz"

data-sap-ui-theme="sap_goldreflection" >

</script>

<script type="text/javascript" src="/uis/js/global.js"

></script>

<script>

//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 toevents*/ gadgets.HubSettings.onConnect = registerContext;function registerContext(){

function rowSelectContextChanged(topic, context){/*Get property rowSelect from context and call Detail.ControllercontextRowSelect(purchase_order_id)*/ var poId = context.getPropertyByKey("rowSelect")[0];oController.contextRowSelect(poId);

}/*UIS - Register context changes for property rowSelect*/ gadgets.sapcontext.subscribe(rowSelectContextChanged);

}



58

jQuery.sap.registerModulePath("uis", "/uis/");

var view = sap.ui.view({id:"report",viewName:"uis.js.Report", type:sap.ui.core.mvc.ViewType.JS});

view.placeAt("content");

function getPersonalizedValue( key ){

var personalizedValue = null;

// gadgetPrefs = new gadgets.GadgetPrefs();// personalizedValue =

gadgetPrefs.getPreference("Visualization");

return personalizedValue;

}

</script>

</head>

<body class="sapUiBody" role="application">

<div id="content"></div>

</body></html>

4. In the uis folder, createthe widget specificationfile report.xml usingthe context menu (New->File) and open it usingthe text editor.

5. Copy the followingcontent or copy it from

http://coe-he-084.wdf.sap.corp:8020/workshop/admin/ui/exerciseMaster/?workshop=cd164&sub=Report_Commented_XML and paste intothe file and save:

<Module>

<ModulePrefs title="Purchase Order Reports">



</ModulePrefs><--<UserPref name="Visualization" default_value="pie"

datatype="enum">

<EnumValue value="pie" display_value="Pie chart"/>

<EnumValue value="bar" display_value="Bar chart"/>

</UserPref>-->



<Content type="html"href="/cd164/session<SessionLetter>/g<GroupNumber>/<myProjectName>/uis/r

eport.html"></Content>

</Module>



59

6. Modify the href property inthe report.xml to point toyour report.html file:<Content type="html"

href="/cd164/session<Se

ssionLetter>/g<GroupNum

ber>/<myProjectName>/uis/report.html"> The full path is combinedfrom the following parts: href="/cd164/sessionx/g17/HelloWorldX/uis/report.htm

l”> (X is the session ID)

7. Activate the report.xml

and report.html fromtheir context menus.

8. Create a widget calledreport that that points toreport.xml:

a. In the project's context menu in Project Explorer, choose New > Other....b. In the New dialog box, choose SAP HANA Development > Widget, and

choose Next.c. In the New Widget dialog box, choose the parent folder uis, enter the

file name, browse to the specification file report.xml, and choose Next.d. Modify the title with a prefix gXX, where XX is your group number, so

that the widget's title appears as defined in the specification XML, andclick Finish..

e. To make the widget available for application sites, activate the widget bychoosing Team > Activate from the .xswidget file's context menu.

9. In the site, open the

Pages pane and create anew page, renaming it to‘Reports’.



60

10. Open the Widgets (+)pane in the design panel,choose your project folderfrom the dropdown box,and add your Reportwidget to the Reports

page.

11. Click the sidebar tab,located in the widget'supper right corner, toopen the widget sidebar.

Click the sidebar tab, located in the widget's upper right corner, to open thewidget sidebar.

12. Click the Properties iconon the sidebar, and notethere is only one propertyin the Properties box that

opens.

Step Details

Enable WidgetPersonalization

1. In the next step,enable personalization

of the ‘Visualizationtype’ property thatdefines how to displaythe report: pie or chartgraph.

2. In report.xml,uncomment thefollowing lines:

 



61

3. In report.html,uncomment thefollowing JavaScriptcode lines:

// gadgetPrefs = new gadgets.GadgetPrefs();// personalizedValue = gadgetPrefs.getPreference("Visualization");

4. Activate the

report.html andreport.xml files,close the site, andreopen it on theReports page.

5.

6. Open the widgetproperties and notethat the Visualization

property appears now.

7. Change the value ofthis property and seehow the report displaychanges in the widget.

8. Widgets can bepersonalized by usingthe GadgetPrefs APIthat provides read andwrite access to widgetpreferences persistedon the server side. Fordetails, see the codesamples below.

To get the currentvalue of thevisualizationpreference value, wecreate new instance of

the GadgetPrefsobject and callgadgetPrefs.getPrefer ence

To persist the newvalue ofvisualization

preference when wecallgadgetPrefs.setPr

eference

function getPersonalizedValue( key ){

var personalizedValue = null;

gadgetPrefs = new gadgets.GadgetPrefs();personalizedValue = gadgetPrefs.getPreference("Visualization");

return personalizedValue;}



62

9. In addition to the‘visualization’ property,we also use thepersonalization for‘group by’ property.

In the application site,choose an option inthe dropdown box ofthe Purchase OrderReports widget.

Refresh the site andsee that your choice isselected.



63

APPENDIX A – GETTING STARTED – STEPS WHICH WERE ALREADY DONE ON

THE CLIENT IMAGE FOR YOU

Objective

There were certain setup steps which were already done to setup the HANA Studio for you on this system. However,for recreating this setup on your own machine upon returning home it might be useful to have these steps. Thereforethis appendix documents all these setup steps which were already completed for you.


Configure the HANA Client Connection

Setup the Development Perspective

(Optional) Install ABAP Development Tools

Install SAPUI5



64

APPENDIX A – SOLUTION


1) To support the newdeveloper centric workflow,there are two new EclipsePerspectives which havebeen added to SAP HANAStudio. These are notdisplayed by default.

In the upper right corner ofyour SAP HANA Studio,there is an addPerspectives button. Press

this.

2) Add the SAP HANADevelopment perspective.This is the perspective youshould be using for almostthis entire workshop.

3) Repeat the step and addthe Debug perspective.

4) If you do not see the“Content” folder in the SAPHANA Systems View, youcan add it to your view.Click the “View Menu”button on the “Navigator”toolbar.



65

5) Click “Customize View…”.

6) In the following dialog, clickthe “Content” tab, then clickthe checkbox for “Content”.Click “OK”.

Configure Regi for SAP HANAStudio

1) From the Window menu,choose “Preferences”.



66

2) From the left side of thescreen, expand “SAPHANA Development”, thenclick “Repository Access”.In the right side of thescreen, click “Change”.Browse to the clientinstallation directory(default: C:\ProgramFiles\SAP\hdbclient\) andchoose “regi.exe”. Next,click “Apply”, then “OK”.

Installing SAPUI5 Tools intoSAP HANA Studio

1) Begin the installation byadding the SAPUI5 toolsupdate site to your SAPHANA Studio. UseWindow->Preferences.



67

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

3) You can also consider usingthe public update site:https://tools.hana.ondemand.com/juno

4) To perform the installationfrom this new update site,use Help -> Install NewSoftware.

https://tools.hana.ondemand.com/juno







68

5) In the Available Softwaredialog, choose the SAPUI5update site you just created.Select the parameters:Show only softwareapplicable to the targetenvironment , Contact allupdate sites during install tofind required software, andHide items that are alreadyinstalled . If you scroll downin the list of availablesoftware, you should findthe UI development toolkitfor HTML5.

6) Confirm the items to install



69

7) Accept the licenseagreement:

8) Depending upon yournetwork connection speed,it can take several minutesto complete the installation.

9) Near the end of theinstallation, the processmight stop and make youconfirm that you want toinstall the unsigned content



70

10) Upon completion of theinstallation you must restartSAP HANA Studio



Configure the HANA Client Connection

Setup the Development Perspective

Install SAPUI5



71

APPENDIX B: INSTALLING SAP HANA UI INTEGRATION SERVICESSAP 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 webuser 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:


Installation

1) From the SAP HANAStudio, choose File->Import.



72

2) Select the import sourceSAP HANA Content >Delivery Unit, and chooseNext

3) Select the target system forthe delivery unit. Make sureyou are utilizing a systemconnection that has thenecessary systemauthorizations for import.



73

4) Choose the Server option.In the dropdown list ofavailable files, select<path>/HANA_UI_INTEGR ATION_SVC.tgz, andchoose Finish..

5) Assign yourself and otherusers to the following roles

sap.hana.uis.db::SITE_DESIGNER: to designapplication sites

sap.hana.uis.db::SITE_USER: to use application sites





© 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 specificationsmay 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, andSAP 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 inthe express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting 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 othercountries.

Please seehttp://www.sap.com/corporate-en/legal/copyright/index.epx#trademarkfor additional trademark information and notices.

http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark

http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark

Documents

CD164_exercises_solutions.pdf