› kmuuid2 › 40371b91-7e95-3110-e29a... · develop your first sap hana native application on sap...

59
Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 1 oPlatform contex SAP HANA Platform End-to-End-Development Scenarios Getting Started Develop Your First SAP HANA Native Application on SAP HANA Platform Using the SAP HANA Web-based Development Workbench Version 1.1 | March 2014 | Bertram Ganz, Jens Glander | SAP AG Requires access to an on premise SAP HANA system

Upload: others

Post on 27-Feb-2020

14 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 1oPlatform contex

SAP HANA Platform End-to-End-Development Scenarios

Getting StartedDevelop Your First SAP HANA Native Applicationon SAP HANA Platform Using the SAP HANAWeb-based Development Workbench

Version 11 | March 2014 | Bertram Ganz Jens Glander | SAP AG

Requires access to an on premise SAP HANA system

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 2

copy Copyright 2014 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 AGThe information contained herein may be changed without prior noticeSome software products marketed by SAP AG and its distributors contain proprietary software components of other software vendorsNational product specifications may varyThese materials are provided by SAP AG and its affiliated companies (SAP Group) for informational purposes only withoutrepresentation or warranty of any kind and SAP Group shall not be liable for errors or omissions with respect to the materials The onlywarranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying suchproducts and services if any Nothing herein should be construed as constituting an additional warrantySAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks ofSAP AG in Germany and other countries Please see httpwwwsapcomcorporate-enlegalcopyrightindexepxtrademark foradditional trademark information and notices

This tutorial intends to complement SAP product documentation While specific product features and procedures typically are explained ina practical business context it is not implied that those features and procedures are the only approach in solving a specific businessproblem using SAP NetWeaver Should you wish to receive additional information clarification or support please refer to SAP ConsultingAny software coding andor code lines strings (ldquoCoderdquo) included in this documentation are only examples and are not intended to beused in a productive system environment The Code is only intended better explain and visualize the syntax and phrasing rules of certaincoding SAP does not warrant the correctness and completeness of the Code given herein and SAP shall not be liable for errors ordamages caused by the usage of the Code except if such damages were caused by SAP intentionally or grossly negligent

DisclaimerSome components of this product are based on Javatrade Any code change in these components may cause unpredictable and severemalfunctions and is therefore expressively prohibited as is any decompilation of these componentsAny Javatrade Source Code delivered with this product is only to be used by SAPrsquos Support Services and may not be modified or altered inany way

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 3

Table of Contents

1 Introduction 511 What Do You Get Here 5

12 Intended Audience 5

13 Applicable Releases 5

14 End-2-End Development Scenario Overview 5

15 Development Steps in the Corresponding HANA Layers 6

16 How to Run this Tutorial 7

2 Prerequisites of Web-based Development Developer Roles 821 Get a Database User with the Required Roles for the HANA Web IDE 8

22 Start SAP HANA Web-based Development Workbench and Change Initial Password 9

221 Remember Your Database User Data 11

3 Build a Simple SAP HANA Native PersonsList Application 1231 Step 1 Create new SAP HANA native Application within Web IDE 13

311 Create blank SAP HANA XS Application 13312 Run Blank SAP HANA XS Application in Web Browser 1532 Step 2 Set up the Persistence Model in SAP HANA Database 17

321 Create Sub-Package data 17322 Create New Database Schema 19323 Define Data Type Person within CDS Document 21324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table 25325 Load Mock Data from a csv File into Database Table 2633 Step 3 Build the Application Backend with SAP HANA Extended Application Services 30

331 Expose the Person Database Entity by means of OData Service 30332 Implement Application Logic to Write new Records into Persons Table 34333 View the Application Backend in SAP HANA Catalog 3734 Step 4 Build the Application Frontend with SAPUI5 40

341 Create Package Structure for SAPUI5 Application Content 40342 Design and Implement Application UI in SAPUI5 JavaScriptView 41343 Create SAPUI5 View Controller with SAPUI5 OData Model 43344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content 4535 Run and Test the Final PersonsList Application 47

351 Recap Anatomy of the Whole PersonsList Application 47352 Run PersonsList Application on SAP HANA XS Server 47353 Test PersonsList Application in Web Browser 48354 Check OData Write Access in SAP HANA Database 4936 1 Extension Writing Server-Side JavaScript Code 51

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs 52362 Add XSJS Service to Your PersonsList Web Application 52363 Debugging of HANA XS Server-Side JavaScript Code 54

4 Glossary 58

5 Related Content 5951 SAP HANA Extended Application Services 59

52 UI Development Toolkit for HTML5 (aka SAPUI5) 59

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 4

Source CodeSource Code 1 xsaccess file to define application access permissions 16Source Code 2 devuserxx_perslisthdbschema file 19Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespace 22Source Code 4 Data definition file mymodelhdbdd with correct namespace and schema 23Source Code 5 Database sequence file pershdbsequence 25Source Code 6 perscsv file to import mock data from a list of comma separated values 26Source Code 7 pershdbti file to import table data from csv file 26Source Code 8 OData service definition file persxsodata for service consumption of entity Person 31Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbdd 34Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modificationexit for OData service) 36Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in ODataservice 37Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjs 42Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata file 44Source Code 14 indexhtml with SAPUI5 application bootstrap and html content 45Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session username 52Source Code 16 indexhtml with the included xsjs service to display the logged on user in the applicationheader 53

FiguresFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application 6Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application 12Figure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application 13Figure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initialload 17Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side 27Figure 6 Step 3 - application backend part with OData service and HANA database procedure for readwritelogic 30Figure 7 OData Service creation based on new OData service definition file inside HANA repository 31Figure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption 40Figure 9 User interface sketch diagram with Persons entry form and table control 41Figure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices 47Figure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript andjQuery 51

ScreenshotsScreenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links 7Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend 8Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository23Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definitionfile mymodelhdbdd 24Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration52

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 5

1 Introduction11 What Do You Get HereThis guide describes step by step how to create your first SAP HANA native application on an on premiseSAP HANA Platform by using the zero-install SAP HANA Web-based Development Workbench You developa PersonsList web application end-to-end from HANA database table definition to application logicimplementation up to the SAPUI5 user interface on frontend side

Platform You build and run your application on the SAP HANA Platform SPS07Database SAP HANA is used to create one column-based table to store Person dataRuntime Your application runs on SAP HANA extended application services (shortly SAP HANA XSsee Glossary) a small footprint application server including a web server and basis for an applicationdevelopment platform inside SAP HANADesign time As development tool you purely use the SAP HANA Web-based Development Workbench(shortly HANA Web IDE) that allows us to develop the whole application in a browser without the need toinstall any development tools on your clientFrontend You will use the UI development toolkit for HTML5 (shortly SAPUI5) SAPrsquos HTML5 library thathelps you to build responsive business applications for all devices

12 Intended AudienceAll developers and programmers who may be new to the SAP HANA Platform andor SAP HANA nativedevelopment based on SAP HANA extended application services (also known as SAP HANA XS)

13 Applicable ReleasesThe tutorial was built on SAP HANA SPS 07 Database Revision 73 (version string 1007300389160 seeSAP note 1990011)

14 End-2-End Development Scenario OverviewThe application frontend you build in this tutorial looks very simple Person entries that are retrieved from theSAP HANA database are displayed in a table control

(1) You can enter first and last name of a new Person entry and write it to the backend with an input forminside the table toolbar

(2) On creation of a new Person entry a success message gets displayed(3) And the new entry gets instantly displayed in the table UI

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 6

15 Development Steps in the Corresponding HANA LayersFigure 1 illustrates the whole development scenario in a simple overview The development process applied intutorial has been divided in five main development steps

(0) Ask your SAP HANA administrator to assign HANA Web IDE specific roles to your database user(1) Create a bare-bone SAP HANA XS application(2) Define a CDS-based data persistence object in the SAP HANA database(3) Develop the application logic Create a OData-service to read and write person table records from and to

the HANA database(4) Develop application frontend side Implement of a simple SAPUI5 user interfaceFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application

The main development steps and the corresponding sections of the end-to-end tutorial

Step Section What You will Learn

Prerequisites for Web-basedDevelopment database user withdeveloper roles

Know the developer roles that are required for a database user touse the SAP HANA Web-based Development Workbench

Create new SAP HANA nativeapplication within SAP HANA Web-based Development Workbench

Start the SAP HANA Web-based Development Workbench in aWeb browser

Create blank SAP HANA XS application Run blank SAP HANA XS application in web browser Set up the application package structure in SAP HANA repository

Set up the persistence model in SAPHANA database

Create sub-package data Create a database schema Define data type Person within CDS document Load initial mock data from csv file into database table

Build the application backend with SAPHANA extended application services

Expose the Person database entity by means of OData service Implement application logic to write new records into Persons

table (with OData modification exit that calls a SQLScriptprocedure)

Build amp run the SAPUI5 applicationfrontend UI consuming an ODataservice to read and write Persons data

How to build the SAPUI5 frontend with a simple input form to addnew Person entries and a table control to list stored ones

How to consume an OData service with read and write access inSAPUI5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 7

16 How to Run this TutorialFor executing this tutorial successfully we strongly recommend read the following list of hints

Hint 1 Which Web Browser Should you useThis HANA Web IDE tutorial has been proven to work best with Mozilla Firefox in the newest availableversion We therefore recommend using Firefox when working through this tutorial Nevertheless the HANAWeb IDE is also supported for latest Google Chrome and Microsoft Internet Explorer (10+) browsers

Hint 2 First set-up Your Database UserBefore you can start with the web-based HANA XS application development you need to set-up your SAPHANA database user as described in chapter 2 Prerequisites of Web-based Development Developer Roles

Hint 3 For Quick Success just Follow the Hands-On TasksMany developers donrsquot like to read lengthy tutorials and often just want to execute the relevant steps to get thetutorial application running

In case you want to process the whole tutorial for fast success you could only follow the ldquoHands-on Tasksrdquosections that are highlighted with a blue border at the left sideTo jump from one hands-on task to another click the blue ldquopreviousrdquordquonextrdquo link buttons (see Screenshot1 item 1) or search for ldquoHands-on Tasksrdquo For just quickly building the HANA XS Getting Started application ofthis tutorial it is enough to execute the steps inside the Hands-on Tasks sections

Screenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links

NOTE For a deeper understanding of SAP HANA XS application development on SAP HANA Platform wewarmly recommend reading the complete tutorial Also see the Glossary with terms and short terms used inthe tutorial

Hint 4 Copy amp Paste File and Package NamesDuring the tutorial you need to create many files and packages Those files and package names that can becopied and pasted without editing change are highlighted with a blue color like this examplecreatePersonhdbprocedure

Avoid typos by entering these blue highlighted strings with copy and paste function

Hint 5 Copy Source Code and Replace User-Specific NamesDuring the tutorial you need to copy and paste source code where user specific data is contained (mainly thenamespaces of your HANA artifacts will contain you user name)

When copying source code you need to replace the highlighted user-specific red color string devuserxxwith your own user-specific names (eg devuser00 or gordanl see Screenshot 1 bullet item 2)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 2: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 2

copy Copyright 2014 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 AGThe information contained herein may be changed without prior noticeSome software products marketed by SAP AG and its distributors contain proprietary software components of other software vendorsNational product specifications may varyThese materials are provided by SAP AG and its affiliated companies (SAP Group) for informational purposes only withoutrepresentation or warranty of any kind and SAP Group shall not be liable for errors or omissions with respect to the materials The onlywarranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying suchproducts and services if any Nothing herein should be construed as constituting an additional warrantySAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks ofSAP AG in Germany and other countries Please see httpwwwsapcomcorporate-enlegalcopyrightindexepxtrademark foradditional trademark information and notices

This tutorial intends to complement SAP product documentation While specific product features and procedures typically are explained ina practical business context it is not implied that those features and procedures are the only approach in solving a specific businessproblem using SAP NetWeaver Should you wish to receive additional information clarification or support please refer to SAP ConsultingAny software coding andor code lines strings (ldquoCoderdquo) included in this documentation are only examples and are not intended to beused in a productive system environment The Code is only intended better explain and visualize the syntax and phrasing rules of certaincoding SAP does not warrant the correctness and completeness of the Code given herein and SAP shall not be liable for errors ordamages caused by the usage of the Code except if such damages were caused by SAP intentionally or grossly negligent

DisclaimerSome components of this product are based on Javatrade Any code change in these components may cause unpredictable and severemalfunctions and is therefore expressively prohibited as is any decompilation of these componentsAny Javatrade Source Code delivered with this product is only to be used by SAPrsquos Support Services and may not be modified or altered inany way

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 3

Table of Contents

1 Introduction 511 What Do You Get Here 5

12 Intended Audience 5

13 Applicable Releases 5

14 End-2-End Development Scenario Overview 5

15 Development Steps in the Corresponding HANA Layers 6

16 How to Run this Tutorial 7

2 Prerequisites of Web-based Development Developer Roles 821 Get a Database User with the Required Roles for the HANA Web IDE 8

22 Start SAP HANA Web-based Development Workbench and Change Initial Password 9

221 Remember Your Database User Data 11

3 Build a Simple SAP HANA Native PersonsList Application 1231 Step 1 Create new SAP HANA native Application within Web IDE 13

311 Create blank SAP HANA XS Application 13312 Run Blank SAP HANA XS Application in Web Browser 1532 Step 2 Set up the Persistence Model in SAP HANA Database 17

321 Create Sub-Package data 17322 Create New Database Schema 19323 Define Data Type Person within CDS Document 21324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table 25325 Load Mock Data from a csv File into Database Table 2633 Step 3 Build the Application Backend with SAP HANA Extended Application Services 30

331 Expose the Person Database Entity by means of OData Service 30332 Implement Application Logic to Write new Records into Persons Table 34333 View the Application Backend in SAP HANA Catalog 3734 Step 4 Build the Application Frontend with SAPUI5 40

