Skip to Content
Actions

New E2E Tutorial: Gain Hands-on Developer Experience with SAPUI5 and SAP NetWeaver Gateway

December 10, 2012 | 1,968 Views |
 abapas abapend-to-endgatewayhtml5netweavernetweaver as abap
Follow

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.

/wp-content/uploads/2012/12/e2etutui5gwpic1_163415.png

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

  • How to install the NetWeaver Gateway as add-on to your SAP NetWeaver AS ABAP backend
  • How to activate and configure SAP NetWeaver Gateway
  • How to test a delivered demo OData service

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.

/wp-content/uploads/2012/12/e2etutui5gwpic7_163880.png

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

  • How to use Gateway Service Builder to centrally display and create the definition of a simple OData service based on an ABAP Dictionary structure provided by the SAP NetWeaver ESPM proxy application
  • How to implement a data provider with paging and sorting logic

We describe most steps in textual form but often use graphically annotated screenshots with (numbered) arrows and rectangles that show you what to do.

/wp-content/uploads/2012/12/e2etutui5gwpic8_163881.pngFor 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).

/wp-content/uploads/2012/12/e2etutui5gwpic9_163882.png

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

  • Where to find detailed documentation and SAP Notes on how to install the UI add-on for SAP NetWeaver 7.31 in your AS ABAP 7.31 backend system
  • Where to find Installation Guide and SAP note for setting up the SAPUI5 development tools in your Eclipse design time together with the ABAP developer tools for SAP NetWeaver

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.

/wp-content/uploads/2012/12/e2etutui5gwpic4_163418.png

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

  • How to building and deploy the SAPUI5 application
  • The concepts basics of the SAPUI5 application architecture and programming model
  • How to use the SAPUI5 ABAP Team Provider to share application resources on the ABAP server
  • How to consume a Gateway Service in SAPUI5
  • How to use the SimpleProxyServlet for local testing

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.

/wp-content/uploads/2012/12/e2etutui5gwpic10_163891.pngOne 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.

/wp-content/uploads/2012/12/e2etutui5gwpic2_163416.png

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) .

/wp-content/uploads/2012/12/e2etutui5gwpic3_163417.png

Our final SAPUI5 application looks like this:

/wp-content/uploads/2012/12/e2etutui5gwpic5_163419.png

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

To report this post you need to login first.

23 Comments

You must be Logged on to comment or reply to a post.

    1. Bertram Ganz Post author

      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

      (0) 
      1. Neeta Thankachan

        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

        (0) 
  2. Amit Nalawade

    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 .

    (0) 
    1. Bertram Ganz Post author

      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

      (0) 
  3. Sandip Agarwalla

    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

    (0) 
    1. Bertram Ganz Post author

      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

      (0) 
  6. Dominik Espitalier

    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

    (0) 
  7. Bertram Ganz Post author

    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:

    To code or not to code ….

    After having read several posts in this area where people were struggling with using our generators I realized that we have plenty of How-To-Guides out that show how to generate OData services for SAP NetWeaver Gateway based on BW Easy Queries, RFC Function Modules, SPI objects but that there is no How-To-Guide out that simply shows how to actually develop a Gateway service. Read more  …

    (0) 
  8. Bertram Ganz Post author

    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:

    • Used Gateway service name: ZGW_PRODUCT_01_SRV instead of Z_EPM_PRODUCTS in the tutorial
    • Used Entity set name: Products instead of EpmProducts in the tutorial

    Enjoy learning SAPUI5 on Gateway even better and faster with the new AS ABAP 7.4 trial edition.

    Regards, Bertram

    (0) 
  9. Swanand Sarpotdar

    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

    (0) 
  10. Mandar Kulkarni

    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.

    (0) 
  13. Samuel Tanor-Gyedu

    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.

    odataError1.PNG

    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

    (0) 

Leave a Reply