openSAPIntroduction to Software Development on SAPHANA

WEEK 4, UNIT 1

00:00:13 Welcome to week four of introduction to software development on SAP HANA. In thisweek, we’ll focus on building services using the built-in OData generation framework, andalso how we can consume those services from the user interface.

00:00:31 So we’ll actually see a mixture of layers. We’ll introduce the user interface technology andgo through it just enough so once we generate some services we’ll immediately be able toconsume those in the user interface.

00:00:44 Now starting of week four, in unit one we’ll discuss the architecture of both exposing andconsuming data from SAP HANA. So maybe it helps to look at the traditional SAParchitecture so we can compare and contrast that to the architecture that we have withSAP HANA.

00:01:08 In the traditional architecture, both the NetWeaver Java and NetWeaver ABAParchitecture, although what we show in the slide is primarily the ABAP architecture, youhave the traditional three-tiered approach to scalability where you have the database layer,the application server layer, and a client layer.

00:01:29 Now in this scenario we didn’t do much down in the database so we tended to treat thedatabase as just a data storage - a bucket, if you will. We didn’t do stored procedures inthe database. We didn’t take advantage of any particular database-specific functionality.

00:01:50 We would have SQL statements of course, but ABAP developers tended not to use muchin the way of advanced SQL capabilities. A tendency not to use JOINs and SELECT sumsand instead bring large amounts of data back to the application server and loop over it atthe application server level.

00:02:10 Because that’s where all of our business logic was contained, and even in the ABAP worldthey have a data dictionary layer at the application server as well, which applies additionalsemantics on top of the data, requiring most of this data to be brought back to theapplication server layer.

00:02:25 Now this application server layer, in addition to having been very large because it had tobuffer a lot of data, needed most of the CPU, meaning that we did most of our scalability atthe application server layer by either adding more or larger application servers.

00:02:44 In this approach, we also did most of our UI rendering on the server side as well. We hadthis and we had something we call the SAP GUI as our client on our client device on thedesktop and we use proprietary communication protocols to send data down to that SAPGUI device.

00:03:04 But most of the user interface rendering had to be done on the server and all user interfaceevents had to be sent back to the server for processing. This created a situation where theapplication server was very large. It was the focus of the programming model and it wasreally the focus of system administrators and developers who spent most of their time

This document contains a transcript of an openSAP video lecture. It is provided withoutclaim of reliability. If in doubt, refer to the original recording on open.sap.com.

Page 2 Copyright/Trademark

working at this application server layer.

00:03:30 Now we compare that to the SAP HANA architecture, particularly the HANA architecturewhen we are using native application development, meaning HANA Extended ApplicationServices, as we talked about back in week one.

00:03:44 And just a little refresher about how the HANA Extended Application Services architectureworks. In this situation, the application server is shrunk down, meaning the XS reallystands for “extra small” and it runs inside the database itself.

00:04:03 And this means we can better take advantage of specific database features that we areable to use more code pushdown so we are able to put more data-intensive logic deeplydown inside the database itself. And we will leverage database-specific features here.

00:04:20 We want to re-write some of our business logic in the form of SQLScript procedures, aswe’ve seen in previous weeks. And if we do that, if we write most of our business logicdown in the database layer, then that doesn’t leave much for the application server to needto do.

00:04:36 Because we’ve also taken all of the UI rendering and we’ve moved it out to the client. Asclient devices have gotten more powerful, even phones and tablets we can do thecomplete UI rendering even on the client side. And this follows with the paradigm ofcreating HTML5-based applications.

00:04:54 So we’ll heavily write HTML and JavaScript and we’ll send those HTML and JavaScriptfiles down the client side with the complete UI rendering, and all the user interface eventswill be taken care of on the client side. That leaves a minimal role for this application serverlayer and that primarily is to service enable the business logic and data that exist down inthe lowest layers of the database.

00:05:20 That’s probably the most important function that the XS application server layer serves. Inaddition to being the Web server, it has the ability to do some procedural logic. But theservice enablement is really key. That’s how we can expose the data to the user interface,and when events in the user interface need additional data or need to process some logicon the server side, they’ll call these REST-based services that are exposed by the XSservices layer.

00:05:51 Now in this week, we will see one approach for creating these REST-based services, butwe’ll also see how the user interface running completely on the client side can interact andconsume those services. Now just a little bit more about the architecture, what’s going oninside HANA when we have this sort of communication.

00:06:13 So of course the client device—whether that’s laptop, PC, mobile device of any sort—it’smaking an HTTP connection to the HANA server. So Web browser or any other clientdevice that can communicate with HTTP or HTTPS, secure HTTP, can communicate toHANA.

00:06:35 And when that communication comes into the HANA server and inside the HANA server,we have three processes involved at the operating system level. The first process is calledthe ICM, which stands for Internet Communication Manager. And this is the Web serveritself.

00:06:53 Those of you who already may be familiar with some of SAP’s classical architecture, youmay recognize the ICM. The ICM is actually the Web server that we use in the NetWeaverABAP and the NetWeaver Java environment. So it’s an application server that’s beenaround for a number of years, already has a lot of robust capabilities, and is well-suited tothe kinds of communication with the rest of the processes that we have here.

00:07:19 So we have this Web server and then the Web server communicates to the XS Engineprocess. So this is the application server of HANA so it’s just another process to the

Page 3 Copyright/Trademark

operating system level and it has special connectivity to this ICM process. Now at thelowest level inside of HANA, we have the index server process.

00:07:43 The index server is if you would think of HANA the database itself and you had to classify itdown to one operating system process, the index server would be the most important ofthose operating system processes. It’s the main core of HANA, of the database itself.

00:08:00 And when we talk about the Iin-memory store where all the database data is stored inmemory, at the operating system level that memory is allocated to this index serverprocess so you see how it’s so central to what is HANA itself.

00:08:16 Now the XS Engine process is actually an extended type of index server, and that meansthat the XS Engine process actually thinks it’s an index server. It knows how the indexserver works because it really is just a—we’ve taken the index server and added morefunctionality to it.

00:08:35 And because of that, the HANA Extended Application Services has capabilities that noother application server would have. It understands the HANA native data types. Itunderstands how the index server processes SQL statements. So the XS Engine canactually pre-process the SQL statements before it passes them over to the index server.

00:08:56 And because of this close relationship, in the future we’ll be able to do more advancedcapabilities such as the XS Engine being able to have shared memory semaphores withthe index server so data doesn’t have to be copied inner process at the operating systemlevel.

00:09:14 But even today where we have to move data between the index server and the XS Engineprocess, it’s very efficient. This is an inner-process communication at the operating systemlevel and we’re able to use our internal HANA APIs. Therefore, we don’t have to transformthe data to other data types.

00:09:32 It doesn’t have to go through some process of preparing the data for moving it, and itdoesn’t necessarily have to move across the network either, so this is part of the technicaladvantages of the HANA Extended Application Services. This hopefully gives you someidea of the base architecture that we’ll be working with.

00:09:55 Of course, as an application developer you don’t necessarily know which process doeswhat, but I think it helps to have this fundamental understanding and then in the followingunits in this week, we’ll look at the development processes of how we create a REST-based service in the XS Engine that’s exposed by the ICM and we’ll see how the clientdevice consumes that service.

Page 4 Copyright/Trademark

WEEK 4, UNIT 2

00:00:13 This is week four, unit two, SAPUI5. Now although this week is centered on exposing andconsuming services, before we really get into creating the services and then consumingthem I think it makes sense to take a few minutes and expose the user interfacetechnology itself independent on how we’re going to use it or how we use it to consumeservices.

00:00:39 It’ll give us a nice foundation that when we have created our services we’ll be ready toimmediately consume those in the user interface. Therefore, in this unit we’ll look atSAPUI5, which is SAP’s UI development kit for building HTML5–based applications. Now Ishould stress that SAP does not require you to develop in SAPUI5.

00:01:03 SAP HANA native application development is really open to allow you to use any client-side JavaScript rendering or any UI technology that can consume REST-based services.Sometimes inside our own prototypes and projects internally, we’ll use other third-party UIlibraries as well, such as jQuery, jQuery mobile, Sencha, Sencha Touch, or PhoneGap.

00:01:30 There’s nothing wrong with that, but what SAP has done is we’ve built an HTML5–basedlibrary and as you’ll see, it’s based upon jQuery, it’s based upon an open source library.But where we’ve gone in and added certain features we felt were necessary for enterprise-based applications. Therefore, this UI library is delivered with applications and it is part ofevery HANA system as of HANA 1.0 SP5

00:02:02 And therefore you have a library and you don’t have to go out and get a third-party libraryand I think you’ll find that we’ve done a nice job of integrating it into our developmentenvironment and the rest of the development process. So now, maybe just a little bit of anoverview about what SAPUI5 is. So first of all it just is a series of JavaScript libraries andcascading style sheets.