341 Create Package Structure for SAPUI5 Application Content 40342 Design and Implement Application UI in SAPUI5 JavaScriptView 41343 Create SAPUI5 View Controller with SAPUI5 OData Model 43344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content 4535 Run and Test the Final PersonsList Application 47

351 Recap Anatomy of the Whole PersonsList Application 47352 Run PersonsList Application on SAP HANA XS Server 47353 Test PersonsList Application in Web Browser 48354 Check OData Write Access in SAP HANA Database 4936 1 Extension Writing Server-Side JavaScript Code 51

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs 52362 Add XSJS Service to Your PersonsList Web Application 52363 Debugging of HANA XS Server-Side JavaScript Code 54

4 Glossary 58

5 Related Content 5951 SAP HANA Extended Application Services 59

52 UI Development Toolkit for HTML5 (aka SAPUI5) 59

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 4

Source CodeSource Code 1 xsaccess file to define application access permissions 16Source Code 2 devuserxx_perslisthdbschema file 19Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespace 22Source Code 4 Data definition file mymodelhdbdd with correct namespace and schema 23Source Code 5 Database sequence file pershdbsequence 25Source Code 6 perscsv file to import mock data from a list of comma separated values 26Source Code 7 pershdbti file to import table data from csv file 26Source Code 8 OData service definition file persxsodata for service consumption of entity Person 31Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbdd 34Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modificationexit for OData service) 36Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in ODataservice 37Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjs 42Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata file 44Source Code 14 indexhtml with SAPUI5 application bootstrap and html content 45Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session username 52Source Code 16 indexhtml with the included xsjs service to display the logged on user in the applicationheader 53

FiguresFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application 6Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application 12Figure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application 13Figure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initialload 17Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side 27Figure 6 Step 3 - application backend part with OData service and HANA database procedure for readwritelogic 30Figure 7 OData Service creation based on new OData service definition file inside HANA repository 31Figure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption 40Figure 9 User interface sketch diagram with Persons entry form and table control 41Figure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices 47Figure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript andjQuery 51

ScreenshotsScreenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links 7Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend 8Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository23Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definitionfile mymodelhdbdd 24Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration52

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 5

1 Introduction11 What Do You Get HereThis guide describes step by step how to create your first SAP HANA native application on an on premiseSAP HANA Platform by using the zero-install SAP HANA Web-based Development Workbench You developa PersonsList web application end-to-end from HANA database table definition to application logicimplementation up to the SAPUI5 user interface on frontend side

Platform You build and run your application on the SAP HANA Platform SPS07Database SAP HANA is used to create one column-based table to store Person dataRuntime Your application runs on SAP HANA extended application services (shortly SAP HANA XSsee Glossary) a small footprint application server including a web server and basis for an applicationdevelopment platform inside SAP HANADesign time As development tool you purely use the SAP HANA Web-based Development Workbench(shortly HANA Web IDE) that allows us to develop the whole application in a browser without the need toinstall any development tools on your clientFrontend You will use the UI development toolkit for HTML5 (shortly SAPUI5) SAPrsquos HTML5 library thathelps you to build responsive business applications for all devices

12 Intended AudienceAll developers and programmers who may be new to the SAP HANA Platform andor SAP HANA nativedevelopment based on SAP HANA extended application services (also known as SAP HANA XS)

13 Applicable ReleasesThe tutorial was built on SAP HANA SPS 07 Database Revision 73 (version string 1007300389160 seeSAP note 1990011)

14 End-2-End Development Scenario OverviewThe application frontend you build in this tutorial looks very simple Person entries that are retrieved from theSAP HANA database are displayed in a table control

(1) You can enter first and last name of a new Person entry and write it to the backend with an input forminside the table toolbar

(2) On creation of a new Person entry a success message gets displayed(3) And the new entry gets instantly displayed in the table UI

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 6

15 Development Steps in the Corresponding HANA LayersFigure 1 illustrates the whole development scenario in a simple overview The development process applied intutorial has been divided in five main development steps

(0) Ask your SAP HANA administrator to assign HANA Web IDE specific roles to your database user(1) Create a bare-bone SAP HANA XS application(2) Define a CDS-based data persistence object in the SAP HANA database(3) Develop the application logic Create a OData-service to read and write person table records from and to

the HANA database(4) Develop application frontend side Implement of a simple SAPUI5 user interfaceFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application

The main development steps and the corresponding sections of the end-to-end tutorial

Step Section What You will Learn

Prerequisites for Web-basedDevelopment database user withdeveloper roles

Know the developer roles that are required for a database user touse the SAP HANA Web-based Development Workbench

Create new SAP HANA nativeapplication within SAP HANA Web-based Development Workbench

Start the SAP HANA Web-based Development Workbench in aWeb browser

Create blank SAP HANA XS application Run blank SAP HANA XS application in web browser Set up the application package structure in SAP HANA repository

Set up the persistence model in SAPHANA database

Create sub-package data Create a database schema Define data type Person within CDS document Load initial mock data from csv file into database table

Build the application backend with SAPHANA extended application services

Expose the Person database entity by means of OData service Implement application logic to write new records into Persons

table (with OData modification exit that calls a SQLScriptprocedure)

Build amp run the SAPUI5 applicationfrontend UI consuming an ODataservice to read and write Persons data

How to build the SAPUI5 frontend with a simple input form to addnew Person entries and a table control to list stored ones

How to consume an OData service with read and write access inSAPUI5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 7

16 How to Run this TutorialFor executing this tutorial successfully we strongly recommend read the following list of hints

Hint 1 Which Web Browser Should you useThis HANA Web IDE tutorial has been proven to work best with Mozilla Firefox in the newest availableversion We therefore recommend using Firefox when working through this tutorial Nevertheless the HANAWeb IDE is also supported for latest Google Chrome and Microsoft Internet Explorer (10+) browsers

Hint 2 First set-up Your Database UserBefore you can start with the web-based HANA XS application development you need to set-up your SAPHANA database user as described in chapter 2 Prerequisites of Web-based Development Developer Roles

Hint 3 For Quick Success just Follow the Hands-On TasksMany developers donrsquot like to read lengthy tutorials and often just want to execute the relevant steps to get thetutorial application running

In case you want to process the whole tutorial for fast success you could only follow the ldquoHands-on Tasksrdquosections that are highlighted with a blue border at the left sideTo jump from one hands-on task to another click the blue ldquopreviousrdquordquonextrdquo link buttons (see Screenshot1 item 1) or search for ldquoHands-on Tasksrdquo For just quickly building the HANA XS Getting Started application ofthis tutorial it is enough to execute the steps inside the Hands-on Tasks sections

Screenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links

NOTE For a deeper understanding of SAP HANA XS application development on SAP HANA Platform wewarmly recommend reading the complete tutorial Also see the Glossary with terms and short terms used inthe tutorial

Hint 4 Copy amp Paste File and Package NamesDuring the tutorial you need to create many files and packages Those files and package names that can becopied and pasted without editing change are highlighted with a blue color like this examplecreatePersonhdbprocedure

Avoid typos by entering these blue highlighted strings with copy and paste function

Hint 5 Copy Source Code and Replace User-Specific NamesDuring the tutorial you need to copy and paste source code where user specific data is contained (mainly thenamespaces of your HANA artifacts will contain you user name)

When copying source code you need to replace the highlighted user-specific red color string devuserxxwith your own user-specific names (eg devuser00 or gordanl see Screenshot 1 bullet item 2)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 3: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 3

Table of Contents

1 Introduction 511 What Do You Get Here 5

12 Intended Audience 5

13 Applicable Releases 5

14 End-2-End Development Scenario Overview 5

15 Development Steps in the Corresponding HANA Layers 6

16 How to Run this Tutorial 7

2 Prerequisites of Web-based Development Developer Roles 821 Get a Database User with the Required Roles for the HANA Web IDE 8

22 Start SAP HANA Web-based Development Workbench and Change Initial Password 9

221 Remember Your Database User Data 11

3 Build a Simple SAP HANA Native PersonsList Application 1231 Step 1 Create new SAP HANA native Application within Web IDE 13

311 Create blank SAP HANA XS Application 13312 Run Blank SAP HANA XS Application in Web Browser 1532 Step 2 Set up the Persistence Model in SAP HANA Database 17

321 Create Sub-Package data 17322 Create New Database Schema 19323 Define Data Type Person within CDS Document 21324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table 25325 Load Mock Data from a csv File into Database Table 2633 Step 3 Build the Application Backend with SAP HANA Extended Application Services 30

331 Expose the Person Database Entity by means of OData Service 30332 Implement Application Logic to Write new Records into Persons Table 34333 View the Application Backend in SAP HANA Catalog 3734 Step 4 Build the Application Frontend with SAPUI5 40

341 Create Package Structure for SAPUI5 Application Content 40342 Design and Implement Application UI in SAPUI5 JavaScriptView 41343 Create SAPUI5 View Controller with SAPUI5 OData Model 43344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content 4535 Run and Test the Final PersonsList Application 47

351 Recap Anatomy of the Whole PersonsList Application 47352 Run PersonsList Application on SAP HANA XS Server 47353 Test PersonsList Application in Web Browser 48354 Check OData Write Access in SAP HANA Database 4936 1 Extension Writing Server-Side JavaScript Code 51

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs 52362 Add XSJS Service to Your PersonsList Web Application 52363 Debugging of HANA XS Server-Side JavaScript Code 54

4 Glossary 58

5 Related Content 5951 SAP HANA Extended Application Services 59

52 UI Development Toolkit for HTML5 (aka SAPUI5) 59

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 4

Source CodeSource Code 1 xsaccess file to define application access permissions 16Source Code 2 devuserxx_perslisthdbschema file 19Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespace 22Source Code 4 Data definition file mymodelhdbdd with correct namespace and schema 23Source Code 5 Database sequence file pershdbsequence 25Source Code 6 perscsv file to import mock data from a list of comma separated values 26Source Code 7 pershdbti file to import table data from csv file 26Source Code 8 OData service definition file persxsodata for service consumption of entity Person 31Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbdd 34Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modificationexit for OData service) 36Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in ODataservice 37Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjs 42Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata file 44Source Code 14 indexhtml with SAPUI5 application bootstrap and html content 45Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session username 52Source Code 16 indexhtml with the included xsjs service to display the logged on user in the applicationheader 53

FiguresFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application 6Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application 12Figure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application 13Figure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initialload 17Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side 27Figure 6 Step 3 - application backend part with OData service and HANA database procedure for readwritelogic 30Figure 7 OData Service creation based on new OData service definition file inside HANA repository 31Figure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption 40Figure 9 User interface sketch diagram with Persons entry form and table control 41Figure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices 47Figure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript andjQuery 51

ScreenshotsScreenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links 7Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend 8Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository23Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definitionfile mymodelhdbdd 24Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration52

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 5

1 Introduction11 What Do You Get HereThis guide describes step by step how to create your first SAP HANA native application on an on premiseSAP HANA Platform by using the zero-install SAP HANA Web-based Development Workbench You developa PersonsList web application end-to-end from HANA database table definition to application logicimplementation up to the SAPUI5 user interface on frontend side

Platform You build and run your application on the SAP HANA Platform SPS07Database SAP HANA is used to create one column-based table to store Person dataRuntime Your application runs on SAP HANA extended application services (shortly SAP HANA XSsee Glossary) a small footprint application server including a web server and basis for an applicationdevelopment platform inside SAP HANADesign time As development tool you purely use the SAP HANA Web-based Development Workbench(shortly HANA Web IDE) that allows us to develop the whole application in a browser without the need toinstall any development tools on your clientFrontend You will use the UI development toolkit for HTML5 (shortly SAPUI5) SAPrsquos HTML5 library thathelps you to build responsive business applications for all devices

12 Intended AudienceAll developers and programmers who may be new to the SAP HANA Platform andor SAP HANA nativedevelopment based on SAP HANA extended application services (also known as SAP HANA XS)

13 Applicable ReleasesThe tutorial was built on SAP HANA SPS 07 Database Revision 73 (version string 1007300389160 seeSAP note 1990011)

14 End-2-End Development Scenario OverviewThe application frontend you build in this tutorial looks very simple Person entries that are retrieved from theSAP HANA database are displayed in a table control

(1) You can enter first and last name of a new Person entry and write it to the backend with an input forminside the table toolbar

(2) On creation of a new Person entry a success message gets displayed(3) And the new entry gets instantly displayed in the table UI

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 6

15 Development Steps in the Corresponding HANA LayersFigure 1 illustrates the whole development scenario in a simple overview The development process applied intutorial has been divided in five main development steps

(0) Ask your SAP HANA administrator to assign HANA Web IDE specific roles to your database user(1) Create a bare-bone SAP HANA XS application(2) Define a CDS-based data persistence object in the SAP HANA database(3) Develop the application logic Create a OData-service to read and write person table records from and to

the HANA database(4) Develop application frontend side Implement of a simple SAPUI5 user interfaceFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application

The main development steps and the corresponding sections of the end-to-end tutorial

Step Section What You will Learn

Prerequisites for Web-basedDevelopment database user withdeveloper roles

Know the developer roles that are required for a database user touse the SAP HANA Web-based Development Workbench

Create new SAP HANA nativeapplication within SAP HANA Web-based Development Workbench

Start the SAP HANA Web-based Development Workbench in aWeb browser

Create blank SAP HANA XS application Run blank SAP HANA XS application in web browser Set up the application package structure in SAP HANA repository

Set up the persistence model in SAPHANA database

Create sub-package data Create a database schema Define data type Person within CDS document Load initial mock data from csv file into database table

Build the application backend with SAPHANA extended application services

Expose the Person database entity by means of OData service Implement application logic to write new records into Persons

table (with OData modification exit that calls a SQLScriptprocedure)

Build amp run the SAPUI5 applicationfrontend UI consuming an ODataservice to read and write Persons data

How to build the SAPUI5 frontend with a simple input form to addnew Person entries and a table control to list stored ones

