New E2E Tutorial: Gain Hands-on Developer Experience with SAPUI5 and SAP NetWeaver Gateway
This blog is a trailer for or short introduction in our End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services.
Table of contents
Overview
End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services
Objective: Provide comprehensive knowledge on how to get quickly started with SAP NetWeaver Gateway, Gateway Service Builder, SAPUI5 design time tools (including SAPUI5 ABAP Team Provider to store UI5 projects in ABAP backend) and the SAPUI5 client-side programming model (OData model for Gateway service consumption, data binding and how UI5 applies the MVC paradigm). With this single document you can rapidly gain developer experience in the newest SAP development tools for quickly building lightweight business UIs.
Summary: The how-to guide describes the end-to-end process required to develop a SAPUI5/HTML5 application user interface (with table, popup and ux3 shell) consuming a local Gateway OData service. The application runs on SAP NetWeaver AS ABAP 7.31 SP4 with two add-ons installed. Firstly, the SAP NetWeaver Gateway 2.0 SP4 add-on to build an OData service in the application backend using the Gateway Service Builder. The created OData service is based on the SAP NetWeaver Enterprise Sales and Procurement Model as a pre-installed demo/proxy application that provides a list of products as business data. Secondly, our end-to-end scenario requires the UI add-on 1.0 for SAP NetWeaver 7.31 to build a SAPUI5 application frontend with Eclipse-based SAPUI5 tools and to deploy it on the ABAP server using the SAPUI5 ABAP Team Provider. The described end-to-end process starts in a development system landscape, where we assume that all the necessary components will be installed on a single system.
Applies to: SAP NetWeaver AS ABAP 7.4, SAP NetWeaver AS ABAP 7.03/7.31 SP4 (comprised in EhP6 for SAP ERP 6.0, SAP Business Suite 7 Innovations 2011), UI development toolkit for HTML5 1.6.4 (comprised in UI add-on 1.0 SPS01 for SAP NetWeaver 7.03/7.31), SAP NetWeaver Gateway 2.0 SP04, ABAP Development Tools for SAP NetWeaver, Eclipse ‘Classic’ IDE package (or higher versions 3.6.x ‘Helios’, 3.7.x ‘Indigo’, 4.2.x ‘Juno’)
Target Group: Develpers, architects, consultants, project leads and decision makers who want to gain first hands-on developer experience or who start dev projects with the UI development toolkit for HTML5 (aka SAPUI5) consuming SAP NetWeaver Gateway OData services.
Tutorial PDF: End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services
What’s covered?
The purpose of this end-to-end example is to show many of the capabilities of SAP NetWeaver Gateway and the UI development toolkit for HTML (SAPUI5). The used SAP NetWeaver platform is based on AS ABAP 7.31 SP4 with two installed add-ons: UI add-on for SAP NetWeaver 1.0 to use SAPUI5 and SAP NetWeaver Gateway 2.0 SP4 to build an OData service.
The example uses the following features:
- SAP NetWeaver Gateway add-on with Service Builder for OData service consumption in local ABAP system
- UI add-on for SAP NetWeaver with SAP’s new UI development toolkit for HTML5 to quickly build a lightweight and stateless business UI running in a browser client
- SAP NetWeaver Sales and Enterprise Procurement Model as a demo/proxy application providing business data (list of products)
- SAPUI5 application development tools integrated in an Eclipse IDE
- SAPUI5 ABAP Team Provider to deploy a SAPUI5 application project on the ABAP server
- SAPUI5 control libraries sap.ui.commons and sap.ui.ux3 to build the MVC-based application UI with a ux3 shell and a pageable/sortable table control
- SAPUI5 Dialog control to display product details for a selected product (table event handling)
- SAPUI5 core library sap.ui.model.odata to easily consume a local Gateway OData service providing a list of products (OData entity set)
- SimpleProxyServlet (provided by the SAPUI5 core JS framework) to comply with the same-origin-policy in a local dev/test scenario
ℹ Note, that the following more advanced topics ARE NOT COVERED in this end-2-end tutorial:
-
Gateway as a Hub installation (separate foundation and backend enablement), reverse proxy, SAP NetWeaver Gateway routing
-
SSO logon page and logout
-
Navigation within an OData service
-
Navigation to other existing applications
-
Custom theming and CSS
-
Enhancing existing SAPUI5 controls and implementing own controls (named notepade controls)
Can I also run this E2E tutorial on SAP NetWeaver 7.02?
Yes, you can also run this end-to-end tutorial on a lower EhP2 for SAP NetWeaver 7.0 release (comprised in EhP5 for SAP ERP 6.0/SAP Business Suite 7 Innovations 2010, with SAP NetWeaver Gateway 2.0 and the UI add-on 1.0 SPS1 for SAP NetWeaver 7.02 installed) with the limitation, however, that the SAPUI5 application resources cannot be stored in the ABAP backend using the new SAPUI5 ABAP Team Provider (requires SAP NetWeaver 7.03/7.31 SP4).
In this case the developed SAPUI5 sample application is tested locally based on the SAPUI5 runtime libs provided by the SAPUI5 development environment.
As a simple solution for the missing SAP ABAP Team Provider in SAP NetWeaver 7.00 to 7.31 SP03, SAP will offer an up-/download-report to connect the local SAPUI5 project from Eclipse to the SAPUI5 ABAP Repository. See SAP Note 1793771 for more details (this note might not be released yet, but it will be available very soon mid of december 2012).
End-to-end sample application architecture
The development scenario and architecture of the entire sample application developed in this document is illustrated in the below figure. The tutorial focuses on UI and service definition using the corresponding IDE tools.
End-to-end tutorial steps
The end-to-end tutorial is structured in four main parts:
Installing SAP NetWeaver Gateway on SAP NetWeaver AS ABAP
 |