00:02:28 So there’s nothing terribly proprietary about the core technology on which we’ve built. Wewant this to be able to run in any browser that’s designed for HTML5 capabilities.Therefore, this is a standard JavaScript-type rendering library. It does follow the paradigmof completely client-side user interface. There is no server-side component to SAPUI5 atall.

00:02:56 That’s part of how we’ve been able to deliver SAPUI5 for all of SAP’s existing platforms,including SAP HANA. It’s just a matter of adding these client-side libraries in some form ofa repository—in our case, the SAP HANA content repository—and then being able to servethem out via the embedded Web server. We also wanted SAPUI5 to be built upon reallyopen standards.

00:03:21 So we didn’t write a complete UI rendering library from scratch. We started with jQuery, avery common, very popular open source JavaScript-based UI library. And we let the jQuerydo as much as possible, so the browser detection, the drag-and-drop library, these sorts ofthings are all provided by jQuery core.

00:03:48 We only added our functionality where it added additional value. So for instance, we don’tuse jQuery’s UI elements. We’ve introduced our own UI elements so that they would havea common style and theming capability as the rest of SAP’s UI technology. Now this doesmean that for the Web developer or the application developer who’s building the userinterface, that you have to have certain skill sets. You have to understand basic HTML.You have to understand cascading style sheets, and you also have to have a very strongunderstanding of JavaScript. JavaScript being the majority language that you’ll use whencoding the user interfaces. It actually works out that every UI element type is representedas a JavaScript class and every instance of a UI element, say a button, an input field, or soforth, is a JavaScript object instance.

00:04:45 So we’ll see this in the next unit when we start creating some SAPUI5–based applications.The other thing that SAP wanted to add was we wanted extensibility and themingcapabilities. So we wanted to make it easy for you, the developer, to add your own UI

Page 5 Copyright/Trademark

elements, so this is not a closed rendering framework by any means.00:05:07 You can subclass our UI elements and extend them and add additional properties and

events to them, or you can create your own UI elements that just use our rendering classesso that they render correctly inside the rest of the framework. We also have a themingframework built in. We do not use the jQuery theming because we wanted the SAP UI’sthemes to be compatible with SAP’s existing theming technology that’s used in theNetWeaver portal.

00:05:37 But we also wanted you to easily extend the look and feel without having to build an entirecustom theme. Therefore you can simply override the CSS, cascading style sheetsproperties, on a particular UI element. So you can attach these properties directly in codewith JavaScript. And then finally we wanted to make it very easy for you as the developerto also integrate other existing JavaScript libraries. Maybe from one of the other majorHTML5–based libraries such as Sencha, Sencha Touch, jQuery, jQuery mobile, just toname a few. But it also very easy to take an existing JavaScript library for a specialpurpose and drop it in, use it inside your SAPUI5 application. And then we want theapplications you build in UI5 to be able to target multiple devices.

00:06:37 This means the desktop and laptop, as well as smartphones and tablets. And the corerendering as you’ll see when you create an application initially you have to choose betweendesktop and mobile, but that’s not to say if you choose desktop it does not also run on themobile device. The desktop rendering will render correctly on a mobile device but it stilldoes not have the mobile-specific look and feel

00:07:06 Nor does it have mobile multi-touch events. So you can code one application that runs onmultiple devices, desktop and mobile devices, but you won’t necessarily get mobileoptimizations. You also have the ability to choose mobile rendering and then you get aspecial rendering mode that will sense the client device and use one of three themes,either an iOS theme, an Android theme, or a BlackBerry theme. And then this mobilerendering mode also has special touch events built into it.

00:07:40 On the other hand, the mobile rendering has less UI elements than the desktop mode, soyou kind of have to choose—do you want to highly optimize for the mobile experience butthen have fewer UI elements in which to express your user interface and create a userinterface that probably isn’t optimal for the desktop, so you’ll be truly targeting only themobile device. Or do you want to create a desktop experience that is also compatible withrendering on the mobile device?

00:08:15 Now just a little bit more background as far as some of the technologies we use inside ofSAPUI5. First of all, HTML5, So we’ve leveraged new capabilities in the HTML5capabilities.

00:08:30 And HTML5 is sort of an umbrella term. It’s not as though it’s one single technology.Actually it means extensions to the JavaScript language, improvements in the just-in-timecompilation of JavaScript, new extensions to cascading style sheets, and things like thecanvas tag, and we take advantage of that in various ways, such as all our charts andgraphs are rendered using HTML5 and don’t need additional plug-in technologies.

00:08:58 We also have used jQuery. I already mentioned that we started with jQuery as really thecore of the SAPUI5 library and therefore if you already understand how to use jQuery oryou’re familiar with that technology, you’re going to take to SAPUI5 very quickly because itfollows many of the same patterns because it uses jQuery internally.

00:09:20 And even some of the operations that you’ll see much later when we begin consumingsome REST-based services, we'll even use the jQuery/Ajax libraries to be able to call thoseservices. Of course, we have cascading style sheets 3 for the style and layout. We heavilyleverage OData. Now, we’ll talk about OData more extensively later this week when westart building our services.

00:09:46 But OData is an open specification. SAP sits on the specification board along with other

Page 6 Copyright/Trademark

companies such as Microsoft. Some people have described OData as ODBC for the Web.It is an open and easily consumable way of accessing data and business logic over HTTPusing standard HTTP concepts. So you don’t have to have a special envelope or a specialheader, therefore it’s very easy to consume.

00:10:18 We’ve “baked” OData consumption directly into SAPUI5. That’s one of the corecapabilities, one of the core reasons why you would choose SAPUI5 as opposed to a third-party HTML5 rendering library, because our UI elements are designed in such a way thatthey’re readily able to consume OData services and directly bind to them.

00:10:43 You’ll see this extensively once we start consuming some OData services just how easilythe UI elements interact with the OData services. We have OpenAjax for inoperability, thatis an open standard for when you have multiply widgets and parts in a page coming fromdifferent servers or applications to be able to exchange data and events within that pageusing client-side JavaScript.

00:11:11 We use the LESS library for themes, D3.js for our data-driven documents meaning thecharts and graphs and preparing the data for going into the charting libraries. We use theARIA library for accessibility, and then we built our own learning SDK, which I’ll show youin a few minutes. So you see SAPUI5 is really a combination of open standards, somethird-party open source libraries such as jQuery, the OpenAjax, and D3.js, and some SAPself-created technology.

00:11:53 A little bit about the really deep inner architecture. I already mentioned how we have both adesktop and mobile version of the controls and the themes. When you first create a newproject, you do have to choose right away whether you want desktop or mobile becausethat’s going to control which of these libraries are loaded on startup of the application.

00:12:15 Then inside the SAP UI core we of course have jQuery at the heart and then we havecertain SAP-written jQuery plug-ins. So these are the SAP extensions but written in such away that they conform to the jQuery plug-in standard and integrate nicely into jQuery. So allthe eventing, resource management, device detection, other utilities and login capabilitiesare SAP-provided jQuery extensions.

00:12:45 Then you do have jQuery mobile and jQuery UI delivered as part of SAPUI5. It’s there foryou to use if you choose, although in our examples and our SDK we’ll primarily focus onour UI libraries because they have the built-in data binding to the OData services and therendering manager integrates with our theming. Therefore our control libraries aredesigned for our UI framework, not the jQuery UI framework.

00:13:17 And then finally on the server side the only thing you might have is a resource handler,something to be able to serve out this content, these JavaScript libraries, this HTMLcontent, really acting as a static Web server.

00:13:33 And in our case, there’s nothing special built into HANA for this. We’re storing all theSAPUI5 content, even the pages you develop. They’re all stored in the SAP HANA contentrepository like all the other development artifacts we’ve seen so far and they’re served outvia the ICM Web server. Here’s a little example of what an SAPUI5 application might looklike

00:13:58 You’ll notice in this case this uses the new “lanes” concept for presentation of largeamounts of data and disparate types of data, so this would be like a launch or welcomescreen and then the lanes help the user navigate deeper into the information that’spresented here. So this gives you an idea of some of the rich, unique visualizations thatyou can have with SAPUI5.

00:14:26 I would also show you, once again we’ve looked at this earlier, but this is the end result ofwhat we’re building up to in this workshop is going to combine all of our data-intensivelogic, our data models, and our service enablement, and this is the user interface thatwe’ve put on top of this to interact with the purchase order information we’ve been working

Page 7 Copyright/Trademark

with.

00:14:52 And you see some of the core capabilities of SAPUI5 coming through here in the searchfield, I just begin typing and immediately I get some response so it’s a very Google-likesearch particularly in that it’s gone back to the server and searched across many differentfields in many different tables. So instead of the traditional paradigm of several differentfields, we really wanted a more intuitive search capability.

00:15:20 And we’re able to do this very quickly because we’re using client-side events to capture thetyping and we’re making an asynchronous call to the server to execute the REST service tobring back the results. So we also see here the nice table control and we have built-incapabilities such as sorting and filtering and we don’t have to bring all the records down tothe client side.