How to consume an OData service with read and write access inSAPUI5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 7

16 How to Run this TutorialFor executing this tutorial successfully we strongly recommend read the following list of hints

Hint 1 Which Web Browser Should you useThis HANA Web IDE tutorial has been proven to work best with Mozilla Firefox in the newest availableversion We therefore recommend using Firefox when working through this tutorial Nevertheless the HANAWeb IDE is also supported for latest Google Chrome and Microsoft Internet Explorer (10+) browsers

Hint 2 First set-up Your Database UserBefore you can start with the web-based HANA XS application development you need to set-up your SAPHANA database user as described in chapter 2 Prerequisites of Web-based Development Developer Roles

Hint 3 For Quick Success just Follow the Hands-On TasksMany developers donrsquot like to read lengthy tutorials and often just want to execute the relevant steps to get thetutorial application running

In case you want to process the whole tutorial for fast success you could only follow the ldquoHands-on Tasksrdquosections that are highlighted with a blue border at the left sideTo jump from one hands-on task to another click the blue ldquopreviousrdquordquonextrdquo link buttons (see Screenshot1 item 1) or search for ldquoHands-on Tasksrdquo For just quickly building the HANA XS Getting Started application ofthis tutorial it is enough to execute the steps inside the Hands-on Tasks sections

Screenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links

NOTE For a deeper understanding of SAP HANA XS application development on SAP HANA Platform wewarmly recommend reading the complete tutorial Also see the Glossary with terms and short terms used inthe tutorial

Hint 4 Copy amp Paste File and Package NamesDuring the tutorial you need to create many files and packages Those files and package names that can becopied and pasted without editing change are highlighted with a blue color like this examplecreatePersonhdbprocedure

Avoid typos by entering these blue highlighted strings with copy and paste function

Hint 5 Copy Source Code and Replace User-Specific NamesDuring the tutorial you need to copy and paste source code where user specific data is contained (mainly thenamespaces of your HANA artifacts will contain you user name)

When copying source code you need to replace the highlighted user-specific red color string devuserxxwith your own user-specific names (eg devuser00 or gordanl see Screenshot 1 bullet item 2)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 4: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 4

Source CodeSource Code 1 xsaccess file to define application access permissions 16Source Code 2 devuserxx_perslisthdbschema file 19Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespace 22Source Code 4 Data definition file mymodelhdbdd with correct namespace and schema 23Source Code 5 Database sequence file pershdbsequence 25Source Code 6 perscsv file to import mock data from a list of comma separated values 26Source Code 7 pershdbti file to import table data from csv file 26Source Code 8 OData service definition file persxsodata for service consumption of entity Person 31Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbdd 34Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modificationexit for OData service) 36Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in ODataservice 37Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjs 42Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata file 44Source Code 14 indexhtml with SAPUI5 application bootstrap and html content 45Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session username 52Source Code 16 indexhtml with the included xsjs service to display the logged on user in the applicationheader 53

FiguresFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application 6Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application 12Figure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application 13Figure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initialload 17Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side 27Figure 6 Step 3 - application backend part with OData service and HANA database procedure for readwritelogic 30Figure 7 OData Service creation based on new OData service definition file inside HANA repository 31Figure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption 40Figure 9 User interface sketch diagram with Persons entry form and table control 41Figure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices 47Figure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript andjQuery 51

ScreenshotsScreenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links 7Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend 8Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository23Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definitionfile mymodelhdbdd 24Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration52

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 5

1 Introduction11 What Do You Get HereThis guide describes step by step how to create your first SAP HANA native application on an on premiseSAP HANA Platform by using the zero-install SAP HANA Web-based Development Workbench You developa PersonsList web application end-to-end from HANA database table definition to application logicimplementation up to the SAPUI5 user interface on frontend side

Platform You build and run your application on the SAP HANA Platform SPS07Database SAP HANA is used to create one column-based table to store Person dataRuntime Your application runs on SAP HANA extended application services (shortly SAP HANA XSsee Glossary) a small footprint application server including a web server and basis for an applicationdevelopment platform inside SAP HANADesign time As development tool you purely use the SAP HANA Web-based Development Workbench(shortly HANA Web IDE) that allows us to develop the whole application in a browser without the need toinstall any development tools on your clientFrontend You will use the UI development toolkit for HTML5 (shortly SAPUI5) SAPrsquos HTML5 library thathelps you to build responsive business applications for all devices

12 Intended AudienceAll developers and programmers who may be new to the SAP HANA Platform andor SAP HANA nativedevelopment based on SAP HANA extended application services (also known as SAP HANA XS)

13 Applicable ReleasesThe tutorial was built on SAP HANA SPS 07 Database Revision 73 (version string 1007300389160 seeSAP note 1990011)

14 End-2-End Development Scenario OverviewThe application frontend you build in this tutorial looks very simple Person entries that are retrieved from theSAP HANA database are displayed in a table control

(1) You can enter first and last name of a new Person entry and write it to the backend with an input forminside the table toolbar

(2) On creation of a new Person entry a success message gets displayed(3) And the new entry gets instantly displayed in the table UI

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 6

15 Development Steps in the Corresponding HANA LayersFigure 1 illustrates the whole development scenario in a simple overview The development process applied intutorial has been divided in five main development steps

(0) Ask your SAP HANA administrator to assign HANA Web IDE specific roles to your database user(1) Create a bare-bone SAP HANA XS application(2) Define a CDS-based data persistence object in the SAP HANA database(3) Develop the application logic Create a OData-service to read and write person table records from and to

the HANA database(4) Develop application frontend side Implement of a simple SAPUI5 user interfaceFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application

The main development steps and the corresponding sections of the end-to-end tutorial

Step Section What You will Learn

Prerequisites for Web-basedDevelopment database user withdeveloper roles

Know the developer roles that are required for a database user touse the SAP HANA Web-based Development Workbench

Create new SAP HANA nativeapplication within SAP HANA Web-based Development Workbench

Start the SAP HANA Web-based Development Workbench in aWeb browser

Create blank SAP HANA XS application Run blank SAP HANA XS application in web browser Set up the application package structure in SAP HANA repository

Set up the persistence model in SAPHANA database

Create sub-package data Create a database schema Define data type Person within CDS document Load initial mock data from csv file into database table

Build the application backend with SAPHANA extended application services

Expose the Person database entity by means of OData service Implement application logic to write new records into Persons

table (with OData modification exit that calls a SQLScriptprocedure)

Build amp run the SAPUI5 applicationfrontend UI consuming an ODataservice to read and write Persons data

How to build the SAPUI5 frontend with a simple input form to addnew Person entries and a table control to list stored ones

How to consume an OData service with read and write access inSAPUI5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 7

16 How to Run this TutorialFor executing this tutorial successfully we strongly recommend read the following list of hints

Hint 1 Which Web Browser Should you useThis HANA Web IDE tutorial has been proven to work best with Mozilla Firefox in the newest availableversion We therefore recommend using Firefox when working through this tutorial Nevertheless the HANAWeb IDE is also supported for latest Google Chrome and Microsoft Internet Explorer (10+) browsers

Hint 2 First set-up Your Database UserBefore you can start with the web-based HANA XS application development you need to set-up your SAPHANA database user as described in chapter 2 Prerequisites of Web-based Development Developer Roles

Hint 3 For Quick Success just Follow the Hands-On TasksMany developers donrsquot like to read lengthy tutorials and often just want to execute the relevant steps to get thetutorial application running

In case you want to process the whole tutorial for fast success you could only follow the ldquoHands-on Tasksrdquosections that are highlighted with a blue border at the left sideTo jump from one hands-on task to another click the blue ldquopreviousrdquordquonextrdquo link buttons (see Screenshot1 item 1) or search for ldquoHands-on Tasksrdquo For just quickly building the HANA XS Getting Started application ofthis tutorial it is enough to execute the steps inside the Hands-on Tasks sections

Screenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links

NOTE For a deeper understanding of SAP HANA XS application development on SAP HANA Platform wewarmly recommend reading the complete tutorial Also see the Glossary with terms and short terms used inthe tutorial

Hint 4 Copy amp Paste File and Package NamesDuring the tutorial you need to create many files and packages Those files and package names that can becopied and pasted without editing change are highlighted with a blue color like this examplecreatePersonhdbprocedure

Avoid typos by entering these blue highlighted strings with copy and paste function

Hint 5 Copy Source Code and Replace User-Specific NamesDuring the tutorial you need to copy and paste source code where user specific data is contained (mainly thenamespaces of your HANA artifacts will contain you user name)

When copying source code you need to replace the highlighted user-specific red color string devuserxxwith your own user-specific names (eg devuser00 or gordanl see Screenshot 1 bullet item 2)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 5: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 5

1 Introduction11 What Do You Get HereThis guide describes step by step how to create your first SAP HANA native application on an on premiseSAP HANA Platform by using the zero-install SAP HANA Web-based Development Workbench You developa PersonsList web application end-to-end from HANA database table definition to application logicimplementation up to the SAPUI5 user interface on frontend side

Platform You build and run your application on the SAP HANA Platform SPS07Database SAP HANA is used to create one column-based table to store Person dataRuntime Your application runs on SAP HANA extended application services (shortly SAP HANA XSsee Glossary) a small footprint application server including a web server and basis for an applicationdevelopment platform inside SAP HANADesign time As development tool you purely use the SAP HANA Web-based Development Workbench(shortly HANA Web IDE) that allows us to develop the whole application in a browser without the need toinstall any development tools on your clientFrontend You will use the UI development toolkit for HTML5 (shortly SAPUI5) SAPrsquos HTML5 library thathelps you to build responsive business applications for all devices

12 Intended AudienceAll developers and programmers who may be new to the SAP HANA Platform andor SAP HANA nativedevelopment based on SAP HANA extended application services (also known as SAP HANA XS)

13 Applicable ReleasesThe tutorial was built on SAP HANA SPS 07 Database Revision 73 (version string 1007300389160 seeSAP note 1990011)

14 End-2-End Development Scenario OverviewThe application frontend you build in this tutorial looks very simple Person entries that are retrieved from theSAP HANA database are displayed in a table control

(1) You can enter first and last name of a new Person entry and write it to the backend with an input forminside the table toolbar

(2) On creation of a new Person entry a success message gets displayed(3) And the new entry gets instantly displayed in the table UI

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 6

15 Development Steps in the Corresponding HANA LayersFigure 1 illustrates the whole development scenario in a simple overview The development process applied intutorial has been divided in five main development steps

(0) Ask your SAP HANA administrator to assign HANA Web IDE specific roles to your database user(1) Create a bare-bone SAP HANA XS application(2) Define a CDS-based data persistence object in the SAP HANA database(3) Develop the application logic Create a OData-service to read and write person table records from and to

the HANA database(4) Develop application frontend side Implement of a simple SAPUI5 user interfaceFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application

The main development steps and the corresponding sections of the end-to-end tutorial

Step Section What You will Learn

Prerequisites for Web-basedDevelopment database user withdeveloper roles

Know the developer roles that are required for a database user touse the SAP HANA Web-based Development Workbench

Create new SAP HANA nativeapplication within SAP HANA Web-based Development Workbench

Start the SAP HANA Web-based Development Workbench in aWeb browser

Create blank SAP HANA XS application Run blank SAP HANA XS application in web browser Set up the application package structure in SAP HANA repository

Set up the persistence model in SAPHANA database

Create sub-package data Create a database schema Define data type Person within CDS document Load initial mock data from csv file into database table

Build the application backend with SAPHANA extended application services

Expose the Person database entity by means of OData service Implement application logic to write new records into Persons

table (with OData modification exit that calls a SQLScriptprocedure)

Build amp run the SAPUI5 applicationfrontend UI consuming an ODataservice to read and write Persons data

How to build the SAPUI5 frontend with a simple input form to addnew Person entries and a table control to list stored ones

How to consume an OData service with read and write access inSAPUI5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 7

16 How to Run this TutorialFor executing this tutorial successfully we strongly recommend read the following list of hints

Hint 1 Which Web Browser Should you useThis HANA Web IDE tutorial has been proven to work best with Mozilla Firefox in the newest availableversion We therefore recommend using Firefox when working through this tutorial Nevertheless the HANAWeb IDE is also supported for latest Google Chrome and Microsoft Internet Explorer (10+) browsers

Hint 2 First set-up Your Database UserBefore you can start with the web-based HANA XS application development you need to set-up your SAPHANA database user as described in chapter 2 Prerequisites of Web-based Development Developer Roles

Hint 3 For Quick Success just Follow the Hands-On TasksMany developers donrsquot like to read lengthy tutorials and often just want to execute the relevant steps to get thetutorial application running

In case you want to process the whole tutorial for fast success you could only follow the ldquoHands-on Tasksrdquosections that are highlighted with a blue border at the left sideTo jump from one hands-on task to another click the blue ldquopreviousrdquordquonextrdquo link buttons (see Screenshot1 item 1) or search for ldquoHands-on Tasksrdquo For just quickly building the HANA XS Getting Started application ofthis tutorial it is enough to execute the steps inside the Hands-on Tasks sections

Screenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links

NOTE For a deeper understanding of SAP HANA XS application development on SAP HANA Platform wewarmly recommend reading the complete tutorial Also see the Glossary with terms and short terms used inthe tutorial

Hint 4 Copy amp Paste File and Package NamesDuring the tutorial you need to create many files and packages Those files and package names that can becopied and pasted without editing change are highlighted with a blue color like this examplecreatePersonhdbprocedure

Avoid typos by entering these blue highlighted strings with copy and paste function

Hint 5 Copy Source Code and Replace User-Specific NamesDuring the tutorial you need to copy and paste source code where user specific data is contained (mainly thenamespaces of your HANA artifacts will contain you user name)

When copying source code you need to replace the highlighted user-specific red color string devuserxxwith your own user-specific names (eg devuser00 or gordanl see Screenshot 1 bullet item 2)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 6: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 6