Shows how to install and set up SAP NetWeaver Gateway locally on your AS ABAP application backend |
What You will learn
|
The tutorial contains blue text boxes with short descriptions of important product components or technical terms. You can find more detailed information by following the links listed below the description text.
Creating a local Gateway OData service
 |
Shows how to create, implement and test an OData service for the EPM entity ‘Product’ using the Gateway Service Builder |
What You will learn
|
We describe most steps in textual form but often use graphically annotated screenshots with (numbered) arrows and rectangles that show you what to do.
For sake of better understanding the Gateway OData service to be created we will not completely generate it but manually implement the data provider base class with sorting and paging logic in ABAP (see below screenshot on the development flow for the OData service definition using the Gateway service Builder and on the implementation of class ZCL_EPM_PRODUCTS_DPC (Data Provider) with method EPMPRODUCTS_GET_ENTITYSET).
Setting up your SAPUI5 development environment on SAP NetWeaver AS ABAP
 |
Outlines the installation of the UI add-on for SAP NetWeaver AS with the SAPUI5 Runtime Library and the installation of SAPUI5 development tools in an Eclipse IDE |
What You will learn
|
The installation steps are not explained in detail but you get all required information (SAP notes and installation guides) to successfully set up your development environment.
Building & running the SAPUI5 application UI consuming a Gateway service
 |