00:15:46 This isn’t a terribly large amount of records now that I’ve filtered, but you notice that when Iscroll a little bit father there’s another asynchronous call to the server to fetch anotherbatch of data and then it’s cached on the client side. So we have this rich table control withlots of functionality, yet we don’t need any kind of server-side UI framework to enable it.

00:16:10 And then finally we have charting capabilities, nice animated charts, so when I choose acategory to display we can see the information breakdown here and I can drill into the dataas well. So you see the nice animated HTML5-based charting capabilities. So this givesyou some idea of the typical capabilities of an SAPUI5 application.

00:16:39 Now there’s lots of information available for you to learn SAPUI5. We have the SAPCommunity Network that we saw earlier on in week one. In addition, in the developercenter there was HANA information. There’s also a dedicated section for user interface,meaning SAPUI5.

00:17:00 We also deliver a UI development kit—an SDK if you will—that is embedded inside everyserver that has SAPUI5 and I’ll go into the system in a second and show you this. We alsodeliver tutorials that you can study and there’s an SAP service note listed here with moreinformation about how to install and how to configure SAPUI5.

00:17:25 Let me show you the SDK. Now this SDK is available on all HANA systems SP5 andhigher, you just need to put in the URL sap/ui5/1/sdk/index.html and that will take you tothe SDK. The beginning, the overview, just gives you a little basic information. Thedeveloper guide is something that even before you start developing you’ll probably want toread through the majority of this.

00:17:57 This is sort of the “how to” getting started guide, as well as some really deep informationlike how to write your own UI elements, how to subclass our UI elements, how to use thedifferent model binding capabilities to OData or to JSON. So conceptually, the major thingsthat you’re going to need to know are all written about here in the developer guide and thedeveloper guide has lots of source code examples built into it as well.

00:18:26 Now we have the Controls gallery, and I really like this as a learning tool. Let’s take asimple UI control like a button, I can come here and see representations of different styles,different properties set on the button. But what I really like is that I can see the source codethat generated this example and I can even come in here and I can change the sourcecode.

00:18:50 So if I want to see the impact of what changing the text property has on this UI element, Ican change it inline, I can hit Apply and I can test that UI element. This is a great learningtool. It means that you don’t have to create dummy applications just to be able to try out acouple of pieces of code; you can try it out here inline.

00:19:12 Next we have the API Reference. Where the Control gallery is really nice for getting anoverview of the general capabilities, sometimes you really need that documentation ofevery property and every event for each UI element. They’re all represented here, every UI

Page 8 Copyright/Trademark

element is in the tree on the left-hand side and then as you choose the UI elements it givesyou the complete breakdown of all the events, all the methods, all the properties that areexposed in this UI element.

00:19:40 And then finally we have the Test Suite, which is similar to the Control gallery but in hereyou’ll get more composite UI elements as well. So it might put together two or threeconcepts, in this case how to embed other native non-SAPUI5 HTML inside the SAPUI5render. We’ve got examples of the different forms of data binding, so this goes beyondlooking at what just a single UI element can do and sometimes look at how various UIelements interact with one another.

00:20:19 Now, the overall positioning of SAPUI5. If you’re familiar with SAP core technologiesoutside of HANA, we have other UI technologies, we have a UI technology called WebDynpro, it’s the primary other UI technology. For the business suite it’s important to positionthis correctly, SAPUI5 is a new addition to our UI strategy and the traditional Web Dynprotechnology is still used in the business suite, particularly for the expert users and for thevery complex transactional user interfaces.

00:21:00 SAPUI5, on the other hand, inside the business suite, is largely centered on the occasionalusers, the managers, the self-service scenarios, the limited transactional capabilities. Weuse it heavily in the analytics when we need to display charts and graphs, collaborationsand feeds, these types of applications.

00:21:22 But I should remark that’s for the business suite in SAP HANA native applications becausethis is a new platform and we built it with SAPUI5 from the beginning and SAPUI5 is theonly technology that SAP delivers for HANA native applications. Therefore you would use itfor all types of applications, whether it’s an expert user or a casual user, when you’rebuilding new SAP HANA native applications.

00:21:55 And then some of the core features we’ve seen here, we really want to focus on delightingthe user so we want this user experience to do that by allowing them to run the sameapplication on any device. So even if you do the desktop rendering, it renders just as wellon the user’s laptop as when they’re accessing the same application from their phone.

00:22:19 We really want to build in cutting edge controls with powerful theming so the user isdelighted by the user interface. It has a consumer look and feel. Therefore the user’s goingto be attracted to it and at the same time we want to make sure that there’s efficiency andgood performance behind there so it’s not just about looking nice and being easy to use butmaking sure that it’s responsive as well.

00:22:45 On the other hand, we wanted SAPUI5 to really be centered on fostering innovation so wewanted extensibility. Very easy, very open extensibility but at the same time we wanteddevelopers to have a high level of productivity. Therefore we built in things like the ODataservice consumption directly into the UI elements.

00:23:05 That also lends itself well to a concept that SAP executives like to call timeless software,Timeless SAP Data Consumption. By having that layer of abstraction, by calling the dataaccess via REST-based services, that allows us to change the service implementation overtime and not impact the user interface.

00:23:28 And then finally we have very fast release cycle.s SAPUI5 is not tied to any one SAPtechnology. It’s not tied to the release cycles of SAP HANA, they’re working independentlyand they have new SAPUI5 releases that might come in a HANA revision. And then finallywe wanted to embrace open standards, so all the design tools are all based in Eclipse.

00:23:53 We wanted at the same time to have enterprise readiness like language translation,accessibility support, all these sorts of things that we need in the enterprise built in, and wewanted to be able to use open standards to do that. We wanted it to be based onstandards also that make it easy to learn. As I said, if you know jQuery, if you knowJavaScript, then you’re going to take to SAPUI5 very easily.

Page 9 Copyright/Trademark

00:24:18 And this also means we’re flexible and we’re open, we can reuse third-party libraries insideof SAPUI5 and even write your own libraries. And then the development tools themselves,as we’ll see in the next unit when we begin to use them, but all the development toolsinstall into Eclipse. They’re all Eclipse-based.

00:24:44 That means you install them into your SAP HANA studio and you’ll have one developmentenvironment to do your user interface development and all your other HANA development.It’s very easy. We have an update site that is available. You configure that update site intoyour HANA studio update sites and then you say Install New Software. And then it willbring the SAPUI5 additional tools and wizards into your HANA studio.

00:25:33 And once you have it inside your HANA studio, you’ll see that we do have wizards, that wehave code completion on the SAPUI5 UI elements. We have built-in help documentation onthe UI framework so this makes it feel really, really comfortable because it’s integrated intoyour SAP HANA studio.

00:25:41 If you’re already familiar with Eclipse-based tools, it’s going to also feel very familiar. Ifyou’ve done other Eclipse-based Web development, it follows all those standard Eclipseparadigms, which means that if you’re already a Web developer, if you’re already workingwith HTML and JavaScript, it’s going to be a very small learning curve for you to get up tospeed on SAPUI5.

00:26:02 We have some templates that we’ve included in here as well. We have support for otherSAP-based development environments. We said that SAPUI5 installs into HANA studio. Italso installs into ABAP development tools and the NetWeaver Developer Studio.

00:26:20 And a little outlook to the future is that in the near future we’ll have a WYSIWYG screendesigner. Currently today you hand-code all the UI elements. There are some wizards tohelp with that, but still all the UI elements are coded either in HTML, XML, or JavaScript.But we will have a graphical screen designer in the near future. And we will also have aWeb-based IDE for you to build SAPUI5-based applications.

00:26:54 So I hope this unit has given you a nice overview of what SAPUI5 is, how it fits into SAP’sUI strategy, and particularly how it fits in to building user interfaces in SAP HANA nativeapplications.

Page 10 Copyright/Trademark

WEEK 4, UNIT 3

00:00:13 This is week four, unit three: Creating a User Interface with SAPUI5. In this unit we’ll reallycontinue the discussion from the previous unit where we introduced the concepts ofSAPUI5. What we want to do now is go into the system, use the SAPUI5 developmenttools and build a simple little “Hello World” application.

00:00:37 This’ll help really give a concrete idea to some of the concepts we discussed in theprevious unit, as well as see the beginnings of how we can build a simple application. Theidea is that after studying this unit is we wouldn’t have complete understanding ofeverything about SAPUI5 and be able to create any kind of application. We just want tohave enough of a foundation that when we move on and begin to talk about services andthen the service consumption that we’re able to build some user interfaces that willconsume our REST-based services running on SAP HANA.

00:01:13 So what do we want to do in this unit? We want to build a simple application. We’ll go intoHANA studio and use the New Project wizard. You’ll see a screen similar to this wherewe’ll have to choose the Eclipse project that we want to place this in, and we’ll give it aname and this name will be used to build both the controller and the view.

00:01:38 And we choose our target type as well. We choose whether we want desktop or mobilerendering. We’ll use desktop rendering for all our examples in this workshop.

