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 Gatewa....
Table of contents
Overview
End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData ServicesObjective: 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 Gatewa...
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 Gatewa....
Enjoy SAPUI5 and Gateway running on SAP NetWeaver AS ABAP 7.31,
Bertram Ganz, Bernhard Siewert, SAP AG
- SAP Managed Tags:
23 Comments