15 Development Steps in the Corresponding HANA LayersFigure 1 illustrates the whole development scenario in a simple overview The development process applied intutorial has been divided in five main development steps

(0) Ask your SAP HANA administrator to assign HANA Web IDE specific roles to your database user(1) Create a bare-bone SAP HANA XS application(2) Define a CDS-based data persistence object in the SAP HANA database(3) Develop the application logic Create a OData-service to read and write person table records from and to

the HANA database(4) Develop application frontend side Implement of a simple SAPUI5 user interfaceFigure 1 Overview of the development Steps for the on premise SAP HANA native PersonsList application

The main development steps and the corresponding sections of the end-to-end tutorial

Step Section What You will Learn

Prerequisites for Web-basedDevelopment database user withdeveloper roles

Know the developer roles that are required for a database user touse the SAP HANA Web-based Development Workbench

Create new SAP HANA nativeapplication within SAP HANA Web-based Development Workbench

Start the SAP HANA Web-based Development Workbench in aWeb browser

Create blank SAP HANA XS application Run blank SAP HANA XS application in web browser Set up the application package structure in SAP HANA repository

Set up the persistence model in SAPHANA database

Create sub-package data Create a database schema Define data type Person within CDS document Load initial mock data from csv file into database table

Build the application backend with SAPHANA extended application services

Expose the Person database entity by means of OData service Implement application logic to write new records into Persons

table (with OData modification exit that calls a SQLScriptprocedure)

Build amp run the SAPUI5 applicationfrontend UI consuming an ODataservice to read and write Persons data

How to build the SAPUI5 frontend with a simple input form to addnew Person entries and a table control to list stored ones

How to consume an OData service with read and write access inSAPUI5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 7

16 How to Run this TutorialFor executing this tutorial successfully we strongly recommend read the following list of hints

Hint 1 Which Web Browser Should you useThis HANA Web IDE tutorial has been proven to work best with Mozilla Firefox in the newest availableversion We therefore recommend using Firefox when working through this tutorial Nevertheless the HANAWeb IDE is also supported for latest Google Chrome and Microsoft Internet Explorer (10+) browsers

Hint 2 First set-up Your Database UserBefore you can start with the web-based HANA XS application development you need to set-up your SAPHANA database user as described in chapter 2 Prerequisites of Web-based Development Developer Roles

Hint 3 For Quick Success just Follow the Hands-On TasksMany developers donrsquot like to read lengthy tutorials and often just want to execute the relevant steps to get thetutorial application running

In case you want to process the whole tutorial for fast success you could only follow the ldquoHands-on Tasksrdquosections that are highlighted with a blue border at the left sideTo jump from one hands-on task to another click the blue ldquopreviousrdquordquonextrdquo link buttons (see Screenshot1 item 1) or search for ldquoHands-on Tasksrdquo For just quickly building the HANA XS Getting Started application ofthis tutorial it is enough to execute the steps inside the Hands-on Tasks sections

Screenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links

NOTE For a deeper understanding of SAP HANA XS application development on SAP HANA Platform wewarmly recommend reading the complete tutorial Also see the Glossary with terms and short terms used inthe tutorial

Hint 4 Copy amp Paste File and Package NamesDuring the tutorial you need to create many files and packages Those files and package names that can becopied and pasted without editing change are highlighted with a blue color like this examplecreatePersonhdbprocedure

Avoid typos by entering these blue highlighted strings with copy and paste function

Hint 5 Copy Source Code and Replace User-Specific NamesDuring the tutorial you need to copy and paste source code where user specific data is contained (mainly thenamespaces of your HANA artifacts will contain you user name)

When copying source code you need to replace the highlighted user-specific red color string devuserxxwith your own user-specific names (eg devuser00 or gordanl see Screenshot 1 bullet item 2)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 7: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 7

16 How to Run this TutorialFor executing this tutorial successfully we strongly recommend read the following list of hints

Hint 1 Which Web Browser Should you useThis HANA Web IDE tutorial has been proven to work best with Mozilla Firefox in the newest availableversion We therefore recommend using Firefox when working through this tutorial Nevertheless the HANAWeb IDE is also supported for latest Google Chrome and Microsoft Internet Explorer (10+) browsers

Hint 2 First set-up Your Database UserBefore you can start with the web-based HANA XS application development you need to set-up your SAPHANA database user as described in chapter 2 Prerequisites of Web-based Development Developer Roles

Hint 3 For Quick Success just Follow the Hands-On TasksMany developers donrsquot like to read lengthy tutorials and often just want to execute the relevant steps to get thetutorial application running

In case you want to process the whole tutorial for fast success you could only follow the ldquoHands-on Tasksrdquosections that are highlighted with a blue border at the left sideTo jump from one hands-on task to another click the blue ldquopreviousrdquordquonextrdquo link buttons (see Screenshot1 item 1) or search for ldquoHands-on Tasksrdquo For just quickly building the HANA XS Getting Started application ofthis tutorial it is enough to execute the steps inside the Hands-on Tasks sections

Screenshot 1 Hands-on Tasks section highlighted with blue border line and navigation links

NOTE For a deeper understanding of SAP HANA XS application development on SAP HANA Platform wewarmly recommend reading the complete tutorial Also see the Glossary with terms and short terms used inthe tutorial

Hint 4 Copy amp Paste File and Package NamesDuring the tutorial you need to create many files and packages Those files and package names that can becopied and pasted without editing change are highlighted with a blue color like this examplecreatePersonhdbprocedure

Avoid typos by entering these blue highlighted strings with copy and paste function

Hint 5 Copy Source Code and Replace User-Specific NamesDuring the tutorial you need to copy and paste source code where user specific data is contained (mainly thenamespaces of your HANA artifacts will contain you user name)

When copying source code you need to replace the highlighted user-specific red color string devuserxxwith your own user-specific names (eg devuser00 or gordanl see Screenshot 1 bullet item 2)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 8: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 8

2 Prerequisites of Web-based Development Developer RolesThe SAP HANA Web-based Development Workbench provides application developers with tools that enableaccess to SAP HANA repository and catalog objects from a remote location using a Web browser without theneed to install the SAP HANA studio locally

21 Get a Database User with the Required Roles for the HANA Web IDEBefore you start using the SAP HANA Web-based Development Workbench your SAP HANA administratormust set up a user account for you in the SAP HANA database and assign the following required developerroles to your SAP HANA database user

Role Description

saphanaxsiderolesDeveloper

This role grants the privileges required to use all four tools included in the SAPHANA Web-based Development Workbench (editor catalog security andtraces) The role saphanaxsiderolesDeveloper contains the followingfour roles that grant access to the user interface of the HANA Web IDE To seeHANA content and to apply the associated tool functions a user requiresadditional privileges

saphanaxsiderolesEditorDeveloper to access to the HANA WebIDE editor (with proper privileges inspect create change delete andactivate SAP HANA repository objects)saphanaxsiderolesCatalogDeveloper to access the HANA WebIDE catalog (with proper privileges create edit execute and manage SQLcatalog artifacts in SAP HANA database)saphanaxsiderolesSecurityAdmin to access the security section(with proper privileges to create users create roles assign objects andmanage security add)saphanaxsiderolesTraceViewer to access to the trace section(with proper privileges view and download traces for SAP HANA XSapplications and set trace levels eg info error debug)

saphanaxsdebuggerDebugger

The debugger role enables the developer to debug XS server-side JavaScriptsource code This role is needed to run section 1 Extension Writing Server-Side JavaScript Code at the end of the tutorial

Screenshot 2 Database user DEV_USER_00 with granted roles saphanaxsiderolesDeveloper andsaphanaxsdebuggerDebugger that are needed to access the HANA Web IDE frontend

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 9: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 9

NOTE The user DEV_USER_00 we used in this tutorial to build the PersonsList XS application got alsoassigned the roles PUBLIC MODELING and CONTENT_ADMIN

Further information SAP HANA Developer Guide gt 3931 Tutorial Creating a User and Assigning Roles

22 Start SAP HANA Web-based Development Workbench and ChangeInitial Password

For development of our SAP HANA native PersonsList application you can launch the SAP HANA Web-basedDevelopment Workbench and login with your SAP HANA database user

PrerequisitesYou have a database user You need the database user to work with SAP HANA Web-basedDevelopment Workbench In the same way you would also need the database user if you would developwith SAP HANA Studio

Your database user is assigned the relevant roles for the SAP HANA Web-based DevelopmentWorkbench (saphanaxsiderolesDeveloper)

Hands-on Tasks1 Open the SAP HANA Web-based Development Workbench Editor in your Web browser It is available on

the SAP HANA XS Web server at the following URLhttpsltWeb server hostgt80ltSAP HANA instancegtsaphanaxside

NOTE SAP HANA Web-based Development Workbench supports Microsoft Internet Explorer (10+)Mozilla Firefox and Google Chrome Web browsers

2 On the HANA Login page enter your database user name and initial password

3 When you launch the SAP HANA Web-based Development Workbench for the very first time with yourinitial password you get a prompt to change your initial password

Enter the corresponding password fields and press Change Password button

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 10: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 10

ResultAfter the HANA Login dialog you enter the landing page of SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 11: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 11

What is the SAP HANA Web-based Development Workbench

The SAP HANA Web-based Development Workbench (short term HANA Web IDE) is a browser-basedintegrated development environment (IDE) to build SAP HANA native applications with a particular emphasison the following development experience qualities

Zero-installation only a browser client is needed to start coding

Simple and fast development roundtrip just press run and the app will start in the same browserinstantly

Integrated debugging experience set a breakpoint and start hunting your bug immediately

Template-based development build and launch simple applications in less than 60 seconds

Database citizen explore the SAP HANA database catalog and security artifacts and content easily

Multi-device support work on your code on the go on your favorite tablets

Further information

SAP Help SAP HANA Developer Guide gt 39 Developing Applications in Web-based Environments

SCN blog Whatacutes New SAP HANA SPS 07 Web-based Development Workbench Tom Jung SAP AGDec 3 2013

SCN blog HANA XS development with the SPS07 Web IDE (focus on debugging) Kai ChristophMueller SAP AG Nov 27 2013

Video Web-based Development Workbench Tom Jung SAP AG Dec 18 2013

221 Remember Your Database User DataAfter executing successfully the above described steps you have to remember your user data as you needthem later several times in the tutorial

Data Comment Name used in this tutorial Example

Database user Database user of the SAPHANA database on an onpremise SAP HANA systemNeeded to log on to the HANAWeb IDE

DEV_USER_XXas the example user usedthrough the entire tutorial

DEV_USER_00

GORDANL

Database password

XS applicationpackage name

Name of the SAP HANArepository package were yourXS application design timeartifacts are stored

In source code devuserxx devuser00

gordanl

SAP HANAdatabase schemaname

Schema name in SAP HANAcatalog were your databaseobjects are stored

devuserxx_schema devuser00_schema

gordanl_schema

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 12: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 12

3 Build a Simple SAP HANA Native PersonsList ApplicationPreviewIn Figure 2 you see architecture and content preview of the whole SAP HANA native PersonsList applicationyou will develop step-by-step within the following four main sections of the tutorial

Step 1 Create HANA XS application how to create a new and minimalistic SAP HANA nativeapplication using the SAP HANA Web-based Development Workbench

Step 2 Set up the persistence model how to set up the persistence model for the PersonsListapplication in the SAP HANA database including database schema creation CDS-based table definitionand initial table load from a static perscsv file

Step 3 Code the backend how to build the application backend with SAP HANA extended applicationservices including OData service exposure for read and write access and a SQLScript procedurecreatePerson() as modification exit for OData write requests With this step your PersonsList applicationimplements the CR (=Create amp Read)-functionality of a full CRUD-application (Create Read UpdateDelete)

Step 4 Build the SAPUI5 frontend how to build the application frontend with the UI development toolkitfor HTML5 (SAPUI5)

Figure 2 Architecture artifacts and development steps of final SAP HANA native PersonsList application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 13: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 13

31 Step 1 Create new SAP HANA native Application within Web IDE

PreviewFigure 3 Step 1 ndash initial creation of a bare bone SAP HANA native application

Design-Time Application Artifacts Created in this StepFile extension Object Description

Package A container in the SAPHANA repository fordevelopment objects

Packages are represented by folders The package thatcontains the application-descriptor file becomes the root pathof the resources exposed by the application you develop

xsapp SAP HANA XS applicationdescriptor

An application-specific file in a repository package thatdefines an applications availability within SAP HANAextended application services The package that contains theapplication descriptor becomes the root path of the resourcesexposed by the application

xsaccess SAP HANA XS applicationaccess file

An application-specific configuration file that definespermissions for a native SAP HANA application for exampleto manage access to the application and running objects inthe package

indexhtml Default entry page Default entry (index) file with HTML markup to start SAPHANA application in a web browser

311 Create blank SAP HANA XS ApplicationTo realize native applications on SAP HANA the SAP HANA repository is used to manage the differentresources (either static content libraries like SAPUI5 control and runtime libraries or the defined applicationresources containing stored procedures table (entity) definitions JavaScript-code and the like) that altogetherdefine the behavior and appearance of the application

To create a new SAP HANA XS application inside the HANA repository we use the editorrsquos ldquoCreateApplication from Templaterdquo function that adds an initial application skeleton to a new package

Prerequisites You have launched the SAP HANA Web-based Development Workbench To do so you need a database

user with the role saphanaxsiderolesDeveloper that grants the privileges required to use all the toolsincluded in the SAP HANA Web-based Development Workbench

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 14: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 14

Hands-on Tasks1 On the landing page of the SAP HANA Web-based Development Workbench click on the ldquoEditorrdquo tile to

start the HANA Repository Editor in a new browser tab

2 In the Editorrsquos content tree select root node Content inside the SAP HANA Repository

3 Open context menu and select item Create Application