00:01:52 And what this wizard will generate, you’ll see it create both an index HTML file—and that’sreally the bootstrap that will load the core SAPUI5 libraries. It’s where we define our themeand really start our processing, but we don’t put any additional content in this index.html.Then you’ll notice that there’s a WebContent folder that’s been created and all of theSAPUI5 objects go into this folder. The wizard will also have generated a controller and aview.

00:02:31 So the controller is where we put all of our event processing or any other logic we mightneed. If we have a reusable utility or a formatter, we’d put that in the controller. And also ifwe have a UI element that throws an event, say a button that has a press event, then youcan put the event handler in the controller to separate that out from the UI rendering itself,which would all be in the view.

00:02:57 So the view, that’s basically where we build our UI elements and render them into thepage. We’d do nothing else inside the view. You’ll notice both the controller and the vieware .js files so even the MVC model is really implemented in JavaScript so the viewbecomes a JavaScript object, the controller becomes a JavaScript object, and the model isa little bit of a hybrid in SAPUI5.

00:03:25 Your model is often just a proxy object pointing to a remote service. We’ll see that lateronce we get into consuming our services. What we’re going to build is a little Hello World-based application so we’re going to need to render a button and on that button we’re goingto change the text so it says Hello World.

00:03:48 And then we’ll put a little event so that when somebody presses the button it actually fadesaway and disappears. Not the most incredible user interface ever by any means, but atypical starting point. It will show us how to create the project, how to set up the bootstrapHTML file, and how to render UI elements in the view.

00:04:12 So let’s switch over to the system. I’m in my SAP HANA studio and I’ve already goneahead and installed the SAPUI5 tools into HANA studio. You didn’t necessarily want towatch an installation and a bunch of file progress bars go across, but I’ll show you where Idid the setup to make this possible.

00:04:35 I’ve gone into the preferences and I’ve gone to Install/Update and then Available SoftwareSites. And I’ve added another software site here for SAPUI5 and I’ve filled in a URL. Nowthis is not the URL that you necessarily use, but an SAP-internal URL. Since I’m hereinside of SAP at our offices I was able to use this internal build.

Page 11 Copyright/Trademark

00:04:59 You would use a URL either from the SAP public update site, which is documented in theonline help—or your company may have downloaded the SAPUI5 installation from the SAPService Marketplace or from the SAP Community Network—and then you can setup a localupdate site. So for the exact URL for your situation, you may have to talk to your systemadministrators and see if they have something available. Otherwise use the SAP publicupdate site.

00:05:31 Once you’ve configured this in the system preferences then you’re able to come to simplycome to Help—>Install New Software. From here you would choose which update site youwould want to install the software from. I’m going to install from SAPUI5 and it’s going out,it’s scanning to see what software is available on that update site.

00:05:51 Then it comes back and it gives me a list. Now, I already have installed this so theinstallation process consists of simply checking the SAPUI5 development kit and, if youwant, server connectivity if you would also want to do development with an ABAP systemthat’s an optional piece. You really only need the UI development kit for HTML5.

00:06:15 Now if I went farther it would simply tell me that I have already have this installed but evenif I didn’t it would simply bring up a progress bar and start the installation, nothing toointeresting about that. Now that I have SAPUI5 installed into my studio, I can begin bycreating a new project in my project explorer.

00:06:38 So here I will come and say New and Other and then you’ll see that we have SAPUI5development, we have an application project. So you also have the ability to create newcontrols, new UI elements, new libraries, lots of functionality. But we want to start with anapplication project. Here I’ll give it a simple name.

00:07:12 So a new project, Exercises_UI. I want desktop rendering and I do want the wizard tocreate my initial view. I’ll go ahead and leave it in the default Eclipse workspace becausewhen we share it to the HANA repository we can also copy it to our HANA-specificworkspace. Now I’ll give it the name of the views I want to create.

00:07:41 So I’ll say HelloWorld and I’ll use the JavaScript rendering. This is just a confirmationscreen. I’ll go ahead and say Yes and I’ll stay in the perspective that I’m in. And it’s alreadycreated the project. It's created the WebContent folder. I have my index.html and it’s alsocreated empty view and controller objects for me as well.

00:08:14 Now so far this isn’t even associated with a HANA system, I can do SAPUI5 developmentand deploy it to any Web server. I can also connect this project to an ABAP or a Javasystem. At this point I’m independent of any back-end system and actually I can do most ofmy development here without going to any particular system.

00:08:37 We won’t even send it to a system until we’re ready to test it. But at this point I need tomake just a couple of changes. So I’ll go to my exercises. So one thing I need to do is that Ineed to change the source of the main library in the bootstrap, so it’s sap/ui5/1. The wizarddoesn’t know that we’re running on SAP HANA and the SAP UI libraries are stored indifferent places depending upon if you’re running this from an ABAP server, a Java serveror a HANA server.

00:09:23 Therefore the wizard can only put in part of the path and we’ll have to fill in the rest basedon what kind of system we’re connected to. We don’t have to make any other change tothe bootstrap—the wizards’ done everything for us. It’s loaded the commons UI libraries. Ifwe wanted additional UI elements like we wanted the charts, the table control, we wouldhave to add additional libraries here.

00:09:49 It set the default theme, it’s also loaded the view in the controller. That’s what’s happening.At this point it’s saying, All the views and controllers, all the local resources will come froma subdirectory called exercises_ui, which was generated right here. And it will create aview and this is how the view is initiated.

Page 12 Copyright/Trademark

00:10:13 You’ll notice that the view also references the controller, so this is the link between the viewand the controller and in this very simple case that we have here we don’t even really needa controller because we don’t have any event handling per se. We only have the one eventand that’s going to be on the button press so we’ll just inline that event because it’s sosimple.

00:10:33 So here in the source code that I’ve inserted—you can see what I’m doing—I’m creating abutton. And remember, all of the UI elements are represented as JavaScript libraries;therefore a button UI element is sap.ui.commons.Button. Then we created an instance ofthat UI element we the ID “btn” so we can refer to it later as its ID if we need to.

00:10:59 But then we have this JavaScript object that really represents that button on the screen. Sowe’re able to set properties. So we set the text that we want to appear on the button andwe attach the press event to that button and anytime the user presses that button then wecall, this is actually a jQuery-provided function, the fade out is provided by jQuery.

00:11:21 We’re going to attach that standard “fade out” jQuery user interaction, the fact that thebutton will fade away when we attach it to our button control, and that will fire the fade-outevent. And then what we have to do at the end of our CreateContent or our view, we haveto return either a single UI element or, if we have a block of UI elements, we have to groupthem in something, a tray, a panel, or some grouping UI element.

00:11:49 We return whatever our group UI element is or our single UI element and that’s how it willrender into the page. So we don’t really have any direct interaction with the HTML div thatthis is placed in. And we don’t interact directly with the DOM, the document object model,in this case.

00:12:05 We really treat everything as JavaScript objects and then we return them to out of the viewand then they return to the renderer. It’s actually the SAPUI5 renderer that will do all theinsertion into the DOM and the HTML generation.

00:12:19 So at this point my project looks pretty good so I’ll go ahead and save all my files. Now Ineed only share this to the HANA repository so I’ll say Team–> Share Project and I’llchoose the SAP HANA Repository as the repository that I want to share it to. You’llremember we’re using standard Eclipse team provider plug-in so there’s other repositoriesthat we could send our projects to.

00:12:47 At this point I’ll say I want to send it to this particular HANA system with this user ID, but wewant to choose the package we place it in. We actually want to nest it inside our workshopsessiona, 00, and I’ve created a UI folder so I’ll nest this project inside our other project sothat our UI project becomes a child project of our overall workshop project.

00:13:16 Say Ok. Say Finish. And the project is being shared to the server. At this point we can thencommit all of our resources to the server and now we can activate everything. And now thatit’s active I can go back to the server browser, the HANA Repository browser, and I can gointo my UI package and you’ll see it all represented here

00:13:50 So we know that it’s checked in, that it’s active. It’s good, it’s ready to run from the server,and we can begin testing it now. To test it, we’ll just put in the package path,workshop/sessiona/00/ui/Exercises_UI, which was the name of our UI project, and/WebContent and then /index.html, our bootstrap.

00:14:35 And there you see it rendered: Hello World. And if I click on the Hello World it fades away,so we know our rendering is correct and that we have some interaction there.

00:14:48 Now this was a very simple example, but hopefully it’s given you a good understanding ofhow the SAPUI5’s tools work, how it’s integrated into the SAP HANA Repository, and givena basis for us now to be able to build a little more complex user interfaces that willconsume our REST-based services.

Page 13 Copyright/Trademark

WEEK 4, UNIT 4

00:00:13 Week four, unit four: OData Services. In this unit we’ll cover some of the fundamentalconcepts of what an OData service is. This will help us in preparation for the next unit, whenwe will begin building our OData services in SAP HANA. So first of all, some of the basics.What is an OData service?