Shows how to build and deploy the SAPUI5 application to the SAP NetWeaver AS ABAP |
What You will learn
|
Besides the description of tool procedures needed to create SAPUI5 application artifacts and to store them in the SAPUI5 ABAP Repository on backend side we also have a closer look at the JavaScript coding details. As and example you learn the differences between the SAPUI5 bootstrap and application scripts and how SAPUI5 applies the Modev-View-Controller principle.
One important highlight of SAPUI5 is its front-end model layer that implements a RESTful OData model for optimized interaction with the back end via SAP NetWeaver Gateway. We have a closer look at how Gateway service consumption concretely works in your SAPUI5 application. You will be surprised how little you have to code.
Another question we aswer in our end-to-end how-to guide is “How to comply with the Same-Origin Policy in a Development or Test Scenario”. We show how to use the SimpleProxyServlet provided by SAPUI5 as an intermediary for requests to both servers (web server in Eclipse Design Time and Gateway server in ABAP backend). Note that this solution is needed in a development scenario where you want to rapidly and repeatedly test your SAPUI5 application in local Eclipse design time (befor deployment to the SAPUI5 ABAP repository on ABAP backend side) .
Our final SAPUI5 application looks like this:
It contains a sortable and scrollable table control with a list of products (retrieved from the SAP NetWeaver Enterprise Sales and Procurement Model via Gateway ODate service). By clicking on a product image a small popup dialog opens and displays some product details. For this we explain how to implement a SAPUI5 popup control together with the event handling and data binding logic. Note, that the table is embedded in a simple ux3 shell control (just title and header texts).
Now, start working through our End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services.
Enjoy SAPUI5 and Gateway running on SAP NetWeaver AS ABAP 7.31,
Bertram Ganz, Bernhard Siewert, SAP AG
Dear Bertram,
Thanks for the tutorial, but I have the SAP Netweaver Server 7.3.1 Trial version, I can reproduce this example in the trian version? This is the gateway version that I have to download? http://www.sdn.sap.com/irj/scn/downloads?rid=/library/uuid/2028be73-8c84-2e10-4185-8cfb5d2e22bb
Do you have examples of Abap development Tools with sap hanna o java that I can reproduce with the trial version?
Thank you very much!
Hallo Alex, the SAP NetWeaver AS ABAP Trial versions on SCN (see this downlolad page ..., also contains the ABAP Development Tools for SAP NetWeaver Trial) do not contain any NetWeaver Add-ons like Gateway 2.0 or the UI add-on (required for this tutorial). You would have to manually install both add-ons on your AS ABAP trial system, but the trial was not tested for this purpose (like here ... The specified item was not found.).
I'll send an update here, as soon as I know more/new options to build and run our end-to-end tutorial with another set-up.
Regards, Bertram
Hi Bertram,
I am not sure if its the right forum but would like to get expert guidance on once a SAP ui5 applications is completely developed how can it be developed and tested on a customer on premise server ?What are the steps to be followedto deploy to the server and how the application can be connected to the customer gateway system.
When developing an application locally with eclipse we can do the deployment to the server and to redirect to the gateway system the web.xml has the path. .
But i am not aware how can we deploy it in a customer server and how to do the server redirection to the gateway system .
Looking forward for your valuable reply.
Thanks and Regards
Neeta
Hi Bertram,
We are trying to implement this .We were able to carry out majority of the steps successfully .When we run the app in browser , all UI elements are loaded up perfectly .But we cannot see any data .
Any ideas on this front ?
Thanks .
Hi Amit, check A/ whether you correctly (same as in ABAP backend) named the OData service in your UI5 view controller's onInit() method: sap.ui.controller("epmproductsapp.ProductList", {... this.getUrl("/sap/opu/odata/sap/z_epm_products/");´... },}); You probably added suffix _srv in the backend -> z_epm_products_srv B/ whether you correctly configured the SimpleProxyServler in EPMProductsApp/WebContent/WEB-INF/web.xml Regards, Bertram
Hi Bertram
Thanks for this excellent write-up..
Have a quick question - what is the installble required to run UI5 apps on 7.3 JAVA Engine? Same UI Add on?
Thanks
Sandip
Hi Sandip,
to run UI5 apps on SAP NetWeaver CE 7.31 you require SPS05, see What's new in NetWeaver BPM 7.31 SP05, section 'Open UI integration' for more details. In SAP NetWeaver CE 7.31 SPS05 the UI development toolkit for HTML5 is delivered as Software Component and not as part of an add-on. The UI add-on is for SAP NetWeaver AS ABAP 7.0-7.03/7.31 not for AS Java.
Regards, Bertram
Thanks for your reply, Bertram
And if I have to develop these UI5 app on 7.3 Java server, not CE7.31 - what is the runtime to be installed?
Regards
Sandip
Bertram, why is Note 1793771 not released?
Hi Stefan,
SAP Note 1793771 - Up/Download SAPUI5 Application into/from SAPUI5 Repository was released yesterday on 8th January 2013.
Regards, Bertram
Thanks for the information. I was looking for the same with a sample.
I got a question for you.
If I am using the SAP NW Gateway 2.0 provided by SAP for 30 day trial (http://scn.sap.com/community/developer-center/netweaver-gateway) do I need to install the add ons in order to test the SAP UI 5?
Hi Bertram,
I have one question about this nice tutorial. Is it possible to consume the Gateway-Service without deploying the UI5-application on the ABAP AS? Cause we haven't install the UI Interface Addon on it, yet.
I added a Tomcat v7.0 server in eclipse and deployed the UI5-application on it. I copied the url of the gateway-service to the ProductList.controller.js and added my user and pw of the IDES on which the gateway-service is deployed. But when I call the application in the web-browser, I only get an empty table without any information of the products.
I would be very happy for any information.
Best Regards,
Dominik
I allready solve the Problem by myself. It was a cross-browser problem. Is it possible to consume the odata-service with jsonp?
Regards
Dominik
gateway service consumption doesnt seem to work on safari ( iOS ) .anybody has found a way out ??
An interesting blog that is related to our end-to-end tutorial on SAPUI5 and Gateway was published by Andé Fischer, the product manager for SAP NetWeaver Gateway:
You can now run this "SAPUI5 on SAP NetWeaver Gateway" end-2-end sample application out-of-the-box on the SCN Trial Edition of SAP NetWeaver Application Server ABAP 7.4.
The only differences are names:
Enjoy learning SAPUI5 on Gateway even better and faster with the new AS ABAP 7.4 trial edition.
Regards, Bertram
Hi Bertram,
Thanks so much for sharing the useful tutorial. Per this document, aftet I implemented step 'Implementing the Data Provider Class ZCL_EPM_PRODUCTS_DPC with Paging and Sorting Logic' and tested the result with the url http://jq02a040.esc.win.colpal.com:8000/sap/opu/odata/sap/Z_EPM_PRODUCTS_SRV/EpmProducts/?$format=json
It returns no value. It looks like the EPM doesn't have data in our system. We have set up a NW Gateway Hub (Centralized System). So not really sure it would have any data.
I would appreciate if you could share suggestion, if any.
Thank you in advance!
Swanand
Hi Bertram,
Thanks for this excellent blog... As many of mentioned, the Webpage successfylly loads the UI but it doesnt show up any data in it. We had the similar situation. It is the cross domain issue for sure. (Read about CORS for android) We could resolve it by installing the reverse proxy server. Manual authentication for SAP Backend is also required in some cases.
Hope this will help who still having the issue.
-Mandar Kulkarni.
Nice Blog.
Hi Bertram,
Very Good blog
Thanks a lot for sharing this
Regards,
Vivek
Hi Bertram,
I have an odata service with this endpoint https://s5hanaxs.hanatrial.ondemand.com/.../services/User.xsodata
I am now trying to consume it from eclipse with the odata4j libraries.
This is how I get the endpoint.
public UserServiceOdata(String endpointUri) {
this.endpointUri = endpointUri;
ODataConsumer.dump.responseHeaders(true);
consumer = ODataConsumers.create(endpointUri);
}
This is my method to add a user.
public User addUser(User user) {
consumer.createEntity(entitySet).properties(OProperties.int32(propertyUserId, user.getId())).properties(OProperties.string(propertyUserName, user.getName())).properties(OProperties.string(propertyUserEmail, user.getEmail())).execute();
return user;
}
When I call addUser method I get an Error:
Caused by: javax.xml.stream.XMLStreamException: ParseError at [row,col]:[78,253]
Message: The reference to entity "sourceUrl" must end with the ';' delimiter.
When I use this endpoint https://s5hanaxs.hanatrial.ondemand.com/.../services/User.svc everything works fine. With the https://s5hanaxs.hanatrial.ondemand.com/.../services/User.xsodata I get errors.
Please I would be very grateful for assistance.
Thanks in advance.
Regards,
Samuel
Dear Bertram,
It's simply awesome blog, well explained.
Thanks it's great help.
Warm Regards
Hemendra
Thanks and well done. This is a really good tutorial.