4 In the ldquoCreate Application from Templaterdquo popup dialog enter package namedevdevuserxxperslist eg devdevuser00perslist

5 In Template dropdown list select item Blank Application ndash (xsapp and xsaccess)

6 Press Create

7 The system creates the files indexhtml xsaccess (HANA XS application access file)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 15: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 15

and xsapp (HANA XS application descriptor) and automatically opens the indexhtml file in a new editortab

ResultAs a result the following SAP HANA application artifacts are created and listed under your newly addedpackage

application root package New packageltuserrsquos root packagegtperslist in SAP HANARepository that comprises the initial application(see below) those that will be incrementally addedlater

xsaccess Expose your package contentmeaning it can be accessed via HTTP and assignaccess controls for example to manage who canaccess content and how

xsapp Each application that you want to developand deploy on SAP HANA extended applicationservices (SAP HANA XS) must have anapplication-descriptor file The applicationdescriptor is the core file that you use to describean applications framework within SAP HANA XS

indexhtml web page to start your application in abrowser client The indexhtml initially containsonly a page title and one paragraph We will laterreplace it with content needed to run a SAPUI5application frontend

312 Run Blank SAP HANA XS Application in Web BrowserAfter having created the blank XS application under package devdevuserxxperslist with the editorrsquostemplate creation function we can run it in the web browser

Hands-on Tasks8 To test the blank application in the web browser open your application package in the editorrsquos Content

tree Content dev devuserxx perslist indexhtml

NOTE The editor toolbar functions get automatically adapted to the selected item in the Content

tree The toolbar button ldquoRun on server (F8)rdquo gets displayed for a selected indexhtml file to openthe application frontend in a browser window

9 Press button ldquoRun on server (F8)rdquo to start the blank application in a web browser by requestingthe indexhtml file

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 16: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 16

Result

3121 Application Descriptor xsappEach SAP HANA native application must have an application descriptor file (a file without file name andextension xsapp) The application descriptor is the core file that is used to describe an applicationsavailability within SAP HANA extended application services The package that contains the applicationdescriptor file becomes the root path of the resources exposed by the application If the package saptestcontains the file xsapp the application will be available under the URL httplthostgtltportgtsaptest

The file content must be valid JSON for compatibility reasons (like ) but does not have any content used forprocessing

Terminology JSON or JavaScript Object Notation is an open standard format that uses human-readabletext to transmit data objects consisting of attributendashvalue pairs It is used primarily to transmit data between aserver and web application as an alternative to XML

3122 Application Access File xsaccessThe application access file with name xsaccess (suffix only) defines data (content) exposure to clientsdefines the authentication method and configures application privileges required to access content of packageand its sub-packages specifies URL rewrite rules and defines if SSL is required

Similar to the xsapp file also the xsaccess file is using the JSON format xsaccess files can be located inthe root package of the application or in any sub-package When accessing the application via an URL thexsaccess file in the sub-package or up the package hierarchy to the root package is used

Source Code 1 xsaccess file to define application access permissionsexposed true authentication [method Basic]

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 17: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 17

3123 Application Privilege File xsprivileges [not covered in this tutorial]In SAP HANA extended application services (SAP HANA XS) the application-privileges (xsprivileges) filecan be used for access authorization in the xsaccess file or checked programmatically to secure parts of anXS application (examples to start the application or to perform administrative actions on an application)

Multiple xsprivileges files are allowed but only at different levels in the package hierarchy

Further information SAP HANA Developer Guide gt 358 Creating an SAP HANA XS Application PrivilegesFile

32 Step 2 Set up the Persistence Model in SAP HANA Database

PreviewFigure 4 Step 2 - Backend part in SAP HANA database with CDS-based data persistence objects and initial load

Design-Time Application Artifacts created in this StepFile extension Object Description

hdbschema Schema A design-time definition of a database schema which organizesdatabase objects into groups

hdbdd CDS (Core DataServices) data definitiondocument

A file containing a design-time definition of a CDS-compliantdata-persistence object (for example an entity or a data type)using the Data Definition Language (DDL)

hdbti Table import definition A table-import configuration that specifies which csv file isimported into which table in the SAP HANA system

hdbsequence Sequence A design-time definition of a database sequence which is set ofunique numbers for example for use as primary keys for aspecific table

321 Create Sub-Package dataTo logically structure content of our whole PersonsList application inside the SAP HANA repository we createsub-packages for related artifacts under the applicationrsquos root package devdevuserxxperslist Filesrelated with the persistence model are stored in sub-package data that can easily be added within threesteps

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 18: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 18

Hands-on Tasks10 In the Editorrsquos repository content tree select package node Content dev devuserxx perslist

11 Select context menu item Create Package The newly created sub-package is named 0_NewPackage bydefault

12 Enter data as name of the new package

Result

SAP HANA repository The SAP HANA repository is the central component of the SAP HANA developmentinfrastructure and an integral part of the SAP HANA system The repository is used for central storage andversioning of software artifacts and it is also the foundation for lifecycle management for SAP HANA contentand for the translation of SAP HANA applications The repository provides the export and import functionsneeded for shipping applications to customers and for transporting development results between SAP HANAsystems

The repository supports concurrent development in teams As the central storage it enables sharing ofdevelopment artifacts with other developers The repository also supports concurrent development withconflict resolution for example by merging conflicting versions

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 19: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 19

SAP HANA catalog SAP HANA native applications persist their content in the SAP HANA repository anddepending on the content type compile artifacts into the runtime catalog

Database schema The SAP HANA database contains a catalog that describes the various elements in thesystem The catalog divides the database into sub-databases known as schema A database schema enablesyou to logically group together objects such as tables views and stored procedures Without a definedschema you cannot write to the catalog

322 Create New Database SchemaNext we create a new database schema in the SAP HANA catalog by adding a new schema definition filehdbschema to the HANA repository This database schema enables you to create and activate applicationartifacts such as tables views and database procedures Without a defined schema database objects cannotbe generated in the SAP HANA catalog upon activation of specific design-time artifacts that are added to theSAP HANA repository

3221 Add File devuserxx_perslisthdbschema to define new Database Schema

Hands-on Tasks13 In the Editorrsquos Content tree select package node Content dev devuserxx perslist data

14 Select context menu item Create File The newly created file is named 0_NewFilejs by default

15 Enter devuserxx_perslisthdbschema as name of the new database schema

NOTE In case the tree node item for a new file loses focus then apply rename function in context menu

16 In the editor tab for file devuserxx_perslisthdbschema enter attribute-value pairschema_name = devuserxx_perslist to define the name of your new database schema

Source Code 2 devuserxx_perslisthdbschema fileschema_name = devuserxx_perslist

NOTE You can also press toolbar button Insert template to add an attribute-value pair for the schemaname

17 The yellow marked editor tab with asterisk before the file name indicates that your locally edited file isnot yet saved and activated in the SAP HANA repository Either press toolbar button Save file or applykeyboard shortcut Ctrl + S to save and activate the new hdbschema file in a single step

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 20: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 20

ResultThe message area reports the successful save and activation of the new database schema

3222 Assign Schema Execution Authorization to Your User as Schema OwnerYou will see the newly activated schema in theSAP HANA catalog however you donrsquot actuallyhave access to this schema yet The activation ofthe schema was done by the repository andconsequently the user SYS_REPO owns theschema This is true of all database objectscreated in this new repository approach

Next you will assign an execution authorization fordatabase schema devuserxx_perslist to yourown user Only then your user has authorization tosee the objects which we are creating in thistutorial inside the SAP HANA catalog

Hands-on Tasks18 In the catalog tree select node item Content dev devuserxx perslist data

devuserxx_perslist

19 In the toolbar press button Assign Execution Authorization As a result the success messageSchema privileges assigned successfully gets displayed in the editorrsquos message view

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 21: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 21

NOTE Optionally access rights for a catalog schema can be defined by a adding a new repository role viahdbrole file and granting it to our user

20 To see the new database schema open the SAP HANA catalog in a new browser tab by pressing toolbar

button More and selecting menu item Catalog

21 In the new browser tab select and expand catalog schema node devuserxx_perslist

ResultYour newley created empty database schema devuserxx_perslist with empty sub-folders FunctionsProcedures Sequences Tables Triggers and Views get displayed in the Catalog tree

323 Define Data Type Person within CDS DocumentIn the past database objects could only be created via SQL directly in the database catalog However thismeant they couldnrsquot be transported via delivery units like all other repository objects As part of SAP HANAnative development we now have tools named Core Data Services (CDS) to create database objects in SAPHANA via a repository representation which generates the catalog objects upon activation

To make up the data-persistence model for our application we define a new model entity Person within a so-called HANA data-persistence object definition file by using the CDS Data Definition Language

Hands-on Tasks22 Open the Editor tab of SAP HANA Web-based Development Workbench

23 In the Editorrsquos repository content tree select package node Content dev devuserxx perslistdata

24 Select context menu item Create File and enter filename mymodelhdbdd The design-time objectdefinition that you create using the CDS-compliant syntax must have the file extension hdbdd

25 Enter Source Code 3 to define the entity person

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 22: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 22

Source Code 3 Data definition file mymodelhdbdd with invalid schema name and namespacenamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

NOTE When running this tutorial on SAP HANA SPS 07 Database Revision 73 (version string1007300389160) using Google Chrome browser you encounter a problem Source Code 3 you copied andpasted from the PDF file to the HANA Web IDE editor tab mymodelhdbdd cannot be activated due to aChrome-specific formatting issue The easiest workaround is to edit save and activate the CDS file in MozillaFirefox browser where no error occurs

26 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Activation fails for two reasons

invalid namespace (1) the name space declared in a data definition file must match the repositorypackage in which the hdbdd-file is located The copied namespace devdevuserxxperslistdatacontains the string devuserxx to be replaced with your own package name eg devuser00

Invalid schema name (2) the schema name also contains the string devuserxx which needs to bereplaced by the correct schema name devuserxx_perslist defined in your hdbdd file

Due to the failed activation of mymodelhdbdd it is displayed with another icon (decorated with black

circle) Successfully activated repository files are displayed with icon

27 To resolve this activation error replace the highlighted strings corresponding to the name of yourown database user

copy Source Code 4 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 23: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 23

Source Code 4 Data definition file mymodelhdbdd with correct namespace and schemanamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

28 Save the mymodelhdbdd file with toolbar button Save file or with keyboard shortcut Ctrl+S

Screenshot 3 Activation of data definition file mymodelhdbdd in SAP HANA repository

ResultThe activation process implies to following functions

Syntax validation of data definition file mymodelhdbdd

Creation of table ltnamespacegtltcontext namegtltentity namegt in our case of tabledevdevuserxxperslistdatamymodelperson in database schema devuserxx_perslist You can openthe catalog of the HANA Web IDE to display both objects

see Screenshot 4 on next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 24: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 24

Screenshot 4 Automatic database table creation in SAP HANA catalog schema on activation of data definition filemymodelhdbdd

NOTE Activation would also fail when the name of the hdbdd file is not the same as the name of the contextIn the example you define the context ldquomymodelrdquo in the CDS document mymodelhdbdd

Core Data Services in a Nutshell

Core Data Services (CDS) enhance SQL to allow defining and consuming semantically rich data modelsnatively in HANA applications thereby improving productivity consumability performance and interoperability

As most databases HANA supports SQL as the standard means to define read and manipulate data On topof that pretty much every consumer technology or toolset introduces higher-level models to add crucialsemantics and ease consumption ndash eg OData EDM models the Semantic Layer in the BI platform JPA andenterprise objects in Java or the business objects frameworks in ABAP Also the River programming modeland RDL follow this pattern

Even though those higher-level models share many commonalities the individual information cannot beshared across stacks This leads to a fragmented environment and a high degree of redundancy andoverhead for application developers and customers To address that we introduce a common set of domain-specific languages (DSL) and services for defining and consuming semantically rich data models as anintegral part of HANA ndash called Core Data Services -- that can hence be leveraged in any consuming stackvariant as depicted in the following illustration

The Core Data Services comprise a family of domain-specific languages (highlighted in the illustration above)which serve as a common core model for all stacks on top

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 25: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 25

Data Definition Language (DDL) to define semantically rich domain data models which can be furtherenriched through Annotations

Query Language (QL) to conveniently and efficiently read data based on data models as well as to defineviews within data models

Data Manipulation Language (DML) to write data

Data Control Language (DCL) to control access to data

Expression Language (EL) to specify calculated fields default values constraints etc within queries aswell as for elements in data models

Core Data Services focus on providing functional services independent of any programming language andlanguage paradigms They dont specify nor make assumptions on how to add application logic and behaviorusing general-purpose programming languages and services of application containers

Further information

SAP HANA Developer Guide 47 Data Persistence Objects in Core Data Services (CDS)

SAP HANA Academy SAP HANA SPS 6 - Whats New Development - Core Data Services by Tom Jung

324 Add Database Sequence File to auto-generate Keys for new Records inPersons Table

Hands-on Tasks29 In the Editorrsquos repository content tree select package Content dev devuserxx perslist data

30 Select context menu item Create File and enter filename pershdbsequence

31 Enter Source Code 5 to define a database sequence and replace the highlighted strings with yourown schemapackage names

Source Code 5 Database sequence file pershdbsequenceschema= devuserxx_persliststart_with= 4maxvalue= 1000000000nomaxvalue=falseminvalue= 4nominvalue=truecycles= falsedepends_on_table= devdevuserxxperslistdatamymodelperson

32 Save the new sequence file

ResultThe pershdbsequence file has been activated and will be used later to generate a serial list of uniquenumbers of person entity IDs

Terminology Sequences

A sequence is a database object that generates an automatically incremented list of unique numbersaccording to the rules defined in the sequence specification

The sequence of numeric values is generated in an ascending or descending order at a defined incrementinterval and the numbers generated by a sequence can be used by applications for example to identify therows and columns of a table to coordinate keys across multiple rows or tables