00:00:36 Well, OData is an open specification. SAP sits on the board of OData specification alongwith other companies, including Microsoft. The idea of OData at its heart was to define anopen but very easy-to-consume standard for interopting with data over the Web. This sort ofgrew out of the idea of enterprise services, Web services.

00:01:05 Now, whereas Web services use SOAP as the body format and have a rather complexformat for envelopes and communicating the service definition in the form of WSDLdocuments, OData on the other hand embraces REST-based architecture. This is lighterweight, HTTP-based, and will use the HTTP verbs as the actions in our OData service. Andwe really embrace the request and the response object of the HTTP as the communicationmeans of any REST service.

00:01:44 So this being a simpler protocol, a little bit lower-level protocol, it’s obviously a much moreinteroperable protocol and something that doesn’t require a lot of programming on the clientside in order to consume.

00:02:01 The parts of an OData service, well you’d have an OData data model. So somewhere, we’lldefine basically which entities we want to make up our service and what are therelationships between those entities. In the SAP HANA world, you’ll see that our ODataservice generator works off of tables and views. Therefore, we can use any existing HANAtable or any view type, including attribute views, analytic views, and calculation views as thesource of our entities. And we’ll literally create a one-to-one entity for each table or view thatwe want to be part of our service. We'll also be able to define the relationships betweenthose tables or views at this entity relationship level.

00:02:49 Next, we’d have the OData protocol. So this is the communication protocol and, as I said,it’s all REST-based.

00:02:58 It supports CREATE, READ, UPDATE, and DELETE operations by using the HTTP verbs.And then we have a specification for how we define the query language, the queryparameters that we add on to the URL as part of the request. So we all have the ability tosay, “Build a dynamic SQL statement off of any OData query”, where we can build indynamic WHERE conditions and GROUP BY conditions and SUM conditions—all off of thespecifications provided in the URL parameters of the OData service.

00:03:37 Next, another part of OData in general is the OData client libraries. So these are prebuiltlibraries that help with the consumption of OData services. Now we’re going to focus onconsumption from the Web browser in the form of HTML5 and in that case there aren’treally separate OData client libraries; it’s all built into SAPUI5.

00:04:05 The OData consumption is built in to such a level that UI elements have a binding property.And for that binding property, we give it the URL of our OData service and the UI elementwill do the rest. We’ll call the service, we’ll introspect the service interface and get themetadata from the service, and even some UI elements like the table UI element have a lotof events built in where they can build the query string properly to recall the OData service.We’ll see lots of examples of this as we begin to consume our OData services.

00:04:40 And then finally, we have the OData service itself. This means the HTTP end point that’sexposed from the Web server, in our case exposed directly from SAP HANA. It allows anexternal system or any external client or system that can speak HTTP to call the service orconsume the data that is part of the OData service model.

00:05:06 So some of the core OData capabilities which we’ve implemented in SAP HANA via ourgeneric OData service framework. First of all we have aggregation, so you have the ability

Page 14 Copyright/Trademark

to specify that you want to aggregate the values in a particular column. So we can builddynamic SELECT SUM, SELECT AVERAGE, SELECT MIN, SELECT MAX into the ODataquery specification.

00:05:31 We also have the ability to build associations, that’s how we express the relationshipsbetween multiple entities. We’ll see this in a later unit when we build a more complex ODataexample. You’ll have the option of course, if you have multiple tables, you can build a viewand build those relationships between those tables and a view and then have a single entityin your OData service that maps to that view.

00:05:58 But that means that the relationships are always processed, meaning if you select athousand records from the OData sevice it’s going to have to read all the correspondingrelated tables and pull their records in and basically process the JOIN condition. If youinstead do two separate tables, or even two separate views, and define the relationshipbetween those two at the entity level in the OData service, it’s processed a little differentlybecause the OData will process only the parent object, will turn all the records from theparent object and inside there generate a URL which points to the records of the childobject in the relationship. So it basically allows you to do lazy loading of the related recordsin a relationship.

00:06:54 You really have to decide on what works best for your scenario. If you're wanting to displaysay, all the parent records, all the item records inline in a single table, you’re better off doinga JOIN and having a single entity in your OData service. On the other hand, if you wantdrill-in capabilities, if you want to display one table with the parent records and then onlyload the children for a selected parent record one at a time, then that’s much better donevia entity relationships in the associations in your OData service.

00:07:27 You also have to supply the keys. Every record in an OData service has to have a uniqueURL. And in order to have a unique URL, we have to know what are the unique keys of anyset of data. Now if you’re building your OData service off a table then you don’t have tospecify the keys. Every table has to have a primary key, and therefore the OData servicegenerator will automatically read the primary keys from the table definition and utilize those.

00:08:01 Now when you have views, you don’t have to define key fields for your views. Therefore youeither have to—with the attribute view and the analytic view—you’ll probably just have tospecify which columns are your keys.

00:08:17 We also have the ability to generate a key inside the OData service. So this generation willjust generate a unique number for each record. Therefore we have our uniqueness and canbuild a URL. That’s particularly useful for calculation views, which many times don’t clearlyhave a key field.

00:08:40 Next we have parameter entity sets. So as we saw in our earlier week when we werebuilding attribute views, analytic views, and calculation views, we can have inputparameters. So this is different than from say, a WHERE condition or a FILTER condition.This is literally a piece of data that is brought in and then has some effect inside the view. Itcould be used in a formula inside a calculation. It could be used to filter the view, we don’tknow exactly how it’s used from the outside we just know it’s a value we have to pass in.Therefore we can’t just use the query string of the OData service. We have to have aspecial way of supplying the input parameter values and we do this as part of the entity set.So it’s part of the base URL before we get it into the query string of the OData service.

00:09:34 And then finally we have property projection. Basically what this means is we don’t have toexpose every column of our underlying table or view. We can reduce the number ofcolumns so we can build a projection if you will, with a smaller number of columns whichare actually exposed to the OData service.

00:09:55 And even when you’re calling the OData service, there are URL query parameters thatwould allow you to specify which columns you want, so you can even further reduce it atruntime if you need fewer columns then what’s defined in the OData service definition itself.

Page 15 Copyright/Trademark

00:10:12 And then finally, the general development process for OData services. You have to choosean end point, so this generally means choosing which table you want to be the source ofyour OData service or building a view to represent the relationships of the data and maybethe calculations you need as part of your OData service. So that’s your starting point: eithera table or one of your HANA view types.

00:10:40 Then you have to build the OData service definition itself. This is going to be anotherdevelopment artifact similar to the ones we’ve created. It will have the file extension.xsodata. The service definition is a fairly simple file format that you simply supply thenames of the entities and their corresponding database object, whether that’s a table or aview. And then you have the ability to add other optional parameters, such as entityrelations, associations, key generation, and other such parameters.

00:11:22 Finally we need some user interface to be able to consume that OData service. In our case,in the workshop, we’re going to build SAPUI5 applications and use some of the UI5 UIelements that are especially designed for consuming OData services. For instance we’llbuild a table control that will visualize the returned records from the OData service. Andwe’ll use the built-in filter and sorting capabilities of the table control and see how they mapto the OData URL parameters like $orderby or $filter.

00:12:00 We’ll also see how you can test your OData service from the Web browser by directly typingin the URL. There’s even some nice add-ins into Chrome. I tend to use Chrome and theChrome extensions. But there are some nice Chrome extensions that format the returndata—either the XML or the JSON return data—and allow you to easily test your serviceeven before you begin building your user interface.

00:12:31 And these are the steps that we will walk through in the subsequent units in this week.

Page 16 Copyright/Trademark

WEEK 4, UNIT 5

00:00:13 This is week four, unit 5: Creating a Simple OData Service. So far in the previous weeks,we’ve seen how we’ve built up to our OData service. We have built our base data model,our logic on top of that, and now we’re ready to begin service enabling everything we’vebuilt up to this point. And in the previous unit, we covered a lot of the theoretical conceptsaround OData services.

00:00:41 I think now it’s time to go into the system and actually see how we build that servicedefinition and do a little execution within the Web browser to give you an idea what the datalooks like and what the URL parameters look like when we consume an OData service. Sowhat we’re going to do in this unit is we’re going to build this .xsodata file.

00:01:07 This is the service definition file, and you see in the screen here a small example of whatthis looks like. Basically we have to supply a namespace. This is mostly for documentationpurposes. Don’t confuse this with the namespace concept that we get from the package.Most developers however, do supply the namespace of the package hierarchy that they putthe OData service into.

00:01:35 Next, in this case we have a table schema and then the name of a table. In this first simpleOData service we’re just going to use tables. A little bit later we’ll see more complexexamples that just use views. But for now, we just put in the schema name, the table nameand then we say as “BusinessPartners”. That as “BusinessPartners” is the name of theentity. That’s how this table will be represented in the OData service definition so nobodywill see the long table name, they’ll see this entity name when consuming the service.

00:02:16 So the basic development steps that we would need up to this point. We would have had toalready created this database table, which we did in an earlier week. We have to grant anyprivileges to this table or view, which we also did in an earlier week when we built our roleand assigned it to our user. So we have all the prerequisites that we need to begin toservice enable the data in this table.

00:02:42 We’ll go to our project. We’ll add an .xsodata file, which is just a simple flat file. We’ll use aplain text editor to build the service definition. And the service definition will tell the systemwhat to expose, how to expose it, and to whom to expose it by basically defining whichtable we’re going to use as our source and what the entity name of that table will be.

00:03:10 Then we’ll activate this object and then we’ll have a URL that basically points directly to the.xsodata document itself. We can then use the Web browser as a test tool to be able to seethe content and pass in different URL parameters and test different capabilities of ourOData service. For instance, we might use the $metadata option. That will do anintrospection of the service and show us the service interface so all fields and their datatypes are exposed in each of the entities.

00:03:50 Our we might use $filter. That allows us to basically build a dynamic WHERE condition. The$orderby controls the sort order and $select allows us to narrow the field selection so wecan have less fields then what are defined in the OData service.

00:04:10 And then finally, we have the option to specify the format that we get back in the responseof the OData service. We can either receive Atom XML back or JSON back. You’ll see thatAtom XML is the default format and is pretty widely used by SAP in our applications. It hasreally good compatibility, particularly in non-JavaScript consumption scenarios. Particularly,the Microsoft tools consume Atom very well. But on the other hand, the JSON format islightweight, less verbose. There’s less overhead to the formatting of the tags and so forth soit takes a little less network bandwidth to transmit and if you are consuming the ODataservice in JavaScript, JSON processes much faster in JavaScript than Atom XML would beto parse.

00:05:13 So at this point, let’s go into the system and let’s create our OData service. So I go to theProject Explorer and I’m just going to reopen the project that I had been working in earlier.This is where all my data models were built and where we modeled our views. I’m going to

Page 17 Copyright/Trademark

the services package. Remember it’s not required. to have several packages. This issomething I do and many other developers do to simply separate out the different types ofdevelopment objects to better help with the organization. And as a developer I can look atthe project and know right where to go if I want to edit the services.

00:05:56 But inside the service I’ll say New—>File and I’ll name my servicebusinessPartners.xsodata. You see it opens in a plain text editor, there’s no specializededitor, no wizards involved in the OData service generation. That’s largely because thesyntax is really very simple.

00:06:23 So I’ll cut and paste in our syntax, you have to start with service, namespace and then I’vesupplied a namespace and you’ll notice that it doesn’t actually match my packagehierarchy. It isn’t technically required to match the package hierarchy. Many developersinside SAP will do that simply as a documentation purpose so you can track back theservice definition location on the server. But for this case I’m just going to put a simplifiednamespace.

00:06:54 Next I put the schema and the table name that we want to use as the source of this ODataservice. So if I were to go back to my HANA Systems view, go into the catalog, here’s theschema SAP_HANA_EPM_DEMO and then we’re going to use the businessPartner tableas the source of our OData service.

00:07:16 So it would be right here if you want to look at the content that’s in here, we see that we havPartnerId, that’s going to be our primary key, PartnerRole, EmailAddress, PhoneNumber—some basic information about the business partner.

00:07:32 So this is what we can expect to see exposed through our data service. And then finally Isay as “BusinessPartners”. And this will be the entity name, this is how it will appear in theOData service and this is a very simple service. We don’t have any associations, anyrelationships, there are no multiple entities, so it’s a little bit like adding the entity is kind ofredundant. We’ll have the service definition named BusinessPartners and we’ll have anentity inside there named BusinessPartners. But this will make more sense once we starthaving multiple entities in our single OData service.

00:08:06 At this point I’ll go ahead and save that file and I will commit it and then I’ll activate it. Andupon activation we now have a runnable service end point. There’s nothing more that I haveto do at this point so you’ve seen how with just a couple of lines of code I very quickly havemy OData service running here.

00:08:36 So I’ll just put in the package path: workshop/sessiona/00 and then the subpackage/Services and then literally just the name of the service definition,businessPartners.xsodata. And I’ll just run that. And if I execute the service definitiondocument itself URL, I’ll get back a very simple document that just lists the entities.

00:09:12 And you’ll notice that the only entity listed here is BusinessPartners, very simple. Now if Iadd a URL parameter here of $metadata, actually I just messed up the..$metadata, then Iget introspection of the service. So I’m seeing the service interface basically, what in thisentity is the key field, the partner ID, what are all the properties, what are their data types,the lengths.

00:09:56 So this is everything that another development environment would need to know about howto call this service. So we don’t have any (unlike SOAP-based web services) we don’t havea separate (like they do) WSDL, a Web Services Description Language document. We don’thave a separate end point or document to be able to see the service interface

00:10:20 We can always just add the $metadata and we’ll get the introspection. At this point I couldeven go and change my underlying table and reactivate my service and then I’d see thenew fields here in this metadata. So it’s a great way, as I said, for another programminglanguage or UI element, say a table UI element, could call this metadata and it would knowall the columns in the OData service, be able to build columns dynamically. There’s lots of

Page 18 Copyright/Trademark

uses for calling this metadata parameter at runtime.

00:10:50 Now if I change this metadata, I take it off and I add the entity here. So if I addBusinessPartners, that’s literally how we build calls to the service. Everything is done viathe URL. So it’s the service definition and then we add on the entity name as part of theURL. If we need input parameters they get added after the entity name and then all theother query parameters are added as URL query parameters. So if I were to run this rightnow with just BusinessPartners, it’ll actually return every record in the business partnertable. And that’s exactly what we’re seeing here, every record is returned, every record hasa unique URL.

00:11:40 So see how it adds the key field value, the business partner ID in parenthesis behind thebusiness partners, so that would be a unique URL to that particular record. So fornavigation purposes or even hyperlinking or saving it as a favorite, every record has a URLthat can be accessed. So you see how we also can do navigation using basic HTTPnavigation concepts. This is part of the power and the advantages of using REST-basedservices as well.

00:12:15 If you scroll through here you see multiple records represented. Now what I might do here isadd a query parameter. Let’s add the $format=json, just to give you an idea of thedifference between Atom XML which is what we were seeing before and the JSON format.The JSON format is a little lighter weight, there’s less overhead, less tags. There’s basicallya lot less overhead to the content that’s being transmitted. Therefore, as I said, if you’regoing to consume the service in JavaScript this might be a better option, but it makes nodifference to the server side, it really makes no difference to the programmer unless they’regoing to manually parse the OData service which format that it’s in. You’ll see later theSAPUI5 UI elements don’t care they support both the JSON format and the Atom XMLformat. I actually find if I’m troubleshooting I’ll use the JSON format simply because I find ita little easier to read, particularly using these Chrome plug-ins.

00:13:34 Now you might notice that I’m getting a really nice formatted display here with both theJSON format and the Atom XML. This is because I’ve added two Chrome plug-ins. If Iswitch to the source, this is what it looks like normally. It’s the same information, just thatthe Web browser isn’t trying to format it nicely for me. I find that for troubleshooting anddevelopment of OData services, it’s really handy to have this couple of Chrome plug-ins.

00:14:05 I added them just a few minutes ago. I added the JSONView extension and the XML Treeextension. Now that’s just two examples, I’m sure there are other extensions both forChrome and other browsers that do similar things. These are the ones that I found that arevery helpful and therefore I’m using them in the demo so if you go to repeat and try to dothe same sort of situation in your system, and if it looks really nasty when you test it youknow why, you simply don’t have these extensions. You can either get the extensions thatI’m using here or find other similar extensions for whatever browser you prefer to use.

00:14:48 And one last thing that I want to show you here in our OData service. I added the queryparameter for the format but there’s many other query parameters that we could add. Forinstance I might add $top=2. What this will do is it now only returned the top two records sothis is how we can limit the amount of data that comes back and, for instance, the SAPUI5table controller uses this to only read a 100 records at a time. And as you scroll it gets thenext 100 records. But in order for that to work, we have to be able to tell it where to positionin the wuery results.

00:15:32 So we can say give me two records but then add another query parameter here $skip=10So now I’m saying give me two records but skip the first 10 records. You’ll notice that itbrought back partner ID number 10, so we know that it skipped ahead in the data. And as Isaid, this is how we’re able to do that very efficient scrolling even through extremely largeamounts of data on the client side, as we’ll just cache small amounts of data we’ll go backto the server and we’ll retrieve the next set of results. And because HANA is an in-memorydatabase, and because it has massively parallel processing, we can rerun that query in realtime. Other databases would probably have to cache the results set and then skip around in

Page 19 Copyright/Trademark

that cache results set.

00:16:27 We don’t have to do that in HANA even if it were you know, millions of records, and wewere doing a skip to record number 500,000 and retrieve the next 100, that query is goingto execute very fast each time. This feature of OData, to be able to skip around in the dataset, is very well utilized in the HANA world and can help you create responsive userinterfaces where you have nice table controls that have the possibility to sort and filter,aggregate, and scroll through extremely large data sets. That’s not a problem for HANA tobe able to handle at all.