Further information SAP HANA Developer Guide 44 Creating Sequences

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 26: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 26

325 Load Mock Data from a csv File into Database TableFor sake of simplicity we use a comma-separated-values file to populate the Person table with initial data(initial load) Again this can easily be done by activating a perscsv file together with a special HANAdatabase table import file we add to the sub-package data in the SAP HANA repository (see next section3252) On activation the person table (devdevuserxxperslistdatamymodelperson) gets automaticallyfilled with mock data that is read from the csv file

3251 Add Mock Data File perscsv to new sub-package loads

Hands-on Tasks33 In Editor tab select repository package Content dev devuserxx perslist data

34 Create new sub-package loads with context menu item Create Package

35 Select the newly created package loads and choose menu item Create File

36 Enter perscsv as file name

37 Enter a list of three comma-separated person entries (see Source Code 6)

Source Code 6 perscsv file to import mock data from a list of comma separated values1JohnSmith2LisaGordan3MikeMiller

38 Save the perscsv file

ResultThe perscsv content for preloading later the persons table in the HANA catalog has been saved

3252 Add Table Import Definition File pershdbti

Hands-on Tasks39 Select package loads and choose menu item Create File

40 Enter pershdbti file name to add a new table import definition

41 Enter the import statement from Source Code 7into the pershdbti file and replace the highlightedstrings with your own database user name

Source Code 7 pershdbti file to import table data from csv fileimport = [ table = devdevuserxxperslistdatamymodelperson schema = devuserxx_perslist file = devdevuserxxperslistdataloadsperscsv header = false]

42 Save the new pershdbti file

43 Make sure that the editor returns a success message for activation of the new pershdbti file Otherwisethe automatic data transfer (initial load) from the perscsv file to new records in the Persons databasetable will not be successfully processed

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 27: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 27

ResultThe pershdbti file which connects the preload content perscsv file with the person table has been savedand by activating it the preload content will be inserted into the person table

What happens on Activation of SAP HANA Repository ContentFigure 5 illustrates the generic functions applied by SAP HANA when a developer activates content in theHANA Web IDE Editor On activation of a repository file the file suffix for example hdbdd is used todetermine which runtime plug-in to call during the activation process The plug-in reads the repository fileselected for activation in this case a CDS-compliant entity parses the object descriptions in the file andcreates the appropriate runtime objects

Figure 5 Save and activate XS application Content ndash what happens on SAP HANA Platform side

determine file type by extension we have three files for data definition table import and csv data

validate content content and dependencies of three files needed for the initial load into the person table

create update delete runtime object in HANA catalog person table gets filled with mock data

report result messages to the developer in HANA Web IDE

3253 Test Initial Load of Person Table Data in SAP HANA CatalogThe previously activated table import definition file pershdbti implies the automatic initial load of csv-file datainto the persons table (see Figure 5) To test whether the three initial Person records were successfully loadedinto the Persons table we open the catalog tool of the HANA Web IDE and execute a SELECT statement

Hands-on Tasks44 Open the SAP HANA catalog in a new browser tab by pressing toolbar button More and selecting menu

item Catalog

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 28: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 28

45 In the HANA catalog tree that gets displayed in a new browser tab select the Person table under nodeCatalog devuserxx_perslist Tables devdevuserxxperslistdatamymodelperson

46 Select context menu item ldquoGenerate Select Statementrdquo The HANA Web IDE adds a new editor tab witha SQL SELECT statement to read all records that are stored in the Persons table

47 After successful initial load from the perscsv file in the last step the SQL SELECT should return threerecords To execute the generated SQL STATEMENT press keyboard shortcut F8 or the execute button

in the catalog toolbar

NOTE You can also apply the ldquoOpen Contentrdquo context menu function to generate the SQL statement and toview the result table in one single step (see section 354) For sake of better understanding we apply twoseparate functions at the first time

ResultAs a result the Person table content with three records (loaded before) gets displayed underneath the SQLselect statement

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 29: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 29

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 30: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 30

33 Step 3 Build the Application Backend with SAP HANA ExtendedApplication Services

In the next step we implement the backend logic of the PersonsList application by using SAP HANA extendedapplication services

OData service exposes the Persons table in the SAP HANA database for read and write access bymeans of an OData service that can be consumed by the SAPUI5 application frontend

HANA database procedure SQL Script implementation that is registered as modification exit for anOData CREATE operation (for entity Person)

PreviewFigure 6 Step 3 - application backend part with OData service and HANA database procedure for readwrite logic

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsodata OData descriptor A design-time object that defines an OData servicethat exposes SAP HANA data from a specified endpoint

hdbprocedure Procedure A design-time definition of a database function forperforming complex and data-intensive business logicthat cannot be performed with standard SQL

331 Expose the Person Database Entity by means of OData ServiceSAP HANA extended application services provide a special tool for the creation of OData Services (for web-based data access) without needing to perform server side coding To create an OData service from anexisting HANA table or view we need only define a service definition file with suffix xsodata

Prerequisites

Select privileges must be granted to the table to be exposed with the OData service see section 3222

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 31: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 31

Hands-on Tasks

3311 Add new Sub-Package lsquoservicesrsquo for OData Service DefinitionTo keep repository files together that are related with the applicationrsquos OData services we add them to a newsub-package named services

48 In editor tab select repository package Content dev devuserxx perslist

49 Create new sub-package services with context menu item Create Package

3312 Create a Simple OData Service within OData Descriptor xsodataWe want to define an OData service to expose the persons table by adding a corresponding xsodata servicedescriptor file to the HANA repository The syntax of the XSOData service is relative easy for this use caseWe only need to define hellip

a namespace our package path (your package path)

the name of the SAP HANA table we will base the service from(devdevuserxxperslistdatamymodelperson)

and the name of the OData entity (Persons)

50 Under new sub-package services add new file persxsodata

51 Add the following code to the persxsodata file

Source Code 8 OData service definition file persxsodata for service consumption of entity Personservice devdevuserxxperslistdatamymodelperson as Persons

52 Save the new XSOData service descriptor

ResultOn activation of thepersxsodatarepository file (Figure 7arrow 1) the file suffixxsodata is used todetermine whichruntime plug-in to callduring the activationprocess The plug-inreads the repository fileselected for activationsees the objectdescriptions in the fileand creates theappropriate runtimeobjects in our case thePersons OData serviceproducer in theapplication backend((Figure 7 arrow 2)

Figure 7 OData Service creation based on new OData service definition file insideHANA repository

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 32: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 32

3313 Consume and View the new XS OData Service inside Web BrowserIn the next step we will consume the new Persons OData service by accessing the provided data in a webbrowser using standard HTTP We will hellip

view all resources that are exposed by the Persons OData service by requesting its root URI in a browserclient

learn about the data model used by the Persons OData service by issuing a GET on the services rootURI with $metadata appended to it

query the Persons table data in a browser client To do so we issue a GET request on the correspondingOData service URI

Prerequisites The repository file persxsodata that defines the Persons OData service in the HANA repository is

successfully activated (visualized by icon whereas inactiveinvalid repository files are marked with icon

)

Hands-on Tasks53 Select the xsodata repository file Content dev devuserxx perslist perslist persxsodata

and press toolbar button Run on server (or use keyboard shortcut F8) to call the Persons ODataservice in a new browser tab

The HANA Web IDE passes the root URI of the Persons OData service to a new browser tab andexecutes an http request ((in general httpsltWeb server host namegt80ltSAP HANAinstancegtdevltdev userrsquos package namegtperslistpersxsodata)

The correctly addressed URI returns the list of resources exposed by the Persons OData service In oursimple example it is just a collection of Persons

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 33: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 33

NOTE When requesting the OData based URL in the JSON representation via URL parameter format=jsonhttpperslistservicespersxsodata$format=json the response looks very simple One ldquodatardquoobject (named ldquodrdquo) with a single namevalue pair with the name equal to ldquoEntitySetsrdquo and the value being anarray of Collection names d EntitySets [Persons]

54 Add to the browser URL the following string Persons$format=xml and press the Refresh button (orkeyboard shortcut F5) httpperslistservicespersxsodata$format=json

An example of the response returned for the Persons query is shown below In the screenshot you seethe first Persons record John Smith from all three records that were initially loaded from csv-file into thePersons table on the HANA database

ResultThe Person database entity was successfully exposed as OData service by means of SAP HANA extendedapplications services It can be consumed on application frontend side to list persons in a HTML5 table UI thatis bound to a SAPUI5 OData model as the corresponding OData service consumer

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 34: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 34

332 Implement Application Logic to Write new Records into Persons TableSAP HANA XS enables you to execute custom code at defined points of an OData write request If youprovide a custom exit for an OData write request the code has to be provided in form of an SQLScriptprocedure with signatures that follow specific conventions SAP HANA XS supports two type of write exits forOData write requests

Validation exits for validation of input data and data consistency checks

Modification exits to create update or delete an entry in an OData entry set

3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure

Hands-on Tasks55 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the inner editor tab

for the mymodelhdbdd file In case you closed it before click on the repository content node Contentdev devuserxx perslist data mymodelhdbdd to open the editor tab again

56 Add the highlighted code with new context ldquoproceduresrdquo and new CDS user-defined datatypes persand errors to the CDS data definition file mymodelhdbdd

Source Code 9 New context lsquoproceduresrsquo with CDS-user-defined datatypes pers and errors in CDS DataDefinition File mymodelhdbddnamespace devdevuserxxperslistdataSchema devuserxx_perslist

context mymodel type SString String(60)

CatalogtableType COLUMN

Entity person key ID String(10) element modifier key defines that ID is primary key FIRSTNAME SString LASTNAME SString

context procedures type pers ID String(10) FIRSTNAME SString LASTNAME SString type errors HTTP_STATUS_CODE Integer ERROR_MESSAGE String(100) DETAIL String(100)

57 Save the newly edited data definition file mymodelhdbdd and take care that it gets activatedsuccessfully

ResultThe new datatypes pers and errors can be used as parameter types in SQLScript procedurecreatePersonhdbprocedure that gets implemented in the next hands-on task

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 35: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 35

3322 Implement Modification Exit in SQLScript Procedure to add new Records inPersons Table

Create a new SQLScript procedure that runs as modification exit before the create event in the OData service

Hands-on Tasks58 In editor tab select repository package Content dev devuserxx perslist

59 Create new sub-package procedures with context menu item Create Package

60 Under new sub-package procedures create new file createPersonhdbprocedure

61 Copy Source Code 10 with the procedure logic to insert new records into the Persons table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 36: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 36

Source Code 10 SQLScript Procedure createPersonhdbprocedure to insert table records (via modification exitfor OData service)PROCEDURE devuserxx_perslistdevdevuserxxperslistprocedurescreatePerson ( IN intab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedurespers OUT outtab devuserxx_perslistdevdevuserxxperslistdatamymodelprocedureserrors ) LANGUAGE SQLSCRIPT SQL SECURITY INVOKER AS --DEFAULT SCHEMA ltschemagt --READS SQL DATA ASbegin

declare lv_pers_no stringdeclare lv_firstname stringdeclare lv_lastname string

select ID FIRSTNAME LASTNAME into lv_pers_no lv_firstname lv_lastname from intab

if lv_lastname = then outtab = select 500 as http_status_code Invalid last name || lv_firstname as error_message

No Way Last name field must not be empty as detail from dummyelse insert into devdevuserxxperslistdatamymodelperson values (devdevuserxxperslistdatapersNEXTVAL lv_firstname lv_lastname)end if

end

NOTE Know the code

Fully qualified name of SQLScript procedure createPerson starts with schema namedevuserxx_perslist followed by repository package namedevdevuserxx_perslistprocedures

Reference to fully qualified types pers and error defined in CDS file mymodelhdbd (with mymodel= context name procedures = inner context name see Source Code 10)

Reference to entity devdevuserxxperslistdatamymodelperson defined in CDS filemymodelhdbd

Reference to database sequence devdevuserxxperslistdatapers defined in filepershdbsequence see Source Code 5

62 To replace the corresponding user string devuserxx (that is part of the namespaces and the schema toreference HANA objects in the procedure) make use of search and replace function in the HANA Web IDEas follows

In the editor tab createPersonhdbprocedure proceed as follows

Mark string devuserxx Press keyboard shortcut Ctrl+H so that the search amp replace dialog opens in the upper right corner of

the editor The first input field contains the selected string devuserxx Enter your user-specific package name

eg devuser00 into the second input field Press Aa button to assure case sensitive search

1

1

2

3

4

2

34

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 37: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 37

Press gtgt button to replace all occurrences of the search string devuserxx Close the popup dialog

The table and error type objects you created in the previous steps are used as types in the procedure createdhere The procedure also performs verification on the data and inserts a new row with error information intothe output table (Persons)

63 Save the new SQLScript procedure to activate it

ResultAll strings devuserxx are replaced with correct user names and the HANA database procedurecreatePersonhdbprocedure is activated in the repository

3323 Register a Modification Exit for OData Write RequestsRegister the new SQLScript procedure createPersonhdbprocedure in the OData service persxsodata tobe executed at the CREATE event

Hands-on Tasks64 Open the persxsodata file in the editor and use the create using keywords to register the new HANA

database procedure as illustrated with the new line create using hellip in the OData service file

Source Code 11 Add modification exit to call SQLScript procedure createPersonhdbprocedure in OData serviceservice devdevuserxxperslistdatamymodelperson as Persons create using devdevuserxxperslistprocedurescreatePerson

65 Remove the semi-colon at the end of the existing code line the service definition file

66 Then copy the bold marked line create using hellip and paste into the persxsodata file before the closingcurly bracket

67 In the new codeline replace devuserxx with your user name

68 Save persxsodata so that it is activated with the additional code line

ResultBy this the OData service can invoke the HANA database procedure createPersonhdbprocedure duringthe CREATE event

333 View the Application Backend in SAP HANA Catalog

Hands-on Tasks69 Select the already opened Catalog browser tab If not press toolbar button More and select menu item

add this code line

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 38: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 38

Catalog

70 The HANA catalog tree gets displayed in a new browser tab Under tree node Catalog gtdevuserxx_perslist (= new database schema where the runtime artifacts of your PersonsList applicationreside) for expand the three sub-nodes Procedures Sequences and Tables

ResultIn database schema devuserxx_perslist you see the SAP HANA runtime artifacts that were automaticallyadded to the SAP HANA catalog based on the corresponding design-time artifacts you added before in theSAP HANA repository (see table on next page)

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 39: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 39

Repository content Catalog content

Schema definition filedevdevuserxxperslistdatadevuserxx_perslisthdbschema devuserxx_perslist

CDS-based data definition filedevdevuserxxperslistdatamymodelhdbdd

devuserxx_perslistTablesdevdevuserxxperslistdatamymodelperson

Sequence definition filedevdevuserxxperslistdatapershdbsequence

devuserxx_perslistSequencesdevdevuserxxperslistdatapersonsSeq

SAP HANA database procedure filedevdevuserxxperslistprocedurescreatePersonhdbprocedure

devuserxx_perslistTablesdevdevuserxxperslistprocedurescreatePerson

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 40: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 40

34 Step 4 Build the Application Frontend with SAPUI5After having fully implemented the application backend you build the application frontend on top by using theUI development toolkit for HTML5 (aka SAPUI5)

PreviewFigure 8 Step 4 - application frontend part with SAPUI5 view UI controller and OData consumption

Design-Time Application Artifacts Created in this StepFile extension Object Description

indexhtml SAPUI5 application entrypage

HTML file containing bootstrap script (to load SAPUI5 libraries andtheme at the client) application script (to load the applicationrsquos viewlayout and controller logic) and html body (to embed views)

viewjs SAPUI5 JavaScript view(JSView)

A SAPUI5 view flavor that allows you to use JavaScript (JS) codeto construct a view

controllerjs SAPUI5 JavaScriptcontroller

A SAPUI5 application unit containing the active part of theapplication It is the logical interface between a model and a viewcorresponding to the model view controller (MVC) concept Acontroller reacts to view events and user interaction by modifyingview and model

341 Create Package Structure for SAPUI5 Application Content

Hands-on Tasks71 In editor tab select repository package Content dev devuserxx perslist

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 41: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 41

72 Create new sub-packages ui perslist-web and views by choosing context menu item Create Package

73 Enter uiperslist-webviews and press RETURN

ResultThe SAPUI5 application sources that are implemented in thenext step can be added to the newly created subfoldersuiperslist-web (for indexhmtl) and uiperslist-webviews(for viewjs and controllerjs)

342 Design and Implement Application UI in SAPUI5 JavaScriptView

Prototype a User InterfaceBefore we implement the new JavaScriptView in SAPUI5 letrsquos first have a look at the simple user interfacewith its control tree

Figure 9 User interface sketch diagram with Persons entry form and table control

User Interaction Should Look Like This1 User enters a persons first name and last name in the TextEdit controls with the TableToolbar

2 User then clicks the Add Person Button (the persons data is submitted to the controller which adds it tothe OData model) in the TableToolbar

3 Entered person name is taken from the model and displayed in a table control

Further information SAPUI5 Demo Kit - Control Gallery

Hands-on Tasks74 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

75 Enter new file name perslistviewjs (UI5 JavaScriptView for the view layout implementation)

76 Copy Source Code 12 into the perslistviewjs editor

copy Source Code 12 from next page hellip

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 42: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 42

Source Code 12 SAPUI5 application UI implemented in JavaScriptView file perslistviewjssapuijsview(viewsperslist

oFirstNameField null oLastNameField null

getControllerName function() return viewsperslist

createContent function(oController) Create an instance of the table controlvar oTable = new sapuitableTable( title Persons List visibleRowCount 6

firstVisibleRow 3 selectionMode sapuitableSelectionModeSingle )

add TableToolbarvar oTableToolbar = new sapuicommonsToolbar()

add first name fieldvar oFirstNameLabel = new sapuicommonsLabel( text First Name )thisoFirstNameField = new sapuicommonsTextField( id firstNameFieldId value

width 10em ) oFirstNameLabelsetLabelFor(thisoFirstNameField) oTableToolbaraddItem(oFirstNameLabel) oTableToolbaraddItem(thisoFirstNameField)

add last name fieldvar oLastNameLabel = new sapuicommonsLabel( text Last Name )thisoLastNameField = new sapuicommonsTextField( id lastNameFieldId value

width 10em ) oLastNameLabelsetLabelFor(thisoLastNameField) oTableToolbaraddItem(oLastNameLabel) oTableToolbaraddItem(thisoLastNameField)

add buttonvar oAddPersonButton = new sapuicommonsButton( id addPersonButtonId

text Add Person press function() oControlleraddNewPerson() ) oTableToolbaraddItem(oAddPersonButton) oTablesetToolbar(oTableToolbar)

define the columns and the control templates to be used oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text First Name ) template new sapuicommonsTextView()bindProperty(text FIRSTNAME) sortProperty FIRSTNAME filterProperty FIRSTNAME width 100px )) oTableaddColumn(new sapuitableColumn( label new sapuicommonsLabel( text Last Name ) template new sapuicommonsTextView()bindProperty(text LASTNAME) sortProperty LASTNAME filterProperty LASTNAME width 200px ))