00:17:03 Now in this unit you’ve seen how easy it is to create an OData service definition andhopefully you’ve gotten some idea of what it is like to execute an OData service from theWeb browser.

00:17:16 I want to stress that this is not what we would give to the end user to be able to execute thisservice. Running the service directly from the Web browser is simply something that thedeveloper would use to test this service.

00:17:27 In subsequent units, we will begin to consume this OData service in our user interface andobviously, a finished user interface that simply uses the OData services as the model will bewhat we, in turn, give to the users.

Page 20 Copyright/Trademark

WEEK 4, UNIT 6

00:00:13 This is week four, unit six: Creating a Complex OData Service. In this unit we’ll continue theexercise from the previous unit and we’ll build upon the existing OData service. We’ll addan additional table, which will be a second entity. This will allow us to demonstrate how tobuild associations between entities and how that impacts the OData service at runtime.

00:00:39 So what we’re going to want to do is take the businessPartners.xsodata file that we hadpreviously and now we’re going to add a second entity to it. So it’ll be another table, so yousee here that we’ve added the Addresses table and then we’ve said as entity BPAddresses.Then we also need to define the relationship between these two entities. We do that bybuilding an association, and you notice that the association here is that the addresses has aprinciple of BusinessPartners and there is a multiplicity 1:1 between the two. So we’resaying there is a one-to-one relationship and that the business partner table is the principle,is the parent in this case, and that the key that joins the two tables together, if you will, isAddressId in each of those. so we see “BusinessPartners” (“AddressId”) andBPAddress(“AddressI”). That’s where we’re telling the OData service which key to join thefields upon.

00:01:49 And when we execute this service, we’ll see that now when we run the base definition, we’llhave two entities. We’ll also see in a moment once we’re able to execute this, what exactlyit does to the data output. So let’s go back to the system and here is ourBusinessPartners.xsodata that we had previously. Now let’s just change this.

00:02:22 And we’ve added to it our Addresses table with BPAddresses and we’ve created the one-to-one relationship on the AddressId. Just going back to our basic table, we can see when welook at our data, this is our business partner ID. Inside the Business Partner ID table, thereis an address ID, so we don’t have to store the address ID directly in the Business Partnertable, but we’ve got a foreign key relationship here.

00:02:54 We look in the Addresses table. We have a series of address IDs and then the associatedaddress. So these could be addresses for business partners, they could be addresses foremployees. We have one central address table that services all types of addresses that weneed. So now that we’ve extended our OData service, let’s go ahead and save that changeand we will reactivate it.

00:03:26 Now we can run our service definition again. So once again, let’s just put in our packagepath: sessiona/00services/businessPartners.xsodata. And now when I access the servicedefinition itself you see two entities. Likewise, when I look at the metadata then we see boththe metadata for the Business Partner table and the metadata for the Address table.

00:04:04 So that’s one advantage of structuring your OData services this way with multiple entities, iswith a single metadata call you get all the introspection of the complete service interface, allthe entities. And we also see the entity relationships defined here as well, so this is done ina format that can also be consumed by the client side. And you’ll see later in SAPUI5 howwe can even use these relationships between two entities in a single OData with two tablecontrols. We combine each of the table controls to the same OData service, but then tell itthe specific entity that it represents. Then when the lead selection in the parent tablechanges, it will automatically change the child data that is displayed in the subsequent tablecontrol.

00:04:58 Now this does change a little bit how we can access the data. For instance, if we look at theBusinessPartners entity...let’s just go ahead and look at them all again. There’s a few toomany there. Let’s look at just the top two. Now what we see here is that we have additionalURLs generated. We have this URL that points to the related data, which would be theBPAddress.

00:05:30 So now we can see if we want the address data for this particular business partner, we cancall the URL for this business partner and add BPAddress to the end of it. So for instance,we might come here and we say we want the addresses for just business partner0100000000. And you’ve got to take that colon of the end. And now we have the address

Page 21 Copyright/Trademark

data.

00:06:03 So you see how the child data is only available when we drill into the details of the parent.This way we don’t have to load all the addresses from all the business partners if we lookup just the business partner data. Likewise we can’t just go and call this service and look upthe business partners.

00:06:23 So if I would come here and try to access just the addresses directly, I have a few toomany, once again ?$top=2, and there we have a listing of each of the addresses. Though itdoesn’t make a whole lot of sense without the link back to the business partners, but wecan get a listing of all the possible addresses if we need to.

00:06:52 So that gives you a little more realistic example where we have an OData service thatcombines two entities. Let me show you one other example here. This is an even morecomplex scenario. In this situation, we have a view, this is actually a SQL view, being puttogether with an analytic view. So we have purchase order header data and then we havethis purchase order work list, which includes item data.

00:07:26 The process is basically the same, this is a one-to-many relationship. So for a single headerrecord, you’d have multiple item records, which makes good sense. And in this case wehave views, so I did want to show you that when we have views we have to specify the keysas well. Because it can’t just go and just look up the view definition and know what the keyfields are. So that is the optional addition I spoke of earlier.

00:07:58 Otherwise, this is just another example. This is actually the OData service that sits behindour purchase order work list. So the purchase order header entity fills this first table and thepurchase order item entity is bound to the Items table. And you notice what happens herewhen I choose the lead selection on the header it loads all the item details down here

00:08:29 And as I described we didn’t have to do any special programming in the user interface tomake that possible. That’s all done because the user interface is able to read the entityrelationships that we defined in the OData service. And because we bound both of thesetable controls to the same OData service, just two entities in that OData service, they'rerelated. They understand that relationship, that association from the OData service, and weget the same relationship created between the two UI elements.

00:09:00 So this has given you some idea of some of the more advanced features that we have inOData services. Of course there’s many other features, other URL parameters that can bespecified, most of which will be generated by the user interfaces we will see in the next unit.But if you want to research them further I strongly recommend that you look in the SAPHANA developers guide where all of the parameters and permutations of the OData servicedefinition is contained, as well as all the URL parameters that can be passed into theservice at runtime.

Page 22 Copyright/Trademark

WEEK 4, UNIT 7

00:00:13 This is week four, unit 7: Calling an OData Service from the User Interface. In this unit,we’re going to put together everything we’ve learned so far in this week. We’re going to takewhat we learned about the user interface technology and what we learned about creatingan OData service and now create a new user interface that will consume and present thatOData service.

00:00:35 This is the complete round trip. I’s one thing to learn about creating OData services, butuntil you can really extend them to the user interface and present them to the user, youdon’t have the complete story. This is why I really like combining the user interface portiontogether with the service creation portion of any sort of workshop.

00:00:58 So what we’re going to do now is we’re going to take the SAPUI5 project that we createdpreviously in this week and we’ll extend it, we’ll copy the index.html and we’ll only have tomake a couple of minor changes to it. One thing is that we’ll be using a table control, sowe’ll have to extend the UI libraries in the bootstrap to also include the UI table library.

00:01:24 We’ll also have to change the view because we’ll have a new view in this application. Andwhat we should have at the end of this project is we should have a nice table control thatdisplays the data from our OData service and has built-in sorting and filtering and also theability to scroll through the data and load the next batch of data as we move every 100records into the data.

00:01:52 So let’s go into the system and I have my Exercises_UI project. Inside this project, I justwant to say New—>View. This will launch the SAPUI5 wizard, allowing us to create both anew view and a new controller with all the proper setup and specification. So we want it tobe inside our existing project so it’ll still put it inside the WebContent/exercises_UI folder.And I want this to be my...xsodataTest will be the name of the view in the controller and Istill want it to be a JavaScript-based development paradigm.

00:02:32 So we’ll say Finished and it’s now generated a new empty controller and view for us. Andbefore we can do anything with this empty view and controller we need to copy ourindex.html

00:2:48 Copy. And then we’ll just do a paste and the new file will be named...we’ll just name it.xsodataTest.html So here we want to add our SAPUI table and then we can change this.Doesn’t really matter what the ID is, but I like to change the ID so it matches my view name.So it would be idxsodataTest. Far more importantly is that we change the view name hereto be xsodataTest. Therefore this html page will load correctly the new view we’ve justcreated.

00:03:43 So our html is fine. Our controller...we still don’t need to put anything in the controller, youmight have thought, “Oh, I’m going to need to finally use the controller, I’ve got someevents”. But the nice thing about using SAPUI5 I’ve described a couple of times is thatbecause I’ve combined the OData services, a lot of the standard events of the UI elementsare also already implemented inside the UI element. So that means that the sorting, thefiltering, and the scrolling are all things that are implemented for you and will automaticallyknow how to call the OData service with the corresponding URL parameters. You’ll see thatonce we've got our application running. I’ll use some developer tools to show you what’sgoing on behind the scenes and show you the URLs that are being generated.

00:04:35 So here...oh, I lost my template. One second, let me come back over to my other projectbecause you don’t want to watch me type all of this but I will go through it and explain toyou what all of this code is doing.

00:04:55 Most of it is very straightforward so in our createContent, this is where we render our userinterface. The first thing that we’re doing is we’re declaring a model object, we’re saying it isof a type, model.data.00DataModel. At this point we need only point it to the URL of ourxsodata service. Notice that we don’t specify any entity at this point. You create the modelfor the OData service itself and not any of the entities inside there.

Page 23 Copyright/Trademark

00:05:27 You’ll see in just a minute when we bind the table to that model, only then will we supply theentity and that’s how we can have a single model with multiple entities and thereforemultiple tables tied to the same service, just different entities in that service.

00:05:44 Next the rest of this is really just for rendering the table so here I’m creating a new tablecontrol. I say I want 10 rows visible at a time. I set a title into that table and then I go aboutcreating all of the columns for the table. Now, one thing that I could have done here thatwould have been a little more eloquent but would have been a little harder to understandfrom a source code standpoint is that I could have actually used the metadata of the ODataservice, made a call, gotten the metadata back, and then looped over the metadata andcreated my columns dynamically.

00:06:18 Now if this were a real production program, I would do that, personally, so that the columnsof the table dynamically adjust to whatever columns are available in the OData service.

00:06:29 But for the purpose of a learning exercise I thought it was simpler if we just hard code thecolumn names and the bindings to the data. So this is not necessarily what you want to dobecause I am assuming the names of the columns don’t change and I’m hard coding thecolumn descriptions so they’re not language-independent.

00:06:50 If we call them metadata, we would automatically get the OData service, which knowswhich language we’re logged into the Web site with and uses that to look up the columndefinitions and descriptions and pass them back in the metadata. So we would have a niceway of doing this dynamically, but like I said, that would have complicated the example a bitmore and I didn’t want to do that.

00:07:14 After we’ve added all of our columns we can set the model as the model for the table. Afterthat, we can create a sorter. A sorter will just tell the OData service and the table whichcolumns should be sorted by default. We’re going to have it automatically sort by thePartnerID, the key column of the table.

00:07:38 And then we tell the table bindRows. And at the point where we bind the rows, that’s whenwe give it the entity. So the table’s already associated with our OData service becausewe’ve given it the model, which is just a local representation of the OData service and nowit knows exactly which entity it’s bound to.

00:07:58 And this is also the point where we can pass in the sorter and it will put that sort criteria intothe first request to the OData service so the data comes back already sorted. Here we’rejust getting the number of rows so we can ask the table bindings the length of its rowsproperty and that will tell us how many rows it’s currently displaying and then we’re puttingthat into the title.

00:08:26 Then we return the table itself. So I think we got a good user interface here now. I’ll save allof my open files and I will commit everything back to my repository. And now I will activateall these new files and we’re ready to go to the user interface and have a look at this newapplication.

00:08:59 Workshop/sessiona00/ui/Exercises_UI/WebContent and we’ll just change which html pagewe’ll load. We want the xsodataTest.html. And here you see, here’s my table control, 10rows displayed and the ability to scroll into the data. It’s sorted by partner ID. I could changethe sort order, sort by Email Address instead. I can filter and come here and sort by all “AG”companies. So you see the sorting, filtering all working.

00:09:54 Now what might be interesting is to see what is going on behind the scenes when this istaking place. Now this is why I like to use Google Chrome, of course we support Firefox,Chrome, Internet Explorer, all the major browsers, with our user interface technology.

00:10:14 I like to test and develop in Chrome because I like the built-in developer tools. So withoutany extensions, just a standard feature of Chrome is the ability to go to Tools –> Developer

Page 24 Copyright/Trademark

tools. And one nice thing is you've got this little red X down here that shows you if there anysyntax errors. These are actually not errors. SAPUI5 always tries to query for the mostspecific text bundle, so it found an English text bundle but then it tried to find an English UStext bundle, which we simply don’t maintain that on the server side, we don’t maintain thedifference between English and English US. So when it made the request for that resourcewe got a 404.

00:10:57 But if I had had any syntax errors in my application—often with SAPUI5 or any JavaScript-based html user interface design environment—when you make a syntax error in theJavaScript it will often cause the entire page not to render and you’ll just get a blank screen.Without some of these developer tools to show you where your syntax error is or why you’regetting it, it would be very difficult to find your errors.

00:11:26 And I know that there are similar tools for other browsers, Firefox has some extensions thatwill add tools similar to this. Some colleagues use Internet Explorer and use HttpWatch,which is a third-party tool that you can purchase, but I like the Chrome tools becausethey’re already built into every version of Chrome.

00:11:50 Now one of the other things that we can see here is that I can go to Network and this willshow all the requests from the client to the server. This is really nice for looking at ourOData request. So if I would change the sort here to say sort by Partner ID, then you seethat there’s been a request to the server.

00:12:09 And if I go into this request, let me just show you some of the details here, it’s making arequest to our xsodata service, our business partners and it says $skip=0&$top45, so itknows we only have 45 records or scroll bars at the top so that’s why we got the skip0. Butthen the user interface element automatically added the orderby = PartnerId descending.We didn’t have to program that on the client side, we didn’t have to do any programming onthe server side. The user interface knows how to build these additional calls to the ODataservice. And this is part of the value of using OData services and using the SAPUI5 controlsto consume them.

00:12:56 Here I’ll do a filter now, you see we’ve got another request to the server now. And we’veadded the $filter, LegalForm=AG and once again we didn’t have to program any of that; it’sall handled for you. The OData service is dynamically performing the query on the serverside and on the client side the user interface element takes care of that event handler forus.

00:13:23 Now, one other thing that I’ll show you while I’m in here. in addition to just seeing the URLand, of course, the headers, I could also look inside the response object and even take apeek inside the data. So this is an excellent troubleshooting tool for when you are havingproblems. I’ll intentionally go back to my UI5 view and I’ll make a mistake here.

00:13:51 Let me incorrectly reference my OData service and I will save this and now I will reactivatethis. Now I do this on purpose and make this mistake on purpose for two reasons. First, Iwant to show you something. If I come back to the user interface and I just refresh, I’m stillgetting my data and you might be wondering well, he has the wrong OData service so whyis he getting his data?

00:14:25 Well, that’s because of .js files. JavaScript files are cached on the client side. So anytimeyou make a change to the view or the controller we have to go in and we have to clear ourbrowser cache on the client side in order for those changes to be picked up. So in Chromethere’s these nice tools, Clear Browsing Data, and I can say The Past Hour because I justcreated these objects.

00:14:50 Now when I refresh I don’t get any data. If this had happened initially I might be looking atthis going, “Oh, I got my table, it rendered correctly. Why do I not see any data?” And this isalso where the developer tools are very handy. So I’ll go ahead and I’ll turn on theDeveloper Tools and I’ll refresh the page. You’ll see a lot of loading here because we loadadditional libraries and text property files and everything.

Page 25 Copyright/Trademark

00:15:18 Right away I see that something's wrong because my OData service calls are all failing, I’mgetting a 404 Not Found. So right away, that metadata call and then the OData service callitself I got a 404 Not Found so I know I have some problems and based upon the statuscode. I know I probably put in the URL incorrectly as opposed to an authentication problemor some other HTTP error code.

00:15:43 So these developer tools are very important to troubleshooting because when you startdoing client-side development you can’t expect that I’m going to get a syntax check on theserver side for something like this. The code isn’t really being interpreted until it reaches theclient side. The same thing for if I would create some sort of syntax error.

00:16:05 We could do a few scans on the server side and look for problems, but it has to be reallybadly semantically incorrect. If I just reference the wrong object or I reference an initialobject or something like that, that can’t be determined until runtime. That means syntaxerrors often aren’t found until they reach the client side. Therefore you need goodtroubleshooting tools on the client side to be able to work through those kinds of problems.

00:16:31 In this week we seen the basics of our user interface technology that we make availablewith HANA. We’ve also seen how we can create OData services using the generic ODataservice generation framework and we’ve seen how we can combine those two together.

00:16:50 In the next week, we’ll continue the concept of building services and we’ll look at how wecan go beyond the limitations of the built-in OData service generation framework. What ifyou want to combine multiple tables together in a way that we can’t describe with entities?What if you want to do CREATE or UPDATE operations? Or maybe you want a custombody format or custom HTTP headers? In these cases, you wouldn’t use the OData servicegeneration framework, but you would custom code your own REST-based services usingserver-side JavaScript and that’s what we’ll see in the next week.

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form

or for any purpose without the express permission of SAP AG. The

information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors

contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP AG and its affiliated companies

("SAP Group") for informational purposes only, without representation or

warranty of any kind, and SAP Group shall not be liable for errors or

omissions with respect to the materials. The only warranties for SAP

Group products and services are those that are set forth in the express

warranty statements accompanying such products and services, if any.

Nothing herein should be construed as constituting an additional

warranty.

SAP and other SAP products and services mentioned herein as well as

their respective logos are trademarks or registered trademarks of SAP

AG in Germany and other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx

for additional trademark information and notices.

www.sap.com