bind table rows to Persons based on the model defined in the init method of the controller (aggregation binding)

oTablebindRows(Persons)

return oTable

getFirstNameField function() return thisoFirstNameField

getLastNameField function() return thisoLastNameField

)

2

1

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 43: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 43

NOTE Know the codeProperty binding add new Column control to the table and bind the TextView control property textto the OData model property FIRSTNAME

Aggregation binding aggregation binding is used to bind a collection of table rows with data from theOData model to the table The absolute binding path Persons points to the entity set with namePersons defined in our XSOData service The binding paths in an OData model reflect the structure ofthe OData service as exposed through the $metadata of the service

NOTE How to Format Code within HANA Web IDE

After you copied the file into the created perslistviewjs editor of the HANA Web IDE content is notformatted because copied pdf-content in general cannot do this To format source code inside the HANA Web

IDE press button ldquoFormat coderdquo in the toolbar

INFO The ldquoFormat coderdquo feature of the HANA Web IDE so far only works for js xsjs and xsjslib(where the last two file types are not explained in the tutorial)

77 Save the perslistviewjs file with Ctrl+S or toolbar button Save to activate it

ResultThe SAPUI5 JSView perslistviewjs defining the UI controls of the PersonsList application has beencreated

Further information

SAPUI5 Demo Kit - Control Gallery - Application Header Table Example (apply ldquoShow Source Coderdquofunction and SAPUI5 Demo Kit - Control Gallery ndash Introduction to Data Binding

343 Create SAPUI5 View Controller with SAPUI5 OData Model

Hands-on Tasks78 Select package devdevuserxxuiperslist-webviews and choose context menu item Create File

79 Enter new file name perslistcontrollerjs (view controller logic implemented in JavaScript)

1

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 44: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 44

80 Copy Source Code 13 into the perslistcontrollerjs editor

Source Code 13 SAPUI5 view controller JS file to call OData service exposed by persxsodata filesapuicontroller(viewsperslist

onInit function() var sOrigin = windowlocationprotocol + + windowlocationhostname

+ (windowlocationport + windowlocationport )var persListOdataServiceUrl = sOrigin

+ devdevuserxxperslistservicespersxsodatavar odataModel = new sapuimodelodataODataModel(persListOdataServiceUrl)thisgetView()setModel(odataModel)

addNewPerson function() var firstName = thisgetView()getFirstNameField()getValue()var lastName = thisgetView()getLastNameField()getValue()

var persons = personsID = 1 personsFIRSTNAME = firstName personsLASTNAME = lastName

thisgetView()getModel() create(Persons persons null thissuccessMsg thiserrorMsg)

successMsg function() sapuicommonsMessageBoxalert(Person entity has been successfully created)

errorMsg function() sapuicommonsMessageBoxalert(Error occured when creating person entity)

onAfterRendering function() thisgetView()getFirstNameField()focus()

)

NOTE Know the code

Generate absolute URL of OData service persxsodata added in section 331 Expose the PersonDatabase Entity by means of OData Service

OData model instance creation to use data binding in a SAPUI5 applications we instantiate the ODatamodel first The constructor takes the URL of the model data or the data itself as the first parameter

OData model instance assignment to view controller viewsperslist for data binding in the viewrsquosUI elements

OData model write access to create a new Person records

After rendering of the view layout the initial focus is set to the first input field so that the user can starttyping

81 Replace string devuserxx with your own package name

82 Save the perslistcontrollerjs file with Ctrl+S or toolbar button Save

ResultThe SAPUI5 controller perslistcontrollerjs has been created and enables the control logic between the clientside SAPUI5 OData model and the HANA backend according to some UI interaction (button click)

Further information

SAPUI5 SAPUI5 Demo Kit - Developer Guide - The Model-View-Controller Approach

SAPUI5 Demo Kit - Developer Guide - OData Model

1

12

2

3

3

4

4

5

5

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 45: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 45

344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content

Hands-on Tasks83 We reuse the indexhtml file of our initially created blank HANA XS application to define the entry point

for our SAPUI5 PersonsList application UI

84 Select the indexhtml file under package devdevuserxxperslist and move it to the package locationdevdevuserxxperslistuiperslist-web using drag amp drop

85 After the drag amp drop the indexhtml editor is opened In the editor tab remove the entire content andreplace it with Source Code 14

Source Code 14 indexhtml with SAPUI5 application bootstrap and html contentltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

4

1

3

2

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 46: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 46

NOTE Know the codeBootstrap script SAPUI5 is implemented in JavaScript so for loading the SAPUI5 runtime library sap-ui-corejs from SAP HANA repository folder sapui51resources at the client its bootstrap justneeds to be included with a ltscriptgt tag The last two attributes select the visual design to apply initiallyand the UI control librarylibraries to use

Application script SAPUI5 is based on the MVC paradigm To create view and controller the SAPUI5runtime first needs to know where to load the related resources (here in relative subfolder views)The newly created instance of the perslist view in sub-folder views is then placed (like a control) into aHTML element with id content SAPUI5 knows different view types (JS XML and JSON) here the JS(JavaScript) view type is used

Html body The HTML element with ID content where the view was placed at (in application script)must exist somewhere in the HTML page So we add a corresponding ltdivgt block with id=contentinto the HTML body The same applies to the ApplicationHeader control that is placed at the secondltdivgt block with id=header The ltbodygt attribute class=sapUIBody defines the SAPUI5 CSSclass to be used so the page background and some other styles are properly set Attributerole=application set the WAI-ARIA landmark role

86 Save indexhtml to activate it

ResultThe SAP HANA native PersonsList application is now fully implemented and can be launched and tested in anew browser tab

Further information

SAPUI5 Demo Kit - Developer Guide - SAPUI5 HelloWorld

SAPUI5 Demo Kit - Developer Guide - Bootstrapping

1

2

4

3

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 47: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 47

35 Run and Test the Final PersonsList Application

351 Recap Anatomy of the Whole PersonsList ApplicationFigure 10 Anatomy of the whole PersonsList application implemented with SAP HANA extended applicationservices

352 Run PersonsList Application on SAP HANA XS Server

Hands-on Tasks87 In editor tab select repository package Content dev devuserxx perslist ui perslist-web

indexhtml

88 To run the application frontend in a new browser tab press toolbar button ldquoRun on server (F8)rdquo

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 48: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 48

ResultThe PersonsList application frontend is launched in a new browser tab The ldquoFirst Namerdquo input field is alreadyfocused for user input and the ldquoPerson Listrdquo table displays three records that were fetched from the applicationbackend via XSOData service

353 Test PersonsList Application in Web BrowserTo test the XSOData write access we enter first and last name of a new Person named Linda Clark into theform fields and then press the Add Person button

Hands-on Tasks89 Enter first name Linda into the first input field that is already focused on application startup

90 Press the right arrow keyboard button to move focus to the next input field lsquoLast Namersquo

NOTE Inside a SAPUI5 form (or container) you move focus with keyboard arrow buttons (right arrowkeyboard button for next form field or left arrow keyboard button for previous form field) but not with the TABbutton The TAB keyboard button is used to move focus between container controls (like from the form in thetable toolbar to the embedding table)

91 Enter Clark in the second input field ldquoLast Namerdquo and press the right arrow keyboard button to select theAdd ldquoPerson Buttonrdquo

92 Press form button ldquoAdd Personrdquo to send the new person record to the application backend

93 In the popup dialog press Ok button to confirmation the success message about the creation of a newPerson entity

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 49: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 49

Result

After pressing the ldquoAdd Personrdquo button (1) the entered person form data is sent to the backend via ODataservice The success message ldquoPerson entity has been successfully createdrdquo is displayed in a popup dialogAfter popup dialog confirmation the new record ldquoLinda Clarkrdquo occurs as new line inside the Persons List table(3)

354 Check OData Write Access in SAP HANA DatabaseFinally we move to the SAP HANA catalog on backend side and look at the new entry for ldquoLinda Clarkrdquo in thePersons database table

Hands-on Tasks94 Open SAP HANA catalog

95 Select node Catalog devuserxx_perslist Tablesdevdevuserxxperslistdatamymodelperson

96 Select context menu item Open Content

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 50: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 50

ResultAn auto-generated SQL SELECT statement to read all records from tabledevuserxx_perslistdevdevuserxxperslistdatamymodelperson gets executed The new record forperson ldquoLinda Clarkrdquo gets displayed as last entry in the result table

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 51: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 51

36 1 Extension Writing Server-Side JavaScript Code

Beside the data access via OData we used in chapter 331 to access the person table data SAP HANA XSoffers a second consumption model ie server-side application programming in JavaScript to extract datafrom SAP HANA

You will now extend your HANA XS PersonsList application with a small example of such a server-sideJavaScript (see below Start Hands-on 1 Extension) The added serverlogicxsjs file contains the functiongetUserName() to retrieve the session user This serverlogicxsjs is called from a script section inindexhtml to display the result ie the logged on user name as welcome message in the application header

PreviewFigure 11 1 Extension ndash Calling a server side XSJS service from SAPUI5 client by using JavaScript and jQuery

Further information

For more details on SAP HANA XS server-side application programming in JavaScript read

SAP HANA Developer Guide 8 Writing Server-Side JavaScript Code

Design-Time Application Artifacts Created in this StepFile extension Object Description

xsjs Server-Side JavaScript Code A file containing JavaScript code that can run in SAPHANA Extended Application Services and that can beaccessed via URL

Prerequisites

You have already successfully executed the PersonsList HANA XS application The PersonsListapplication is running and works as described in chapter 35

Done by SAP HANA system administrator To use the debugging functions of the HANA Web IDE thesection debugger with the parameter enabled and the value true must be added to the filexsengineini in the SAP HANA studio administration perspective see

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 52: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 52

Screenshot 5 SAP HANA system administrator enables the debugger in xsengineini configuration

Further information

SAP HANA Administration Guides gt 23 Configuring SAP HANA System Properties

SAP HANA Developer Guide gt 89 Debugging Server-Side JavaScript

361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs

Hands-on TasksNow we define a server-side JavaScript service to expose the name of the user which is logged on thePersonsList application For that you will add a corresponding xsjs service descriptor file to the HANArepository

97 Under the package services add a new file serverlogicxsjs

98 Add the following code to the serverlogicxsjs file

Source Code 15 Server-side JavaScript service definition file serverlogicxsjs for retrieving the session user namefunction getUsername() var username = $sessiongetUsername() return usernamevar result = getUsername()$responsesetBody(result)

99 Save the new XSJS service descriptor to activate it

362 Add XSJS Service to Your PersonsList Web ApplicationNow you will use now the XSJS service that was previously implemented in the PersonsList application todisplay the name of the logged on user in the application header

100 In the Editor browser tab (of SAP HANA Web-based Development Workbench) select the file Content dev devuserxx perslist ui perslist-web indexhtml to open the corresponding editor

tab Add the highlighted code from next page to the indexhtml

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 53: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 53

Source Code 16 indexhtml with the included xsjs service to display the logged on user in the application headerltDOCTYPE HTMLgtlthtmlgtltheadgtltmeta http-equiv=X-UA-Compatible content=IE=edgegtlttitlegtSAP HANA Platform E2E Dev Scenario SAP HANA native PersonsList applicationlttitlegtltscript src=sapui51resourcessap-ui-corejs id=sap-ui-bootstrapdata-sap-ui-libs=sapuicommons sapuitablesapuiux3data-sap-ui-theme=sap_bluecrystalgt

ltscriptgt

ltscriptgt sapuilocalResources(views)

var oAppHeader = new sapuicommonsApplicationHeader(appHeader) oAppHeadersetLogoSrc(httpwwwsapcomglobalimagesSAPLogogif) oAppHeadersetLogoText(SAP HANA Platform e2e scenario + PersonsList application in SAP HANA XS) oAppHeadersetDisplayWelcome(false) oAppHeadersetDisplayLogoff(false) oAppHeaderplaceAt(header)

var view = sapuiview( id perslist-id viewName viewsperslist type sapuicoremvcViewTypeJS ) viewplaceAt(content)ltscriptgt

ltscriptgt jQuery( document )ready(function() jQueryget(servicesserverlogicxsjsfunction(result) var oAppHeader = sapuigetCore()byId(appHeader) oAppHeadersetDisplayWelcome(true) oAppHeadersetUserName(result) ) )ltscriptgt

ltheadgtltbody class=sapUiBody role=applicationgt ltdiv id=headergtltdivgt ltdiv id=contentgtltdivgtltbodygtlthtmlgt

NOTE Know the code ndash How to call a server side XSJS service from a SAPUI5 application frontend

SAPUI5 heavily uses jQuery and the default flavor of SAPUI5 (the sap-ui-corejs bootstrap script) evenincludes jQuery We can therefore directly call the jQuery-API in our SAPUI5 indexhtml file to get the loggedin user name as a result of our server side XSJS service

jQuery( document )ready(function() hellip ) run code as soon as the document is ready to bemanipulated Read more details here hellip

jQueryget( xsjsServiceUrl function(result) hellip ) call server side XSJS service via relativeURL ldquoservicesserverlogicxsjsrdquo and pass the result to a client side callback function (in ourcase an anonymous function) Read more details here hellip

oAppHeadersetUserName(result) in the anonymous callback function we set the lsquouser namersquo propertyof the ApplicationHeader UI5 control to the result value that was returned from the XSJS service

The $ sign is an alias for the jQuery object that is commonly used for jQuery source code like $( document)ready() or $get()

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 54: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 54

101 Save indexhtml to activate it

102 Run indexhtml as described in section 312 Run Blank SAP HANA XS Application in Web Browser

ResultThe PersonsList application frontend is launched in a new browser tab The user ID of the logged on user isdisplayed in the application header

363 Debugging of HANA XS Server-Side JavaScript CodeAs it is quite handy to debug HANA XS server-side JavaScript code we quickly demonstrate how easy it is todebug xsjs code

Hands-on Tasks103 In the Editor browser tab select the file Content dev devuserxx perslist services

serverlogicxsjs to open the corresponding editor tab

104 Click in front of a code line to set a break point eg before line ldquovar result = getUsername()rdquo

105 Then select the indexhtml and run the application by choosing the green run icon from the toolbar

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 55: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 55

ResultThe PersonsList application opens but the user ID is not displayed in the application header because thedebugger stopped at the breakpoint you set and therefore the application is waiting for that part

106 Switch back to the HANA Web IDE Editor to see the XSJS debugger stopping at the before definedbreakpoint

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 56: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 56

107 Use the Step in (F6) toolbar icon of the XSJS debugger to step into the getUsername() function

108 Inside the getUsername() method you can now eg call the Evaluate expression window by clicking thecorresponding toolbar icon as shown in the above screenshot In the popup window you can enter anexpression to be evaluated (eg example the $sessiongetUsername()) When you click Evaluatethe result is displayed as shown above

109 Close the ldquoEvaluate expressionrdquo window and click Resume (F10) to finish the debugger session

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 57: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 57

110 Switch to the PersonsList and see that the user ID is correctly displayed in the application header

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 58: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 58

4 GlossaryNOTE To ease reading we use short terms according to the following table

Term Short term Description

Database user DB user User (with name and password) for login to a SAPHANA database Needed for login to SAP HANAWeb-based Development Workbench

Example DEV_USER_00Placeholder in tutorial (eg for package name)devuserxx

SAP Community Network SCN SAPs professional social network for SAPcustomers partners employees and experts whichoffers insight and content about SAP solutions andservices in a collaborative environmenthttpscnsapcom To use SAP HANA CloudPlatform you have to be registered on SCN

SAP HANA catalog HANA catalog SAP HANA native applications persist their contentin the HANA repository and depending on thecontent type compile artifacts into the runtimecatalog

SAP HANA extended applicationservices

HANA XS A small-footprint application server web serverand basis (with configurable OData support server-side JS execution and full access to SQL andSQLScript) for application development integratedinto SAP HANA

SAP HANA native application HANA nativeapplication

Applications that use SAP HANA extendedapplication services integrated into SAP HANA

SAP HANA repository HANA repository Integral part of the SAP HANA system anddevelopment infrastructure that is used for centralstorage versioning and lifecycle management ofsoftware artifacts

SAP HANA Web-basedDevelopment Workbench

HANA Web IDE Tools that enable access to and development ofrepository and catalog objects from a remotelocation for example using a Web browser

UI development toolkit for HTML5 SAPUI5 SAPs enterprise-ready HTML5 rendering library forclient-side UI rendering and programming

Read more

SAP HANA Platform help documentation Developer Guide

131 Developing SAP HANA native Applications

38 Design-Time Application Artifacts

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)
Page 59: › kmuuid2 › 40371b91-7e95-3110-e29a... · Develop Your First SAP HANA Native Application on SAP HANA Platform …2019-11-12 · Develop Your First SAP HANA Native Application

Develop Your First SAP HANA Native Application on SAP HANA Platform within SAP HANA Web-based Development Workbench

SAP HANA Platform End-to-End-Development Scenarios | requires access to on premise SAP HANA system 59

5 Related ContentNOTE Resources marked with symbol are directly related with topics that are covered in this tutorial SAPHANA native application development on SAP HANA Platform using the SAP HANA Web-based DevelopmentWorkbench

51 SAP HANA Extended Application ServicesSAP HANA Developer Center in SAP Community Network

SAP HANA web site Find out about the latest news updates upcoming events exclusive VIP accessand learn more about SAP HANA through the expertise of SAP employees customers and partners

SAP HANA Academy engage with SAP HANA through hours of free videos and projects

SAP HANA Platform help documentation

openSAP online course (free) access full course material on ldquoIntroduction to Software Development onSAP HANArdquo

SAP Help SAP HANA Developer Guide gt 3 Setting up Your Application gt 39 Developing Applicationsin Web-based Environments

httpwwwsaphanacomdocsDOC-4372 in this video Thomas Jung SAP AG illustrates the Web-based Development Workbench released with SAP HANA SPS7 1233 min Dec 2013

SCN blog 8 Easy Steps to Develop an XS application on the SAP HANA Cloud Platform by StoyanManchev Oct 2013

SCN blog ldquoHANA XS development with the SPS07 Web IDE (focus on debugging)rdquo by Kai-ChristophMueller Nov 2013

52 UI Development Toolkit for HTML5 (aka SAPUI5)UI Development Toolkit for HTML5 Developer Center SCN space for SAPUI5

SAPUI5 SDK Demo Kit with developer guide documentation controlAPI reference and Test Suite

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) SCN doc Bertram Ganz SAP AGOctober 2012

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises SCN tutorial on how to build SAP-Fiori like UIswith SAPUI5 in 10 exercises SAP AG January 2014

  • Table of Contents
  • 1 Introduction
    • 11 What Do You Get Here
    • 12 Intended Audience
    • 13 Applicable Releases
    • 14 End-2-End Development Scenario Overview
    • 15 Development Steps in the Corresponding HANA Layers
    • 16 How to Run this Tutorial
      • 2 Prerequisites of Web-based Development Developer Roles
        • 21 Get a Database User with the Required Roles for the HANA Web IDE
        • 22 Start SAP HANA Web-based Development Workbench and Change Initial Password
          • 221 Remember Your Database User Data
              • 3 Build a Simple SAP HANA Native PersonsList Application
                • 31 Step 1 Create new SAP HANA native Application within Web IDE
                  • 311 Create blank SAP HANA XS Application
                  • 312 Run Blank SAP HANA XS Application in Web Browser
                    • 3121 Application Descriptor xsapp
                    • 3122 Application Access File xsaccess
                    • 3123 Application Privilege File xsprivileges [not covered in this tutorial]
                        • 32 Step 2 Set up the Persistence Model in SAP HANA Database
                          • 321 Create Sub-Package data
                          • 322 Create New Database Schema
                            • 3221 Add File devuserxx_perslisthdbschema to define new Database Schema
                            • 3222 Assign Schema Execution Authorization to Your User as Schema Owner
                              • 323 Define Data Type Person within CDS Document
                              • 324 Add Database Sequence File to auto-generate Keys for new Records in Persons Table
                              • 325 Load Mock Data from a csv File into Database Table
                                • 3251 Add Mock Data File perscsv to new sub-package loads
                                • 3252 Add Table Import Definition File pershdbti
                                • 3253 Test Initial Load of Person Table Data in SAP HANA Catalog
                                    • 33 Step 3 Build the Application Backend with SAP HANA Extended Application Services
                                      • 331 Expose the Person Database Entity by means of OData Service
                                        • 3311 Add new Sub-Package lsquoservicesrsquo for OData Service Definition
                                        • 3312 Create a Simple OData Service within OData Descriptor xsodata
                                        • 3313 Consume and View the new XS OData Service inside Web Browser
                                          • 332 Implement Application Logic to Write new Records into Persons Table
                                            • 3321 Add CDS User-Defined Datatypes to be used in SQLScript Procedure
                                            • 3322 Implement Modification Exit in SQLScript Procedure to add new Records in Persons Table
                                            • 3323 Register a Modification Exit for OData Write Requests
                                              • 333 View the Application Backend in SAP HANA Catalog
                                                • 34 Step 4 Build the Application Frontend with SAPUI5
                                                  • 341 Create Package Structure for SAPUI5 Application Content
                                                  • 342 Design and Implement Application UI in SAPUI5 JavaScriptView
                                                  • 343 Create SAPUI5 View Controller with SAPUI5 OData Model
                                                  • 344 Implement indexhtml file with the SAPUI5 Application Bootstrap and Content
                                                    • 35 Run and Test the Final PersonsList Application
                                                      • 351 Recap Anatomy of the Whole PersonsList Application
                                                      • 352 Run PersonsList Application on SAP HANA XS Server
                                                      • 353 Test PersonsList Application in Web Browser
                                                      • 354 Check OData Write Access in SAP HANA Database
                                                        • 36 1 Extension Writing Server-Side JavaScript Code
                                                          • 361 Create a Simple Server-Side JavaScript Service within Descriptor xsjs
                                                          • 362 Add XSJS Service to Your PersonsList Web Application
                                                          • 363 Debugging of HANA XS Server-Side JavaScript Code
                                                              • 4 Glossary
                                                              • 5 Related Content
                                                                • 51 SAP HANA Extended Application Services
                                                                • 52 UI Development Toolkit for HTML5 (aka SAPUI5)