Applies to: SAP NetWeaver AS ABAP 7.03/7.31 SP4 (comprised in EhP6 for SAP ERP 6.0, SAP Business Suite 7 Innovations 2011), Ul development toolkit for HTMLS 1.6.4 (comprised in UI add-on 1.0 SPSO1 for SAP NetWeaver 7.03/7.31), SAP NetWeaver Gateway 2.0 SPO4, 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’) Note: You can also run this end-to-end tutorial on a lower ENP2 for SAP NetWeaver 7.0 release (comprised in EPS for ‘SAP ERP 6.0, SAP Business Suite 7 Innovations 2010) combined with SAP NetWeaver Gateway 2.0 and the Ul add-on 1.0 SPS1 for SAP NetiVeaver 7.02 withthe limitation, however, that ne SAPUIS 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 SAPUIS sample application is tested locally based on the SAPUIS runtime lbs provided by the ‘SAPUIS development environment. AS a simple solution for the missing SAP ABAP Team Provider in SAP NetWeaver 7.00 to 7.31 SPO3, SAP wil offer an up-/download-report to connect the local SAPUIS project from Eclipse to the SAPUIS BAP Reposttory (see SAP Note 1795771 for more details). Summary This document describes the end-to-end process requited to develop a SAPUIS/HTMLS 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 Net\Veaver Enterprise Sales and Procurement Model as a pre- installed dema/proxy application that provides a list of products as business data. Secondly, our end-to-end scenario requires the Ul add-on 1.0 for SAP NetWeaver 7.31 to build a SAPUIS application frontend with Eclipse-based SAPUIS 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, Prerequisite: the reader should be familiar in general with SAP GUI hanaling and especially with the SAP Customizing Implementation Guide (transaction SPRO) and with the ABAP Workbench (transaction SE60) Authors: Bertram Ganz, Bemhard Siewert Acknowledgement Company: SAP AG Many thanks to development architect Thorsten Erlewein, . SAP AG, for his excollant support, valuable feedback and Created on: 29 November 2012 helpful suggestions included in this article. Author Bio Bertram Ganz works in SAP NetWeaver Product Management in Walldort, Germany. He joined SAP in 2001, and has focused on product management and knowledge transfer for = J) Various SAP U! technology offerings like Ul add-on for SAP NetWeaver, Ul development toolkit yj for HTMLS (aka SAPUI5), Web Dynpro ABAP, Floorplan Manager, Web Dynpro Java and SAP NetWeaver Business Client. Bertram is the co-author of the books "Maximizing Web Dynpro for Java’ and "Java Programming with the Web Application Server". 2005-2008 he was recognized as a Top Contributor for the SAP Community Network in the Web Dynpro Java category. P Bernhard Siewert works as a development architect in the SAP Product Architecture for f ») Consumption and Collaboration tcam. He joined SAP in 1992 and spent soveral years as a =e=| developer and consultant for SAP NetWeaver. Since 2001 he has been an architect for the <= SAP NetWeaver Ul team in various SAP internal and customer projects. In 2010 he joined the as. Product Architecture team, where he focuses on User Interface Interoperability topics. SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AGEndb-o.End How-t0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Table of Contents Table of Source Codes. Table of Figures..... a 3 Overview. 4 End-to-End How-To Guide Stops - cc SANE End-to-End Sample Application Architecture. 5 Building the Application Backend with SAP NetWeaver Gateway. 5 Installing SAP NetWeaver Gateway on SAP NetWeaver AS ABAP 5 ‘Activation and Configuration of SAP NetWeaver Gateway 6 Activating and Testing a delivered Demo OData Service : Implementing and Testing a local OData Service with the SAP NetWeaver Gateway Service Buller... 10 Importing the Data Model from ABAP DIC structure with SAP NetWeaver Gateway Service Builder 4 (Creating Entity Set ‘EpmProducts' for the Entity Type 'EpmProduct 13 Generating and Registrating the new Gateway Service. Implementing the Data Provider Class ZCL_2_EPM_PRODUCTS_DPC_EXT with Paging and Sorting Logic Building the Application Frontend with the Ul Development Toolkit for HTMLS.. SAPUIS Application Frontend Architecture Setting up Your Development Environment. . Instalaton of user Interface adeion 1.0 fer SAP NetWeaver (SAPUIS, U2 Series, Ul2 Backend...) Instaling SAPUIS development tools (Eclipse, SAPUIS ABAP team provider...) ‘SAPUI5 SDK - Demo Pages and Documentation Implementing the application frontend with the Ul development toolkit for HTMLS (SAPUI5) Creating an Application Project for SAPUIS with a JavaScript View . Using SAPUIS ABAP Team Provider to deploy the SAPUIS Application Project on the ABAP Server Testing the SAPUIS Application Locally, Testing the SAPUIS Application on the ABAP Server. Understanding the SAPUIS Application Code (Basics). ‘Consuming an OData Gateway Service for Product Data retrieval in SAPUIS Handling image Control Events, Starting and Testing the complete SAPUI6 Application How to comply with the Same.Origin Policy in a Development or Test Scenario. Embedding @ SAPUIS view into a ux3 Shell control. Related Content a SAP NetWeaver Gateway Ul Development Toolkit for HTMLE.... Ul add-on for SAP NetWeaver. Copyright... Seaees ‘SAP COMMUNITY NETWORK ‘sen sap.com (©2012 SAP AG 2Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Table of Source Codes Source Code 1 Cass ZCL_Z_EPM PRODUCTS _DPC_EXT (Data Provide) redefine method EPMPRODUCTS_GET_ENTITYSET .. Source Code 2: Class Z0l_Z_EPM PRODUCTS DPC. EXT (Data Provider), redefined method EPMPRODUCTS_GET_ENTITY. 22 Sourae Code 3: JavaScript vew Preduetisvow in SAPUISapplcalion EPMProduclsApp/Wab Contentiepmproductsapp .. ‘Source Code 4: index.html in SAPUIS epotcation (in folder WebContent).. Source Code 5: JavaScript view Product ist view js in SAPUIS application EPMPreductsApp eb Contentiepmproductsapp 35 Hs ie ia wel crore catheter AP xn gl ection 20 32 35 ProductList controller... 36 Source Code 7: Table Ul creation with property and aggregation binding to the OData model in Product ist.view js 38 ‘Source Code 8: Handling image control events in controller ProductList.controller js... 40 Source Code 9: Proxy configuration in EPMProductsAppiWebContentWEB-INF/web.xml using the SimpleProxyServiet 44 ‘Source Code 10: Helper method getUrl() in ProductList view controller to calculate same-origin policy compliant URL 44 Source Code 11: Calling the getUrl() helper method to get proxy compliant service and image URLS ......A5 Source Code 12: Embedding the product lst view into a ux3 shell control within the index.html page.......46 Table of Figures Figure 1: Development scenario and architecture of the SAPUIS sample application developed In this endo. Ghd SION ac ccmansnaiscancincemasiseciuc 5 Figure 2: Development flow for OData service definition using the Gateway Service BUIGET...uncnnentt Figure 3: OData service artifacts created for the ‘Product’ entity of SAP NetWeaver ESPM...... lt Figure 4: Gateway service artifacts created by Gateway Service Builder. 16 Flas 8 Arclplic of S8RUB samo plan oniond wih Galway serio consureton (ine, view! Figure 6: Installation of SAPUIS ABAP Team Provider to connect to an ABAP backend system on SAP NetWeaver 7.31 29 Figure 7: Gateway service consumption in SAPUIS explained 36 Figure 8: Same-origin policy in development and productive scenarios. 42 Figure 9: Using the SAPLIS SimpleProxyServet to comply with sameorgin poly in a development scsnatio SAP COMMUNITY NETWORK ssensap.com © 2012 SAP AG 3Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Overview ‘The purpose of this end-to-end example is to show many of the capabilities of SAP NetWeaver Gateway and the Ul development toolkit for HTML (SAPUIS), The used SAP NetWeaver platform is based on AS ABAP 7.31 SP4 with two installed add-ons: Ul add-on for SAP NetWeaver 1.0 to use SAPUIS 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 + Uladd-on for SAP NetWeaver with SAP's new Ul development toolkit for HTMLS to quickly build a lightweight and stateless business Ul running in a browser client + SAP Ne(Weaver Sales and Enterprise Procurement Model as a demolproxy application providing business data (lst of products) + SAPUIS application Development Tools integrated in an Eclipse IDE + SAPUI5 ABAP Team Provider to deploy a SAPUIS application project on the ABAP server + SAPUIS control libraries sap.ui. commons and sap.uiux3 to build the MVC-based application Ul with 4 ux3 shell and a pageable/sortable table control + SAPUIS Dialog control to display product details for a selected product (table event handling) * SAPUIS core library sap.ui,model.odata to easily consume a local Gateway OData service providing alist of products (OData entity set) + SimpleProxyServiet (provided by the SAPUI5 core JS framework) to comply with the same-origin- policy in a local devitest scenario End-to-End How-To Guide Steps We recommend that you follow these end-to-end tutorial sections in the specified order: Step What You will learn Step Installing SAP NetWeaver Gateway on + Howto install the NetWeaver Gateway as add-on to ‘SAP NetWeaver AS ABAP your SAP NetWeaver AS ABAP backend 1 Shows how to install and set up SAP ‘+ How to activate and configure SAP NetWeaver NetWeaver Gateway locally on your AS Gateway ABAP application backend ‘+ How to test a delivered demo OData service Step Creating a local Gateway OData Se + How to use Gateway Service Builder to centrally 2 ‘Shows how to create, implement and test an display and create the definition of a simple OData ‘Obata service for the EPM entity Product’ _ Service based on an ABAP Dictionary structure Using the Gateway Service Builder provided by the SAP NetWeaver ESPM proxy pplication ‘+ How to implement a data provider with paging and sorting logic Step Setting up Your SAPUIS Development + Where to find detailed documentation and SAP Environment on SAP NetWeaver AS Notes on how to install the Ul add-on for SAP 3 ‘ABAP NetWeaver 7.31 in your AS ABAP 7.31 backend ‘Outlines the installation of the Ul add-on for system - SAP NetWeaver AS with the SAPUIS ‘= Where to find Installation Guide and SAP note for Runtime Library and the installation of setting up the SAPUIS development tools in your SAPUIS5 development tools in an Eclipse IDE Eclipse design time together with the ABAP developer tools for SAP NetWeaver Step Building & Running the SAPUIS + How to bulging and deploy the SAPUI5 application application Ul consuming a Gateway + The concepis basics ofthe SAPUIS application A. Service architecture and programming model ‘Shows how to build and deploy the SAPUIS* How to use the SAPUIS ABAP Team Provider to application to the SAP NetWeaver AS ABAP —_ share application resources on the ABAP server ‘+ How to consume a Gateway Service in SAPUIS How to use the SimpleProxyServet for local testing SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AC 4Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services End-to-End Sample Application Architecture Development scenario and architecture of the entire sample application developed in this document is illustrated in Figure 1. The tutorial focuses on UI and service definition using the corresponding IDE tools. Application CLIENT ‘SAPUIS Tools} Service Builder ae Oe creat ‘Application / Business Logic (SAP NetWeaver ESP€) Ee Application Artifacts ray DESIGN TIME Pen ase Figure 1: Development scenario and architecture of the SAPUIS sample application developed inthis end-to-end tutorial Building the Application Backend with SAP NetWeaver Gateway Installing SAP NetWeaver Gateway on SAP NetWeaver AS ABAP If there is an application backend development system with SAP NetWeaver release 7.02 or 7.34 all the NetWeaver Gateway components can be installed on this system. These components can be downloaded from the SAP Service Marketplace hitpu/service.sap.com/swdc (see Screenshot 1) and have to be installed with transaction SAINT (documentation), Screenshot 1: SAP NetWeaver Gateway 2.0 on SAP Service Marketplace SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AG 5Endl-o.£nd How-t0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services What is SAP NetWeaver Gateway? SAP NetWeaver Gateway Is a technology that provides a simple way to connect devices, environments and platforms to ‘SAP software based on market standards, The framework enables development of innovative people centric solutions bringing the power of SAP business software into new experiences such as social and collaboration environments, ‘mobile and tablet devices and rich internet applications. It offers connectivity to SAP applications using any programming, language or mode! without the need for SAP knowledge by leveraging REST services and OData/ATOM protocols. © SAP Online Help: hito/help.sap.com/nugateway, © SCN Space: hitps/scn.sap.conveommunityinetweaver-aateway. © YouTube Channel: © Article: SAP Technical Brief - SAP NetWeaver Gateway. The following Gateway components are required for an OData service enablement of applications (OData Channel): + GW_CORE 200, + IWLFND 250 (requires an installation of a corresponding WEBCUIF) + IMCBEP 200 Further information on the SAP NetWeaver Gateway installations, its prerequisites, and information on the ‘Add-On Installation Tool (SAINT) can be found in the SAP Help Portal (SAP NetWeaver Gateway - Installation Guide). Note: If you would lke to use for the application frontend development the UI Development Toolkit (aka SAPUIS) including the SAPUIS ABAP Repository Team Provider to store and synchronize the UI artifacts in the application backend, you have to select the component Gateway Server Core NW 7.03/7.31. This tool Is currently not available on SAP NetWeaver 7.02. Activation and Configuration of SAP NetWeaver Gateway The configuration of SAP NetWeaver Gateway can be found within the SAP Customizing Implementation Guide (IMG) ~ transaction SPRO. At frst the user, who configure Gateway, has to get administration authorizations - SAP delivers the role templates WFND/RT_ADMIN and /IWBEP/RT_MGW_ADMIN. These templates should be used for the definition of the Gateway administrator role, which has to be assigned to the user (SAP Online Help on creating and assigning roles). Afterwards this User can activate the NetWeaver Gateway in the IMG: * “o, Gustomang implementation Guide| iccanertea . SAP NetWeaver > Gateway Service Enablement . Gateway - ‘0Data channel ¥ ‘configuration . User Settings + By ® dete Role for SAP NetWeaver Gateway User + By ® Define Role for SAP NetWeaver Gateway Admnistrator * By © Enhance Role for SAP Netwveaver Gateway SAP System User oe comectn sng a» “|B @ Actvate or Deactivate SAP NetWeaver Gateway ™ nirweton Capoeson >” oats chanel evap wth Ve pessoa > ceneslotnos Sereenshot 2: Configuring SAP NetWeaver Gateway within the SAP Customizing Implementation Gulde (transaction SPRO) If Gateway itself has been activated the existing IF node (Intemet Communication Framework) for Gateway (OData services has to be activated in transaction SICF (documentation). SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AG 6Endb-o.End How-t0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services ‘veruole Hosts /Servces_Documentaton Referens Serice YC deta nos. \VIRTUAL DEFAULT HOST © opton [RESERVED SERVICES AVAILABLE GLOBALLY > © pubke PUBLIC SERVICES > © 0001_bnges fi “Bn ‘Application Piatform A new Tata defahost/ean/& FRISCH > (@ y_NEW_TEST |oo > GB oara 'xpermental Odata Vocabulary hander ~ @ op (OUata for SAP Products ga > Galea (scncaa Mode > (@sdata | Corpatbity Mode for SP 02 > Btetr test > Bucs —_lutinodeforstata + @ Pom_winceT |pow. wipseT Sereenshot 5: Activating ICF node ‘odata! for Gateway OData services Since Gateway is able to call service implementations in different systems all services have to be assigned toa System Alias (based on an RFC destination). To be consistent a system alias has to be created for local service calls with RFC destination NONE (Screenshot 4 and Screenshot 5). ‘What is the Open Data Protocol (OData)? (Data Is a Microsoft developed extension tothe Atom Publishing and Atom Syndication standards, which in turn, are based on XML and HTTP(S). It was designed to provide a standarcized implementation of a RESTful API. In doing so, it offers database-Ike access to server-side resources. Hence, OData has Deen described as: “ODBC for the Web’. It can be used freely without the need for a license or contract. OData is also extensible. This allows SAP to supplement the data types used by OData with extra Information trom the ABAP Data Dictionary. © SAP Online Help: SAP NetWeaver Gateway and OData Display IMG SDS | cammngacsats cove setetorscnuey kcmarad ac set rorActny Release ‘souctwe © s customang rolmnaton Gute = B® Acthate Busnes Functions + sapnetweanee > Gateway eric Entmant ~ Gaenay Yoni canne configuration > User Sats ~~ canacsonSetinge = BD connect SAP WetenverGatenay to LD 2 SAP NetneaverGatenay to Cnsurer © sab nexwemerGateay to SAP Sytem + BG worage nrc Destnatons + BG tne rr fer oP buses Stars BS hese te rtd ~ [© Wantan Context Based SAP System Alases 3 @ kcomeeoroencvat sad ener ana > Remniraton Sereenshot 4: Managing SAP system allases SAP COMMUNITY NETWORK ‘sen sap.com (©2012 SAP AG TEndlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Change View "Manage SAP System Aliases": Overview F rence BRORER Manage SAP Sater Ales SAP Stem As Dastoton Leal FortoalAsp RFCDestaton ——_Sftmare Vo ocx @ % None enamiz Toot see Locale Ae none veraniz Sereenshot 5: Edlting SAP System Allas LOCAL Activating and Testing a delivered Demo OData Service Having setup the configuration of SAP NetWeaver Gateway an already existing and delivered service (/TWEND/RY: EFLIGHT) can be activated, and after having the system alias assigned to the service it can be tested right from the SAP Customizing Implementation Guide (transaction S220). > Gateway Sere Eablet ~ Gatewar BO Batre Vee San Pte Sereenshot 6: Activa tnd maintaining an ODAts servies in SAP NetWeaver Gateway Within the Service Catalog you will get a list of all activated Gateway services. If there is already the service with the external service name RMTSAMPLEFLIGHT and if the ICF node is activated and a system alias is specified, you can directly test the service with the Cail Browser button (Screenshot 7, arrow 4, result is shown in'Sereenshot 8) Activate and Maintain Services aay mea aa Beioe Seve Perey |) Service Catalog Ss scsce esata anal ence tae **T ova Gael hlanne SR Bas Fa ae 1 ‘ibis SAS SET Sara Fait Sere ‘c0@ DATA ‘senawa Noce ‘Activating and maintalning Gateway Service RMTSAMPLEFLIGHT (external service name) SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AG 8Endb-o.End How-t0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services ] Cm reer 8. ‘This XML Se des aot appear to ve ay ye efommato associated wiht The docaneat te is shown be. Sieceiiine seicvaavesroversuse™ beet=") . ‘a /ops/ sone ND ar SLES AOR//> Sereenshot 6: Calling ODats service RMITSAMPLEFLIGHT ins Web broweer Ifthe system alias is missing, you have to assign the created alias LOCAL to this service by choosing button Create System Alias Assignment (Screenshot 7, arrow 3): ‘New Entries: Overview of Added Entries yeaa aig SA Stam Aes Ct See Sereenshot 8: Assigning SAP system alias ‘LOCAL’ to OData service If the ICF serviee is not active it can easily be activated by button Activate ICF Node (Screenshot 7, arrow 2), and if the service is not listed in the catalog you have to add it there by choosing button Add Service (Screenshot 7, Step 1). There will come up a selection screen, where you can specify e.g. the system alias and you will get a lst ofall services from the respective system, which are not part of the service catalog, yet By selecting the service in the list this service can be added to catalog. Note: There is @ catalogue of all OData services as an own OData service available: /sap/opa/ cdata/iwind/cavalogservice/. This service contains currently one Entty Set called ServiceCollection. So by calling the URL /sap/opa/ edata/ixind/catalogservice/ServiceCollection?$£ormat=3son a lst of all existing and activated OData services will come up. The below screenshots show the OData service Z EPPRODUCTS we wil ‘create in this tutorial SAP COMMUNITY NETWORK ‘sen sap.com (©2012 SAP AG 9Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services foe cel eee ee eto tO = Implementing and Testing a local OData Service with the SAP NetWeaver Gateway Service Builder For the implementation and test of OData Services you need a user with Gateway development authorizations. So a role based on the templates (WFND/RT_DEVELOPER and /IWBEP/RT_MEG_DEV has to be created and assigned to the user. ‘There are different options of creating an OData Service Model: 1. You can define an EDMX model in an external too! like Visual Studio Express (or reuse an existing ‘one) and import it into Gateway to create the service (documentation) 2. Starting with SP4 you can use the SAP NetWeaver Gateway Service Builder (documentation). 3. Besides that you can also directly implement the metadata and data provisioning classes for a service (documentation). What's the SAP NetWeaver Gateway Service Bullder? ‘SAP NetWeaver Gateway Service Builder (transaction SEGW) is a design-time environment, which provides developers with an easy-iouuse set of too's to centrally cisplay and create the definiton of OData services, It has been conceived for the code-based OData channel and supports developers throughout the entire development fe cycle of a service Comprising runtime artifacts (model provider class, data provider class, model and service), OData artifacts (entity set, entity type and properties) and used data sources and models. Itis based on an open framework that allows adding own plug ins for special tasks (e.g. creation of Unit Test). The modeling environment folows a project based approach, all relevant data Is consolidated in one project. The Service Builder Is available as of SAP NetWeaver Gateway Release 2.0 ‘Support Package 04. As of SAP NetWeaver Gateway 2.0 Support Package 05, you are strongly recommended to use the Service Builder (transaction SEGW) for your OData desigr-time development as opposed to the previous design time integrated in the ABAP Workbench transaction SE80). SAP strongly recommends using the OData Channel (ODC) programming paradigm for all SAP NetVVeaver Gateway development. ‘SAP Onin Hep: SAP Neen: Gateway Sve Buse © SCN blog: The new Sai eaver Gatewa © YouTube vide (6:28 min} Within this article the SAP NetWeaver Gateway Service Builder will be used to create an OData service based on the SAP NetWeaver ESPM (Enterprise Sales and Procurement Model) demo mode. At first it should be checked if the demo model data are already available by testing function module BAP|_EPM_PRODUCT_GET_LIST. If this function module doesr't deliver any data, the EPM Data Generator (transaction S==M_D¢ and press F8) should be called (button El will display the program documentation). SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AG 10Endl-o.End How-to Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services In SAP NetWeaver Gateway Service Builder you need to do 3 main steps to build an OData service (see Figure 2): 4. Define or import the data model 2 3. Activate and run the service Gateway Backend (s<%) Implement or generate the runtime logic for the service operations “ Figure 2: Development flow for OData service definition uring the Gateway Service Builder Gatoway /IMEND/MAINT_SERVICE) In SAP NetWeaver Gateway 2.0 SP5 the Service Builder is enhanced with modeling and generation capabilities that enable the user to generate not only the model definition but also the service implementation, so practically the user can create fully functional Gateway service without writing a single line of code, 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 Figure 3 you see the OData service artifacts we create for the Product entity of the SAP NetWeaver Enterprise Sales and Procurement Model (ESPM, also shortty named EPM). Note: The other SAP NetWeaver ESPM entiles BusinessPartner, SalesOrder and SalesOrderitems are not used in this, ‘end-2-end tutorial ‘OData Service Artifacts for Data Model eos _EPY_PRODOCTS_DPC_EXT __EPH_PRODOCTS MC _EPM_PRODOCTS_MEC_EXT EPA PRODUCTS MOL + B z.eem rromocrs sev ¥ €¥Sernce Mantenance B caremmocat Figure 3: OData service rtifacts created for the ‘Product’ Cosme —O Companipiame ‘ ~ ProdactPicUrl Entity is used in this E2E tutorial tity oF SAP NetWeaver ESPM SAP NetWeaver ESPM (Enterprise Sales & Procurement Model) a — woe Entity is not used in this E2E tutorial The following sections will walk you through the process of generating a Gateway service based on an existing ABAP DDIC structure defined by the SAP NetWeaver ESPM (Enterprise Sales and Procurement Model). Importing the Data Model from ABAP DDIC structure with SAP NetWeaver Gateway Service Builder The SAP NetWeaver Gateway Service Bullder can be called with transaction SEH. Here at first a new project has to be created: SAP COMMUNITY NETWORK (©2012 SAP AG ‘sen sap.com 1Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services SAP NetWeaver Gateway Service Builder zeroes mp lem rotucs utes enwatin Sate Sant Object Directory Entry Package Person Responsble Screenshot 10: Creating 2 project 'Z_EPM_PRODUCTS’ with SAP NetWeaver Gateway Service Builder The result will be a project structure containing the cata model, the service implementation, the runtime objects and the service information. At first the generated projact should be saved. Within the service builder the data model can be imported from an extemal source (an EDMX file) or it can be generated from the Business Object Repository (BOR), RFC or ABAP DDIC information. Of course it can also be built up from scratch by defining all the properties, complex types, entity types and associations from scratch SAP NetWeaver Gateway Service Builder OS |y) a/9&\>) FCIBOR Interface heck conssency eta a Sereenshot 11: Importing a DDIC structure into the data model Since we would lke to see a product catalog in this sample application the application logic will be based on the function module BAP_EPM_PRODUCT_GET_LIST, whose result is a table of the structure BAP_EPM_PRODUCT_AEADER. By importing this DDIC structure into the model (see Screenshot 11) it can be decided, which fields willbe key or property and which fields willbe ignored. In our sample the Object Name is set to EpmProduct (from default name 'BapiEpmProductHeadersee Screenshot 12). SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AC 2Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services SEAS Entty Type BapiEpmProductHeader to EpmProduct 0 10 0 2 2 Eémsting 0 40 NAME 2 Property Name Eémsting 0 255 ‘DESGUPTION 5 Property &) Descrption Eémsting 0 255 SUPPLIER ID 3 Property & SuppleriD Eemsting o 10 SUPPLIER_NAME 2 Property & Supplentame Eemsting o TAX_TARIF_CODE 2 Property § TaxTarfCode Eémeyte 0 3 ‘MEASURE_UNIT © Property B Measurent Eémsting 0 3 WEIGHT. MEASURE 5 Property @ WeightMeasire —EdmDecimal 3083 welch UNIT 2 Property & WeightUnt Eémsting 0 3 PRICE 2 a EémDeciral 43 ‘CURRENCY_cODE 2 B Eémsting os woot 2 a EémDecinal 3023 ETH a EémDeciral a HEIGHT a EémDeciral aa punt a Eémsting o 3 ‘PRODUCT_PIC_URL Eémsting 0 5 Sereenshot 12: Setting field utage types of imported AB Strueture BAPE -PM_PRODUCT_HEADER Afterwards the SAP annotations should be maintained - there you can set label texts (as free text or defined by a program or DDIC text), and whether the property can be updated or if the entities can be sorted or filtered by this property: ‘SAP NetWeaver Gateway Service Builder sy aCe | wo eBDI eet rire © Glow Mode fee nn Press twret buono mart ~ meee O | sieeamnvtes Cea : a — : Sereenshot 13: Setting properties of entity type ‘epmProductHieader” Creating Entity Set ‘EpmProducts’ for the Entity Type ‘EpmProduct’ Based on this new entity EpmProduct the corresponding entity set EpmProducts can be created (by double- lick on the left hand side on tree node Entity Sets and selecting either the Append Row or Insert Row button On the right hand side). Here you can decide if instances of the entity type can be created, updated or deleted and ifthe collection supports e.g. paging (see Screenshot 14). SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AC 13Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services SAP NetWeaver Gateway Service Builder C1) IB) el mreeroncme someeToe “Sucre EYDBIGIST@ «emesis Bente cle = sn eae tear ep Since Sereenshot 14: Creating new entity set’ EpmProducts" Generating and Registrating the new Gateway Service Now the service can already be generated, which means that the model and data provider classes are generated and the service is registered (names are suggested by the system, but can be overwritten): SAP NetWeaver Gateway Service Builder QO = Eps) el > @ zm promos Model Provider Cass Cos tne aes ¥ GBData Model Sic te Cs ae ru rommers me seemed > Grweses | | ova rower oo a ~ Cittavigaton Prove) | Generate Cases = eae caster onc et see fae Gu ie 24 ED ODT oe + GiAssociation Sets Garin roots | | see + Giservice implementation “Technical Model Name 2_E%4_PRODOCTS OL ae | | Teal sence tare + GiRuntme artefacts Bpvxi After generating the runtime artifacts the service can be activated by double-clicking on GATEWAYSERVER. catalog. Screenshot 5: Ge eration of runtime objects for project Z_EPM_PRODUCTS Note: If there is no server configured for Service Maintenance the connection to the Gateway Server has to be created. ‘Therefore select SAP NetWeaver Gateway Settings in the Implementation Guide (transaction SPRO, se= ‘screenshot below), create a new entry with system name (e.g. GATEWAYSERVER) and the client & RFC destination of the Gateway server. since Bs? cstemangireknertaten Guce B® Acvate suse Fares Gate Seree Enablement + conection Sets to SAP NetiNeae itenay [ @ dete sttngs for Mergent Sances er acand O0&a hate ‘hese -vee yuh Aden ‘aera Senge SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AG 14Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Change View "Gateway settings": Overview omg) oR BE Gatenay sets Destnaton stam (ant sytem als rcoernaton a arearecat a) Nowe * Since in this use case SAP NetWeaver Gateway is embedded in the application backend the RFC destination has tobe NONE: Within the Servis Maintenance screen the Register Service button has to be selected for the dedicated Gateway server. Then the warning that all operations of the Service Maintenance wil be redirected to the corresponding server (which is here the same, since we have an embedded Gateway) has to be accepted and the system alias (LOCAL) has to be specified SAP NetWeaver Gateway Service Builder OS? @oies » @ z_eem_provocts ¥ Gata Model > Gientty Types + Ccomplex Types associations > Gaentey sets + Gi ssocation sets Function Imports > Biservice Implementation > GoRuntme arcracts 6 servce Mantenance Ep, 8 sxmerser Screenshot 16: Service regletration in local stem (system alias LOCAL’) With the next screen the service will be added to the service catalog and the field Registration Status of the GATEWAYSERVER should show a green light afterwards. SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AC 18Endlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Activate and Maintain Services = Seren Veron can ee CDi eeietentiannenen 9 /sp/opu/odata/sap/Z_EPM_PRODUCTS/ oo = ‘This XML fle does not appear to have any ste iermation associated witht The document we is shoven below. ‘veappiservice sminssapp="hstpi/ /wnnr.3.0rg/2007/app" wxnins:atom="https//wew.¥3.0E0/2008/Aton" (seo. anp con) Protecehe/SXPDRe HnLibaces"https// suoibin it ale be tlie /aep/ope/adeca/ zep/2_EEM PRODUCTS /*> ‘veeppivorespace> “Gavonstitie cypenteanc"opacac/atom:esrie> veeppicelieccion sapioontent-version="i" Reefo"EpaEroduste"> “cevonseitie typen" text" EpmProducts ‘Coapimenber-citie>EpaProaict prermerps/) Sereenshot 19: Service XML documant for Gateway service Z_EPM_PRODUCTS To request the service metadata XML document in your web browser append String ‘/smetadata’ to the service document URL (Screenshot 20). _SAP COMMUNITY NETWORK 201 ‘sen sap.comEndlo.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services ap/opu/odata/sap/Z_EPM_PRODUCTSSmetadata]| ‘This XML file does not appear to have any style information associated with it The document ree is shown below. ‘vedma:Eamt smins:edma=*nctp://achenas.microscf .com/ado/2007/06/eamx" saingin=nttp!//achenas xicroaott.com/ado/2007/08/dataservicee/mavadaca" xalns:sap="nctp://w. eap.con/Protocole/ShPData” Version="1.0"> ‘VeSchena xuins~"ht0p;//schenas microsoft .con/ade/2008/08/edn" Namespace="Z_EPY_PRODUCTS* ym tangs" ae" weencatyType Vanec"Epnfesduce" saprcontent-versson="i">, vekey> ‘ “Property NamectHeagureinit” Types"Edn String" Nollables"faise" MaxLengtnets" sap:senantice~"unit~of-neasure"/> operty Mamestilane" Types*fen,Steing” Nsllanie="faise" Maxtengens*755" siterablestésise"/> 55% sap: label="URIBLIa" 1" Precisions#23" Scalen"’"/> veEncicyContainer Nane="2_ SPM PRODUCTS" n:TebefauleEatityContainer="erue"> “cEaeitysee Manes" {Tam EntityTypes"2_EPH PRODUCTS. tpaProduct" sap:content— Sersion="i"/> /ee#3 .0F9/2008/Rrom" reletaeit* /2_EPM_PRODUCTS/Smevadaca"/> /ee.63.0F9/2008/Rzem" vel="iatest-versicn” refethetp://idesgiq. wa. sap.cozp:50015/eap/opu/odata/sap/2_ EFM PRODUCTS/Smecadacan/> < Screenshot 20; Service metadats XML document for Z_EPM_PRODUCTS dizplayed in web browser Implementing the Data Provider Class ZCL_Z_EPM_PRODUCTS_DPC_EXT with Paging and Sorting Logic The next step is the implementation of the data provider class ZCL_Z_EPM_PRODUCTS_DPC_EXT to fetch the EPM product data. Therefor the method EPMPRODUCTS_GET_ENTITYSET should be implemented (via redefinition) at first: ‘SAP COMMUNITY NETWORK ‘sen sap.com (©2012 SAP AG 16Endt-o.End How-t0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services ss Bute: Change Class ZC1_2_EPH_PRODUCTS_DPC_XT 22 NEO AZ RG AEDT Suanmemnmene Gaateawe Downer Conenmer | Bina ute Vcusimemce SG. REMERON BE Hoerete/ ce Peano S| A FES ors EP es Ut Vay We Oe ees (OEE JOH AFP SAC SUTIN, Tone Phas ante sonare "SS [sR Senn (necator se/ STH tarane Ratie ote aE oe (rnc ton sett Joke Wr tesne Patie __Endla Cute, Saas (eerie con free tee. rise ene en 3 Bicone {etsy oe wns. tre tia ect end 22a (eect. 3e,cOMLseRrce arane. Monies he ayn eon op Sa ea {at econ stave. aie _SETOCC econ ae (cers can ce aan nie Lnromenn OE cr i secsomsncas loncome cs | 1 SE Cm ART tae tothe Gece ‘A anes BEATE reer (NMROOUCTES_DAETEDVIY td ere AMMODUCTCSteT TTY ie eye Nar ‘Banomoveras-cetomrser rut res tara SBanmeovcras oomeariy ved eens tane METHOD epmproducts_get_entityset. BATA It_products tysE TABLE OF bapl_epm_product_header raTA It return Tyee TABLE oF bapiret?. nara lvinin TYPE i. TRA lv-max TYPE i TRTA It_techorder TY= /inbep/t_mgn_tech_order. EREA It sortorder zveE abap_sortordar_tab FIELD-SUMBOLS <1f_order> TYPE /iwbep/s_mgw_tech_order. FIELD-S¥MEOLS TYEE abap_sortorder. FIELD-S’MBOLS TYPE bapi_epm_product_header. FIELD-sumEonS s¥5= zcl_epm_products_ape_base->ts_epaproduct * Get ion IF io_tech_request_context 75 souD It_techorder = io_tech_request_context-»get_orderby( ). * Get List of Products (to avoid @ read with every call # cac CALL FUNCTION ‘DAPI_EPM_PRODUCT_GET_LIST" d be implemented) TABLES headerdata = It products return Tt_return ‘LOOF AT It_techorder ASSIGNING . APEEND INITIAL LINE To t_sortorder ASSIGNING <1F_sortorder> name — <1f_order> pon: EE GLf order>-oeder = “dese ‘-cescenaing = abap_true ENDIF. IF <1f order>-property = “PRODUCT_ID* OR <1florder>-property = “DESCRIPTION” OR Es sroperty = “NAME” OR -pzoperty = “CURRENCY Cone” oR -property = ~SUPPLIEA_NAME*. -astext = abap_true ENDLOOP. SAP COMMUNITY NETWORK ‘sen sap.com (©2012 SAP AG 9End-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Sor It products ny (1t_sortorder) . TE 4s_paging-ckip ts wor imzrzan. Lvsin = 1s paging-skip + 1. wore. af is paging-top zs wor iuzrzar. lvmax = is_paging-=kiz + is_paging top. Iv max = Lines( It_products exorF. OOP AT It products FRO Iv. min TO ly max ASSTONTNS . APTEND THITTAL LIWE To et entityset ASSTGNTHO <1# entityset>. MOVE-CORRESPONDTNG 70 . ENDLCOP. ‘ENTMETROD. ‘Soures Code 1: Class 2CL_Z_EPM_PRODUCTS_DPC_EXT (Data Provider), redefine method EPMPRODUCTS_GET_ENTITYSET Now the service can be executed with the entity set ‘/saplopu/edata/2_epm_products/EomPraducts/?Sformatsjson, which should return the following result: Producti: *A3-3000" ‘Additionally, paging by setting Sskip and Stop as URL parameter should work as wel ’Sformatsjson8 Stop=28Sskip=1 should retum the second epm. ‘and the third entty of the list of products. ‘SAP COMMUNITY NETWORK sen sap com ©2012 SAP AG 20End-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Sapecoaes “AEM, To enable requests for a single enlity of EPM products the method EPMPRODUCTS_GET_ENTITY has to 'be implementediredefined in class ZCL_Z_EPM_PRODUCTS_DPC_EXT. METHOD epmproducts: get_ent ity. DATA 1y_product_id 7:22 bapi_epm product_id. BAIA Is_product TPS bapi_epm_product_header. DAIA Itreturn — TyeE TABLE OF bapiret2. FIELD-s¥Meots TYEE /Inbep/s_mgw_nane_value pair. READ TABLE it_key_tab INDEX 1 AgoIGNING . IE sy-subre ~ 0 AND 15 ASSIGNED. Iv_product_id ~ -value. CALL FUNCTION "SAPI_EPM PRODUCT_GET_DETAIL" EXPORTING product_id - 1v_product_id ‘MORTING headerdata ~ 1s_product TABLES return = It_return. ‘SAP COMMUNITY NETWORK sen.sap.com ©2012 SAP AG 2End-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services MOVE-CORRESPONDING 15_product To er_entity. ENDIF. ENDMETHOD. ‘Soures Code 2: lass 2CL_Z_EPM_PRODUCTS_OPC_EXT (Oate Provider), redefined method EPMPROOUCTS_GET_ENTITY Now the detail data for example the product AD-1000 can be requested directly by using the URL ‘/sap/opulodata/2_epm_products/EomProducts(‘AD-1000}/?Sformat=json: ‘SeppitertD: 100092004", Description: “Flyer fox ous ay peesuct, Memes "Fiera ‘crtegory: Torntss", Typeceses “Ao, \Note: The product picture URL path wil usually be /sapipublicibc/NWDEMO. MODEU. This path has lo be activated in transaction SIGF to enable that nese pictures can be dlspiayed in the browser. Having implemented and tested this service, this is the perfect point in time to move from the application ‘backend development to the application frontend development using the Ul development toolkit for HTML5: (also known as SAPUIS). ‘SAP COMMUNITY NETWORK sen sap com ©2012 SAP AG 2Endl-o.End How-10 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Building the Application Frontend with the UI Development Toolkit for HTMLS Once you've built a working Gateway Service, the next step is to create an application that can consume this, service. SAP places no restrictions on how Gateway services are to be consumed. In this article we focus on JavaScript using the UI development toolkit for HTMLS with its generic OData proxy object provided by the SAPUIS runtime libraries SAPUIS Application Frontend Architecture The following figure illustrates the principal architecture of the SAPUIS application frontend we will develop in the second part of this how-to guide. The technical details of this architecture will be explained in the corresponding sections of this chapter. Web Browser ProductList.controllerjs Controller ProductList.view,js View SAPUI5 Runtime sap-ui-core js ‘sap_goldreflection (theme) ara bras (standard bootstrap file: ‘JQuery, sapui5 core) sap.ui.commons —_sap.ui.ux3__sap.ui.model.odata Application CLIENT HTTP(S) SV Ne} ‘SAPUIS SAP NetWeaver Gateway ABAP 7.03/7.31 SP4 Content Gateway Service Z_EPM_PRODUCTS Application SERVER Figure 5: Architecture of SAPUIS sample application frontend with Gateway service consumption (runtime view) Setting up Your Development Environment Installation of user interface add-on 1.0 for SAP NetWeaver (SAPUI5, Ul2 Services, UI2 Backend ...) ‘The user interface add-on for SAP NetWeaver 1.0 SPO1 (in short Ul add-on for SAP NetWeaver) provides a number of tools and services enabling the implementation and lifecycle of HTMLS applications by using the Ul development toolkit for HTMLS (also named SAPUIS) and UI integration services providing e.g. role- dependent content and its integration with as well as navigation to existing applications. Tho Ul add-on can be found on SAP Support Portal and has to be imported with transaction SAINT (see SAP Note 1666368): SAP Support Porta: hito//service.sap.com/swde > Support Packages and Patches > A—Z- Index > N > Ul add-on for SAP NetWeaver (see Screenshot 22) © SAP Online Help: http://help.sap.com/nw-uladdon > Master Guide, Installation Guide © SAP Note: 1666368 - installing NetWeaver Ul Extensions Version 1.0 SAP COMMUNITY NETWORK ‘sen sap.com © 2012 SAP AC 23End/-+o-End How-to Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Ad Pa WW ‘my Ple my rbot my Foes E compreed sftwere Component Versions "SAP Sftmare Dowload Center 7 Soper Padane Pats ‘SUPPORT PACKAQ§’5 AND PATCHES - N —— a ~ [Sco trsapstrasogemrane UIADD-ON 1.0 FOR NW 7.03 > Se napertrages Oat 1 eatin, Marans Dts Son ates Ste aeprtPadage Se ‘ | + itr en Utes ee Ramp aes ne eta Sere a Oxane ante ates fon er smanall oy = saeuiao0-onmesavie 1 Ser Stare Dette = sseunrowmanionvio Screenshot 22: Downloading the Ul add-on for SAP NetWeaver 7.03 from SAP Support Portal What's the user interface add-on for SAP NetWeaver? ‘The User interface add-on for SAP NetWeaver (AS ABAP 7.017.01/7.02/T.03/7.31) can be used to rapidly provide new User interaction and technology without disrupting the underlying business applications. It addresses mainstream SAP landscapes and deployment scenarios at existing customers to help improve their user interface (Ui) independently of ‘application releases and without major investments, such as upgrading existing systems or challenging their IT landscapes. The goal isto Integrate existing UI functionalty whlle making use of state-of-the-art UI technology and functionality provided by SAP to bring significant U! Improvements to customers and end users iespective of the application lifecycle and the SAP NetWeaver platform version used. User Interface add-on for SAP NetWeaver contains the UI development toolkit for HTMLS (SAPUI5), SAP NetWeaver Business Client 4.0 with a completely refined user experience as well as SAP NetWeaver user interface services for HTMLS and mobile application developers based on SAP NetWeaver Gateway, including a RESTful OData service for navigation based on the launchpad. © SCN blog: Introducing the new UI Add-On for SAP NetWeaver, Filp Misovski, SAP AG, September 2012 © SAP Online Help: hitov/help.sap.com/nw-uiaddon (© SAP Support Portal: hias/service sap com/swdc > Support Packages and Patches > A-Z Index > N > Ul add-on for SAP NetWeaver © SAP Service Marketplace: SAP Note 175968: UL Add-On for SAP NetWeaver: Central Note Installing SAPUIS development tools (Eclipse, SAPUIS ABAP team provider...) ‘Although there are a number of ways to implement HTMLJavaScript applications SAP recommends the usage of the SAPUIS developer tools (including SAPUIS ABAP repository team provider and the SAPUIS application development toolkit), which are delivered as an Eclipse plugin. The download and installation of the Ul development toolkit for HTML (SAPUI5) packages and all the release-dependent information is described in more detail in SAP note 1747308 - Ul development toolkit for HTMLS (SAPUI5) where you can download the Installation Guide — Ul development toolkit for HTMLS. The installation guide comprises detailed information on the installation prerequisites and procedures (SAPUIS runtime on SAP NetWeaver AS ABAP, SAPUIS tools). ‘SAP COMMUNITY NETWORK ©2012 SAP AG sen sap comEnd-to-End How-to Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services The SAPUIS ABAP repository team provider (in short SAPUIS ABAP team provider) is responsible for storing and synchronizing all the relevant Ul artifacts within the ABAP backend system, which results in a common lifecycte of the OData services and the user interface. The SAPUIS application development feature supports the integration of SAPUI5 development in Eclipse with e.g. wizards for SAPUIS application projects, views & controllers, JavaScript code completion, templates, snippets, etc). As a prerequisite a SAP GUI installation at least 7.20 Patch Level 9 and the Microsoft VC runtime libraries (download) are required. Note: Currently the SAPUIS5 ABAP repository team provider just works with the 32-bit installation of Eclipse and its only available with SAP NetWeaver 7.03/7.31 SP4 and the corresponding UI add-on 1.0 SPO} for SAP NetWeaver 7.03/7.31. Additionally the Team Provider relles on the ABAP in Eclipse communication framework, which Is part of the ABAP Development Tools for SAP NetWeaver. For more detalls on these tools and an ABAP Development ‘Tools for SAP NetWeaver installation guide see SAP note 1718399. On SAP NetWeaver 7.00, 7.01, 7.02 and 7.0317 31:/sap/public/bc/ui5_uiS/demokit/ It provides a developer guide with a complete list of controls (with sample source code), a UsDoc APL reference, and a test suite, where al the controls are visualized with numerous configurations. With the help of this demo kit you are abie to enhance the sample application or to create your own application project from scratch. Implementing the application frontend with the Ul development toolkit for HTMLS (SAPUI5) What's the Ul development toolkit for HTMLS also known as SAPUIS? Itls SAP's HTMLS toolkit for quickly buliding lightweight business Uls on multiple platforms. It provides a new enterprise- ready HTMILS rendering library for client-side UI rendering and programming by combining the advantages of being open ‘and flexible as well as being enterprise ready supporting all SAP product standards. While Web Dynpro is best sulted to heavyweight transactional applications for expert usage, SAPUIS is designed for building lightweight consumer-grade UIs, for casual usage. It targets developers at SAP and customers with web development skils (HTML, CSS3, JavaScript), ‘SAPUIS provides extensible controls and powerful theming but iis easy to consume, based on open standards and integrates with Srd-party JavaScript libraries ke JQuery. SAPUIS applications run on a wide range of devices (smartphone, tablet, desktop) and on multiple server platforms, lhke SAP NetWeaver AS ABAP or Java, SAP NetWeaver Cloud or Sybase Unwired Platform. © SAP Communty Network are: Geto Kno. Ul Deseo Tote oc HTML aa APU) ‘© SAP Community Network space: LS Dev © SAP Service Marketplace: SAP no Creating an Application Project for SAPUIS with a JavaScript View The procedure for creation of a new SAPUIS application project is divided into the following steps: Step 0: Start SAPUIS application creation wizard Step 1: Fill project related data Step 2: Fill view related data Step 3: Display confirmation page (optional) Within the project explorer of the SAPUIS Eclipse installation you have to select the menu entries File / New / Other and by writing query string “uiS" in the ‘Wizards’ input field you will get a list of all SAPUIS wizards. Here you choose item SAPUI5 Application Development -> Application Project (Screenshot 23, step 0). ‘SAP COMMUNITY NETWORK sen sap com (©2012 SAP AG 25End-o-End How.z0 Guide: Building SAPLIS Applications on SAP NecWeoaver AS ABAP 7.31 Consuming Gateway Obata Services {SPUD Aepeaten Sopren Aric ra UE Cet Deerr | or connat ‘Sersenshot 25: Step 0 — starting the SAVUIS sppiestion project creation wierd On the next screen of the wizard a project nante has to be entered (here EPMProductsApp was used) and you can optionally choose the Iscation, where this project will be stored locally and if an initial SAPUIS view should be created (Screenshot 24, step 1), In our case Keep the initial view checkbox checked. In the next dialog slap you fll the view related data: folder locaton within the project, the view name ProductList and the view type (development paradign} JavaScript (Scroenshot 24, stop 2), Seowenshot 26: Creating « new application project for SAPUIS = watering project pare ad view nari Before finishing the wizard the summary information about selected data in previous pages is displayed in case the initial viaur should be cveated (Screenshot 25), With ,Back’-navigatian the entered data could be corrected and displayed/controfied again before the SAPUIS application project is created. SAP COMMUNITY NETWORK Bai SAP AGEnd--End How.z0 Guide: Building SAPLIS Applications on SAP NecWeaver AS ABAP 7.31 Consuming Gateway Obata Services ‘Screenshot 25: Optional eenfirmation page for erestion af new SAPUI pplication project AAs a resuil, the following SAPUIS applicalion pars are created: ProductList.view js: A view file of lype JavaScript: (sae Screenshot 26, point 2) ProduetList.controllerje: A controler filo of type JS index.html: fe containing references for the libraries sap.u.core and sap.ul.commons, the used theme whera the defaull theme is s3p_goldrefiection, as wall 2s information for the script type and the script id (bootstrap script, see Screenshot 26). In a second script biock (application script), the Index file raters fo the projeci name, view lype and name, a content defaul for placing the controls con the Ul later on fin HTML body), the CSS class and the ARIA application role. Inside the JavaScript biock ol the index him! there is JavaScripl code camplelion for SAPUIS controls. We take a closer look at the index. htmf-source code later in section Understanding the SAPUI5 Application Code (Basins), s#e Source Code 4 Adkltfonally the following functions were also processed: creation of a new dynamic web project, ezeation of ‘8 web xm! file containing settings for he ResourceServiet and SimpleProryServiet (usage of ‘SimpleProny Serviet is restricted to localhost and only intended for testing purposes and not for productive: Use), addition of installed SAPUIS Uli plugins to tha Jarra build path and to the deployment assembly fo tenable local testing and addition of the SAPUIS class path container (if available) to the JavaScript include palh loenable the JavaScript coda compiation for SAPUIS controls. SAP COMMUNITY NETWORK snsancot © 2012 SAP ALEnd-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Crate cimcecsimnconmninno toons : ‘Bi Eat ewe | ate Mtp-eptenXN-Copur ie” cententeEEmde”> ‘Seraenchot 26: indaw html with SAPUIS bootstrap script, application script and HTML body Note: Ifyou rename the view or controller fle or move them to different folder, the coding in the view and controller and In he plaoes where the View ls used need to be adapted manual Saag onmeE dig U8 mano rpc en ct tod abi ie Sth abe ‘once ne sunspe ibe wo um aut nrc ‘Sete et oa noses em une corns en Salen nar send ecaroe nnn ope me node se ‘covervanmtrcoemsto Sic ny ata( jan coneeadte sna inate Fs in na satin ay meter he WSigemebecutseee en Using SAPUIS ABAP Team Provider lo daploy the SAPUIS Application Project on the ABAP Servar Now this SAPUIS application project exists locally in the working directory of the Eclipse IDE. Often it's useful to have a common lifecycle for the Ul cading and for the services (e.g. all the development objects can be transported together into a productive environment). By using the SAPUIS ABAP team provider all the sources can be slored within the backend application system SAP NetWeaver AS ABAP. RECOMMENDATION: Enable SSO for Your ABAP System For the sake of convenience. and again for secutty reasons, use also the single sign-on (SSO) option for system sutertioon (ft 1s wasn your SAP NetWenver ey lndecape). Compared wih SNC, S20 meets even more eats Se na . Using SSO, the user does not need to enter a user ID and ‘can access the after the system has checked the vai of the logon ticket. To Site S60 toran ASAP aye © Install the SAP NetWeaver Single Sign-On 1.0 SP03 or higher (either "Secure Login Client or "Enterprise Single ‘Sign-On forthe corresponding platform (ether for Windows 82. cr 64-Bt). ‘SAP COMMUNITY NETWORK sen sap com ©2012 SAP AG 28End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services © Configure the Secure Network Communication between ABAP Development Tools client and the ABAP back-end system. For more information, see hitp/'scn sap. comm/communtvinetweaver-ss0. ABAP De es SET" Nate 1718399 > Attachement 'ABAP Developmen! Tools 731 Irstataten Guide pa re eee ee ae Development Environment Application SERVER Figure &: Installation of SAPUIS ABAP Team Provider to cannact to/an ABAP backand system on SAP NetWeaver 7.22 Note: In order to deploy SAPUIS applications Dut with the Eotpse.based tools fo an ABAP environment, there are 2 ‘options depending on the SAP NetWeaver release: 40 SAP NetWeaver 7.03/7.31: Direc! integration via the SAP ABAP repository eam provider allows easy and fast deployment. The SAP ABAP repository team provider functionality, which fs available in the Ecipse IDE, is avaliable in SAP Business Sufte systems wah SAP NetWeaver 7.31 containing the Ul sda.on for SAP NetWeaver in the software components Ul_INFRA and UI5_731. For more information, see the User nletface asid-on for SAP NetWeaver Developer Guide, 21 SAP NetWeaver 7.00, 7.01, 7.02 and 7.03/7.31 < SPS04: In these releases, itis aot aassible to directly deploy (or upload applications trom the local Eciipse Installation to the ABAP server. Deployment must take place ‘manually. For more information, see the User intertace add.an for SAP NetiVeaver Developer Gulde For mare information on haw to use the SAPULS ABAP repository anc team provider see the tutorist Synchronizing with the SAPUIS Recostery Inside the UI development taoist for HTMLS — developer quide. On Screenshot 28 you can see the wizard steps needed to share a SAPUIS application project with your team by deploying to the ABAP system. To connect your project with the backend you have to do a right mause click on the project name (in the projact explorer, see Screenshot 28-1) and select the menu path Team / Share Project. On the next screen you can select a repository plug-in = in our use case its the ‘SAPUIS ABAP Repository. Choose Next. Configura the connection fo the ABAP system by using the Browse... button. You can only select system connections that are configured in the SAP GUI Launchpad providing your authentication credentials (Sereensho! 28-3 and 4). Then you have to specify the name, a description and the development package of the BSP Application (in our example Z_EPMPRODUISAPP. see Screenshot 28-5), which will be created as the corresponding repository objec! (if a transportable package is selected, in the next step a transport request has to be selected or created) In Screenshot 28-7 you see, that your shared SAPUI5 application is now connected to the SAPUIS BSP application artifact of the SAPUI5 Repository. A description containing the ABAP system, client, user, language, and SAPUIS BSP application name is displayed next fo the project name. Note: If you have shared a SAPUIS application project, the SAPUIS runtime library version of the server will be compared ‘against the ones which have been Installed into Eclipse and 3 warning might be shown. You can find more detalis ‘about this check section ‘What's a SAPUIS Runtime Libraries Server Version Check?’ below. SAP COMMUNITY NETWORKEnd--End How.z0 Guide: Building SAPLIS Applications on SAP NecWoaver &S ABAP 7.31 Consuming Gateway Obata Services Oia =e a — BSP anata EE OURA Semen an Resse ‘Scrmerahot 28; Sharing # SAFULS application in the SAPUIS Repository ax BSP application, Al that has happened is that you have identified to the SAP system that the eantents of your SAPUIS project are, at some point in the future, going to be shared. However, na file sharing has yet taken place! The “Share Project’ step is a one-off preparatory step thal dogs not now ead la be repeated In the project explorer selact the SAPUIS application node again and open context menu item Team / Suomit (Sereenshat 29-1). If lagon is required, entar your password in the logon popup and choosa OK. In the last step you have to select all resources, which wil be submitted to the ABAP backend system (all resources are SAP COMMUNITY NETWORK sensani Gavi2 SAP AGEnd-to-End How-to Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services selected by default). You will get a list of files that have been modified (added, updated, or deleted) in the client. The dialog shows the files for which submit conflicts exist, for example, if another user has submitted a newer file version in the meantime. Submit conflicts must be resolved before submission. If a fle is already locked in a transport request, the corresponding request is shown in the dialog. If the BSP application (created to store your SAPUIS application resources on the ABAP system) belongs to a transportable ABAP- package, you have to choose a transport request. Note that transport requests are not automatically released when the files are submitted: you stil have to release them using transaction SEO9 in the Underlying ABAP system. Ores ssass"] Screenshot 28: Submitting a SAPUIS application tothe SAPUIS Repository on an ABAP system Note: Enabling Virus Scan During Upload When uploading fles to the SAPUIS Repository, you can perform a virus scan. As of SAP NetWeaver 7.00 with Ul ‘add-on, SAP delivers the folowing virus scan profile for ABAP within the Ul add-on for SAP NetWeaver: [015/015 INFRA APP/REP_DT_ PUT This proflle is used by the SAPUIS Repository API to store flles in the 'SAPUI5 Repository based on BSP Repository. For example: Upload of a local fle using SAPUIS Repository API Yo15/cL_Ur5_REP_DT, method /Ur5/zF_UIS_REP_DT-PUT_FILE from 7.00 on, or the SAPUIS Team Repository Provider in SAP NetWeaver 7.31 The profile s deactivated when delivered. To activate it frst create at least one basis profile and save It as the default profile. You can then activate one of the delivered profles. By default, it inks to a reference profle, which Is the default profle. For more information, see SAP Help Portal: {© ABAP-Speciie Configuration of the Vitus Scan Interface (7.00) (© ABAP-Speciic Configuration of the Virus Scan Interface (7.31 Note: Tracking Coding Changes and Text Changes in the SAPUIS Repository ‘Code changes can be tracked by using the usual ABAP version control of the corresponding resource fle. Anew version is created when a new transpor is written. Text changes can be tracked by using the "Table History" transaction (SCU3), the relevant tables for SAPUIS texts are /UIS/TREP_TEXT and /UIS/TREP_TEXT_T for the translated text. Table logging has to be activated in the system for this functionalty. For more information, see ‘SAP Help Portal ‘SAP COMMUNITY NETWORK sensap com 012 SAP AG 3End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP 7.34 Consuming Gateway OData Services What's a Server Version Check of SAPUIS Runtime Libraries? |When you are developing SAPUIS applications with the SAPUIS Tools the code completion and application preview: features are based on the SAPUIS runtime libraries, which has been installed in your Eclipse installation. However after {you have deployed the application to the ABAP server and execute it there, it will use the SAPUIS runtime libraries, which have been installed on the ABAP server. Its recommended to always have the same library version installed in Ectipse as well as on the ABAP server. If this is ‘not the case (€.g If the local version is higher than the one on the server) the following could Rapper: ‘+ During development you could use features which are not available on the server, yet. ‘© When testing in Eclipse the application might behave differently, e.g. because in the newer runtime version some ssues have been fixed, which sta occur on the server. Please check the compatiblity rules which apply for the SAPUIS runtime libraries. \When you share 2 SAPUIS Application projec with the SAPUIS ABAP Repository or start the submit wizard, aversion ‘comparison ofthe focal exraries against he server will be performed. In case they are atferent, a warning popup wl De ‘shown which tells you the current versions. In case you want to continue with that, the popup can be suppressed for that ‘project and this version constellation. ‘To prevent ie above problems tom occurring, when using ferent runtime ilscary versions locally and on te server, the folowing measures ate recommended: ‘+ Chock the JavaScript Documentation of used controls and their methods for @sinee tags. They indicate which Version nas introduced 3 new feature which you ae going to use. “+ When testing in Ecipee you should configure it fo use te runbme Rbaries located on the server instead of the focal ones 38 deserted Neve “+ Aoways test your appication on he server afer submiting changes. ‘The following table illustrates how differing versions of focal and remote files are visualized in the SAPUIS project tree: state A web xmi changed locally several es changed locally and remotely Local tle changes Bs ro 2 By wacom) Romote fle changed G Both fies changed ~ Testing the SAPUIS Application Locally Already now this application can be called in the browser, bul lo see al least a small text, the generated view has to be enhanced with one (marked) statement: sap.ui.jsview(“epmproductsapp.ProductList™, { getControllerName : function() { return “epmproductsapp.ProductList™; bh ‘Ace new TextView: Control tothe view and createContent : function(oControlier) { ——} settext property ‘return new sap.ui.comaons. TextView((text:"Hello Horld"})s SAP COMMUNITY NETWORK sen sap com ©2012 SAP AG sEnd-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Note: Try to use the code completion there for the TextView control (shortcut Ctri + Space). Note: After adding the new line of code to the view, the source code has to be submitted (Team / Submit o the SAPLIS ABAP Repository. To test the new application with the Web Application Preview on an embedded Jetty server. right-click the HTHIL file or the project node and choose Run As — Web App Preview. Everything is configured automatically. After changing a fle of your SAPUIS application project, you can refresh the SAPUIS preview by choosing the Refresh bution on the left in the preview editor, ‘Screenshot 30: Teating naw SAPUIS application with Web application preview Inaide the Eclipse IDE To check the files of your SAPUIS application project in an external browser (IEIFF), choose Open in external browser on the right in the praview editor. This opens the exlemal browser marked as the defaull browser on your PC. You can also copy the URL from the text field of the editor to an extemal browser (this is useful for ‘external browsers other inan the detaull browser). Testing the SAPUIS Application on the ABAP Server All files have been submitted to the SAPUIS Repository and are available under the corresponding SAPUIS BSP application. The SAPUIS application project can now be run from a Web browser calling the underlying ABAP sysiam. You actually have two options to gel the SAPUIS application URL: first, by context menu item ‘Test Service’ in transaction SICF (requires to launch SAP GUI inside an Eclipse perspective view); second, by directly entering the browser URL when the SAPUIS application URL schema is known. Note: In the SAPUIS Tools version used for this document It was nat yet possibée to run s deployed SAPUIS application in the browser via a corresponding SAPUIS tools function. An upcoming SAPUIS tools version wil provide a new “Run as - Run on Server" context menu function to test a remote SAPUIS application (deployed on an ABAP system) in a Web browser. For the first option open SAP GUI in Eclipse via shortcut Cir!#6 or via the corresponding toolbar button (see Screenshot 31-1). Select your ABAP project and if necessary enter your password. In the SAP GUI view ‘enter transaction code ‘nsicf to start transaction SICF. Enler a service path of /=ap/bc/uis_uiS/sap/ ‘and apply the filter. Select node item z_epmproduuiSapp. This node corresponds to the BSP application Z_EPMPRODUISAPP (as SAPUIS repository counterpart lo SAPUIS project EPMProductsApp). With context menu item Test Service’ the deployed SAPUIS application gets started in a Web browser. For the second option open a Web browser and manually enter the SAPUIS application URL based on the given schema: SAP COMMUNITY NETWORK sensapcom ©2012 SAP AG 3End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services Screenshot 21: Testing SAPUIS application on ABAP server via transaction SICF URL: nttps://:/sap/bo/uis uit///indox.htnl OUFURL: Wipe: //homtnanm> separt, munis /nag fbf ui 8_v15/e_epmprodai Sapp inlet ‘You should s96 @ Hello World on the typical grey background of the sap_goldrefiection theme. i UE © > SD teemeatncetameceee Helo Werte sap /bc/uiS ut sap epmgroduiSepp/indexheniap-csent-001 $2) [] Understanding the SAPUIS Application Cods (Basics) Having seen the running (nearly completely generated) application, let's have a deeper look into the existing code. The application starts with the page index.htm! (see , which conlains in the headee section al first the: ‘SAPUIS bootstrap with the location of the core JavaScript file, the needed control libraries and the theme. ‘Additionally the SAPUIS view is instantiated and placed al an anchor. Within the HTML tag there is, besides the SAPUIS CSS class and the ARIA role (accessibility) just the anchor for the view. must exist somewhere in the HTML page. So we add a fread? tonesponing cal ek win le Cavirt hie Pe attribute class="sapviBody” div id= > defines the SAPUIS CSS cis to be used, s0 the page background and some other styles are properly set. Atibute role="application” set the WALARIA landmark rte. Scource Code 4: indax-html in SAPUIS application (a folder Webcontent) The JavaScript view with name Productlst.view/s itself contains two functions: * getControliexame() : assigns the id of the corresponding controller + createContent (): (slurs the content ofthe view ‘The controller contains templates for four standard hook methods, which can be used to modify the view at particular points in time and to free resources, when the view is destroyed (documentation for the methods is vailablo within the generated coding): additionally you can add own methods, which can be called e.g. from the createContent() method of the view. id of me view ~ It has to be the fle location sap.ui.jsview("epmproductsapp.ProductList™, {*———] and its name (separated by dot character) getControllerName : function() { _{ tunetion returning the i of me controller return "epnoroductsapp.ProductList™; +~ farcon retuing the » -| Seen ce a ereateContent : function(oControlier) { + add new Textview return new sap.ui.conons.TextView({text:"Hello Worlé"})3 | conirel to the view and } — ‘et text property Consuming an OData Gateway Service for Product Data retrieval in SAPUIS Since this is not a “Hello World’-Tutoral, but an end-to-end tutorial with OData Gateway consumption our ‘sample application shauld be enhanced with the local OData Galeway servios 2_epm_products we crealed before in the first part (see section Implementing and Testing a local OData Service with the SAP NetWeaver Galeway Service Builder above) The implementation follows the model-view-controller architecture that is supported by the SAPUIS artifacts view (JavaScript fle used in this tutorial, XML view or JSON view), controler (JavaScript fle with suffix Controllerjs) and model (OData model used in this tutorial, XMILModel or JSONModel). In Figure 7 we explain the technical details on how the MVC principle is applied in our end-lo-end sample ‘application, SAP COMMUNITY NETWORK sen sapcom ©2012 SAP AG 3End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services EM 54005 nse tity cats 8 vw cole enny tok mead. Theron an tance of sap. ‘mode dat OOo created ng tw SAPUS rune API an Bag he ODats service URE Aaa. we pa th new OD ‘mode back othe SAPUIS core ‘ante s0 at Ul seen a let own tis geal mode nace Bi ite wen, ale conte wits elrmea bound tthe moses ety fet Eororoaues sro ts peoesee (Saprepstn dg. Bh rere 58205 COata mode sts be ete fo he SAP even Gateway ayer. ar Noes rary ofthe owe ee ets {be Ota setae The cata eteved fom he Costa service adoraaty payed Seve’ teu Application SERVER Figure 7: Gateway sarvica consumption in SAPUIS explained In ProductList.controller,js: Creating the OData model instance and passing it to the SAPUIS runtime Ths niniti) hook method of the view controller's JavaSeriet fe will create an OData model (associated with the implemented Gateway OData service). You must ect the BIGHIGRLEEISEGHGRS and enter your own values for the userid and password. For sake of simplicily we assign the created OData model instance to the ‘SAPUIS core runtime as unnamed default model. Afterwards we do not need to explicitly assign the OData model fo the view’s table of popup controls as the SAPUIS core runtime uses its unnamed default modal instance assigned to itself in oninit(). sap.ui.controller("epmproductsape.Preductlist™, { * called when 2 contr Jer is instantiated and its View controls (if * plate) ore aivesdy eotalea fan te bee to mally Use Wiel behore It fs @toglaged tau ed eee Efe Intalio amtntt : fnctien() ( ‘O0ete model eretion: 10 17 unt of the Obata service - sHPORTINT: relative to the server | 436, dala binging in a ‘var sServicurl = "/sap/opu/odste/sap/2_epm_products/"; SAPUIS applications we Serviceurl = "/sap/opu/odata/sap/z_epn_products/"; ee one #1 create pata model instance with service URL and isow format / | St The consttucior takes var oModel - new sap.ui.model.odata ,cOataModel (sServiceurl, true, 7 iy; ‘or the data itself as the first ’ ° parameter 11 Pass unnamed Qdata model to the SAPUIS care runtime as global model for sake of If simplicity. Model does not need to be explicitly assigned to a view / or to UL controls later but acts as unnamed default model // BUT BENARE: the SAPUIS core runtime can only hold one global unnamed model instance. Jf as default model. Every reassignment of another model instance to the SAPUIS core 7/ euntine replaces the default model instance set before. In this case views or UI If controls are potentially bound to the wrong model so that the data binding chain 1/ from UE contrals ta model entities and properties get /1 broken (i.e, controls get enpty) ‘ODeta mode! assignment to SAPUIS core runtime (as sap.us.getCore().setNodel(omedel); *—| unnamed default model) for data binding In the views Ul } elements Source Code 6: OData model creation and assignment to SAPUIS cara as global dafautt model in file ProductList.contra e BEWARE: For simplicity reasons we assign the OData model instance to the SAPUIS core runtime here. Note that he ‘SAPUIS core runtime can only hold a single unnamed model instance (as default model) and that the reassignment of another unnamed model instance may break the data binding from Ul contrais to the model $0 that controls get empty. SAP COMMUNITY NETWORK sen sap comEnd-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services In ProductList.view,js: Creating the view’s table Ul and binding it to OData entity set and properties: The createContent() method of the view will instantiate a table control, define the columns of the table, map the columns to the OData entity field names and bind the result data of the entity set to table rows, Also have ‘a closer look at the comment boxes within the sample coding to better understand the implementation details and at Figure 7 illustrating the Gateway service consumption in SAPUIS. sap.ui.jsview("epmproductsapp.Producttist™, ( getcontrollertiame + function() { return “epmproductsapp.ProductList”; » ereatecontent : function(ocentroller) { J] return new sap.ui.commons. Textview( {te> Nello World"))5 17 load table module, alternatively add sap.ui.table to 11 the central boot strap ‘Jouery. sap.require("sap.ui.table, Table"); Jf create table control with properties var orable = new sap-ui-table. table({ width + “20e8", roweight 58, title : “List of Products”, selectiontede = sap.ui-table.seleet ionkiode tone Ds Jf define the columns, which should be displayed uC ol ume (new saph.ui-Lable-Cotumer,( width = "wopx", Mexible : false, sve “ea mmm ge "a5, Property binding: acd new Column contrcs to the lable and bind the table conirol Pieues + property are” to the model rece Pt on duCOL um (new sap ui -LabLe-Ceotumer(( Label : new sap.ui.commons.Label({ text 2 "Proguel” 1D" ». Template : new sapui common text : “(Product ip]" » SortProperty + “Praduct 10" out extview(( + Jf alternatively (instead of ‘ly braces syntax for property binding): 11 Sapub commons. Text¥iew() . bind lext (“Product 10") I alternatively: // sap.ul.comons. Textview().bindProperty(“text™,"Preduct 10") a oTable.addColum(new sap.ui.table.column({ abel new sap.ui.conmons.Label({ text : “Product” Mame" + new sap-ul commons. Textview({ “{viame}” sortproperty “Wane” ms oTable.addcolumn(new sap.ui.table.colum({ abel + new sap .ul-commons.Label ({ text : “Price”, ‘SAP COMMUNITY NETWORK sensapcom ©2012 SAP AG 37End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services textalign : sap.ui.core.Textalign.end new sap,ui-connons. Textview( “{price}", textalign : sap.ui-core.Textalign.End sortrroperty + “Price” ys oTable.adacolum(new sap-ui-table-Column({ abel + new sap.ui.commons.Label ({ text : “cunrenc’ », ew sap.ui.connons. Textview(( * [currencycade}” sortproperty : “Currencycode" Ws otable-addcolum(new sap.ui-table-colume(( Label : new sap.ui.commons.Label ({ text : "supplier » template text = [Suppl iertame]™ » SortProperty + “Supp | iertane” ys J{ An this sample we do not need to Link the table control to the model 71 SAPUN> sutemal ieally binds the table Lo the global (unnmed detalt) 11 wodel assigned to sap.ui.core.core befor in the view controller's / oninil() book method (ser comment s there). /f oTable, settodel (oModel): Aggregation binding: aggregation binding is used t@ bind a colleton of table rows wth JI bind table rows to the Obata entity set dats ttom the ODsts model to me table, The Table. bindnows (” JEBHPROGUEES” ) ; ‘absolute binding path “/EpmProducts” points relies onelez to the entty set wtin name “EomProducis’ defined In Gur Z_EPM_PRODUCTS ODats // alternatively: Gateway service // oTable,bindnggregation( shame, obindingtnfo) IT otable.bindaggregation( "rows", "/tpaProducts* ): ) ye Sourea Code 7: Tabla Ut eration with property and aggregation binding tothe ODsta modal In ProductLst views js Note; Avoid hostnames and ports within the JavaScript coding (stay relative atleast othe server). This makes the coding independent from the system landscape (e.g if Gateway Is Installed on a diferent server than the HTMLJavaSctipt coding is coming from and a reverse proxy is Used). Note: For simpicity reasons static abe! texts were used. These texts shoud be transistable and theretore elther have to ‘come from the backend (preferred) or from resource bundles. For more details see document Guide for SAPUIS ‘Application Developers « Transiation in the SAPUIS Demo Kit How Is Data Binding applied in SAPUIS? In SAPUIS, cata binding is used to bind SAPUIS controls to a data source that holds the application data, so that the ‘controls are updated automaticaly whenever the application data is changed. With two.way.binding the application data ‘s updated whenever the value of a bound control changes, e.g. through user input. Data binding supports binding of ‘simple controis like TextField and list type contiols ike DataTable and DropdownBox. 'SAPUIS data binding comes with buil-in support for three different mode! implementations: JSON model, XML mode! ‘and QData model, Custom models can also be implemented. To use data binding in a SAPUIS application you first need to Instantiate the appropriate model and then assign it to the SAPUIS core runtime object (Ike in this tutorial), to @ view or SAP COMMUNITY NETWORK sensapcom ©2012 SAP AGEnd-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services to specific controls tke a table ora Ul area, ARerwards control properties can be bound to model properties by eter Using a SAPLIS specie cury Braces syntax er by caling the binaPropery method (contol property binding) ‘Aggregation binding is used to bind aggregated controis to a Colection of mode! entries, like binding multiple rows of a table to an entity set (e.g. products) of a model. To bind a contr aggregation tothe model you have two options. Firstly ‘and in most cases, you create a so-called template contol (Le, a single control or even a tree of contiis) whicn is ‘automatically cloned and added to the parent control for eBth bound entry of the mocers entity set, This i usually the tight choice for structured data, where you have lists of entries with the same properties (e.g. use the Usttem contol as ‘empiate for the aggregation binding of a ComboBox contso!), Secondly and in advanced cases, you provide a factory unetion as the more powertul approach to create aggregated controls from mode! data, The factory function Is called for ‘every item in the list of bound model entsies to aggregate entry-speciic controls, For control properties you can supply a formatter function which will be called withthe value of the model property. The ‘etum value ofthe formatter function is used as the value of the bound contzol. When using aggregation binding, you can. ‘Provide intial sorting and fering. ‘Data binding supports the definition of types weich can be handed over when binding properties. Bound properties with 2 defined type will automatically be formatted when displayed in the UI, Input values in UI controks are parsed and ‘converted back to the defined type in the model. ‘To catch invalid user input, you can register special event handlers for tormatting, parse OF validation errors and tor validation success to the SAPUI5 Core. (© See me complete documentation on how data binding works anc how to implement itn an application: introduction to Das Binding in the SAPUIS Demo Kit. Handling image Control Events This application can already be tested now and it will present a list of EPM products, but to complete this first ‘sample it is worthwhile fo enhance it with event handling, Therefore the current view implementation will be ‘extended with a click on the image. which will open a popup with a larger version of the image and a longer product description. Within the sample code belaw the popup is using the same sap.ul.commons.Dialog instance and just its content will be replaced, Since the data are already available the model instance can be reused. It has fo be linked fo the popup control and the binding context has lo be sel appropriately (lo the binding context of the clicked image. Source Code 8 contains the modified part of the createContent() method of the ProductList view: saplut jsview(epmaraduel spp Product isl", [ getcontrol lerteame = funetian() | return “epuproductsapp.ProductList”; » createcont (t+ funetion(ocontroller) ( 1 Yoad table sexu 11 bootstrap jovery.sap.require alternatively add sep.ui.table to the central able, Table"); I create table control with properties var olable = new sop.ui table. Table({ width : "200%", routeignt = 50, title : “List of Products", selectiontods : sap.ui.table, select Lontiade None ¥ 11 create the popup for click on image var eialog = new sap.ui.commons.Dialog({ minicidth : "300px", mintieight = "24opx" Day 11 define the columns, which should be displayed oTable.addcolunn(new sap.ui.table.colunn({ SAP COMMUNITY NETWORK sensapcom ©2012 SAP AG 3End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services width + “sopx”, flexible : false, template : new s3p.vi.connons. Image ({ height : “aspx” sre: “{Producticurl}", IL rogiste press U1 initialize popup content ‘Dialog. destroycontent(); 11 set the binding context from image 1/ NOTE: No obialog. setModel() needed here, as SAPUIS U1 wall bind controls to its default model. The default J/ model instance was assigned in the view controller's 11 ontnit() hook method Binding Context: to display the correct product ‘obialog. setaindingcontext(oévent .oSource detals for the selected product we need to “getBindingcontext()); assign the binding context from the event source (Gicked product in table Ul) tothe dialog contra, IL create popup content ‘Dialog, bindProperty (“title ‘obialog. addcontent(new sap.vi.conmons. layout .BorderLayout({ height : "220px", top: { contentalign : “cente size: "155px", content : new s8p-ui-commons.Zmage({ height "15@px", sre: “{ProductPicurl}” » h center: { contentalign : “center”, content = new sap.ui.comnons.Textview({ text : “(Description)” » , ys 11 open popup Af (Joptalog, 1sopen()) { eoislog-cpen(); } + » ys oTable.addcolum(new sap.ui.table.colunn({ label: new sap.ul. conors..abel(( text: "Product ID" D template + new sap.ui.comons.Textview({ text? "(Producto)" ye sorteroperty : “Product10* } 1 alternatively: Source Code 8: Handling image control events in controller Produetlist.controllenis SAP COMMUNITY NETWORK sen sap com 0End-so-End How.z0 Guide: Building SAPLIS Applications on SAP NecWeaver AS ABAP 7.31 Consuming Gateway Obata Services Starting and Testing the complete SAPUIS Application Again these changes have to be submitted fo the SAPUIS ABAP Repository after saving it. Now the application can be started in the browser with the same URL (htos/2hestname>:-port>/sap/beluiS_uiS/saprepmproduetsapotndex. html) as above. Tha result is shown in Screenshot 32. : , i iar emesiaeetemmmmmortcos hr eeeeesteupscuraartorrr | Eistot Procecte & srarmunnesa rom an recut yor sronoames sem sr satire yo fy nena Paw00 GA Laure yo ‘onantoeaat sono wo some, Ro snag, seen one ‘Taseemunteasines ur Qo Pousee sem us Povcenntensemens: P) mem wombomt Loot ss009 eu sone i ra wens ty soon a> naa 3 prams Lest oagpanconn samo Uso sien ‘Seraenshat az) SAPUIs ssmple application reartedin Wab Browear wth the ine from tha ABAP Eyam Besides the vicibia resuil list of products; this application has already some not diractly visible features: © Table paging: the table:supports paging (by scrollbar and kayboard) and whila doing this if requests missing entries asynchronously from the OData service © Sortable and resizable columns: Adtitionally the columns are resizable and ean be sorted. Tha latter one nas te be implemented in the OData service, since it may not have all entries on the client available — cee Sourca Code 1 in section Application Backend / Implementing and Testing onn ODats Service {the Soures Code 8 enhancements for image contra! event handling ware alsa implemented, should be possible to click on the image to. open @ nen-modal popup displaying the image with a larger size and a elailed product description (praduct id is shown as lita) as shown in Screenshot 33. SAP COMMUNITY NETWORK samira Bai SAP AG "End--End How.z0 Guide: Building SAPUIS Applications on SAP NecWeaver AS ABAP 7.31 Consuming Gateway Obata Services +26 apf 1p eemrarea = List of Products Ped Feminine Pace Cima acme | res Srutcosee rot FY seabighiess wrania ® a a & go sath ose. yo ail es a wm raion Pecmemoner 9 fs var eur winapi east in ——— i ‘urn Une Geen ser nag pteatnl seam us snares Screenshot 38: Popup dislaz showin product details aher clickins en icon in the preducts-able entry How to comply with ths Sams-Origin Palicy in # Qevelopment or Tsst Sosnario There are different ways of testing the application after modifications: 1. The first ong, as already deserted, is submitting the madified sources with tha Team Provider to the ‘SAPUIS ABAP Repository and test airectiy with the URL trom the application system (see right side of Figure By 2. A short preview of the application (without any data!) can be started directly in Eclipse by right mouse click on the project name or the index. him page and selecting Run As/ Web App Preview. 3. Athird variant is local testing in Eclipse with a configured Java Server (e.g. Apache Tomcat, see left ‘side of Figure B) HTMLIS ‘Ajai Develeoment eat or Productive spate DEVELOPMENT Scenario comakiwionaysem =| PRODUCTIVE Sconario Figure: ari otiginpaliey in davalepment und productiow eanarion SAP COMMUNITY NETWORK snsancom © 2012 SAP AL 2End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services But this usually very convenient third method (local testing in Eclipse) confiicts with the same-origin policy of the Web browser, because the HTMLiJavaScrip is loaded from the locally installed Tomeat, whereas the business data is requested by XMLHttpRequest from the application backend (see Figure 8), So a proxy has t0_be placed in front as an intermediary for requests to both servers. This can be done by using the delivered SAPUIS SimpleProxyServiet (see Figure 9) or by installing an Apache web server and configure it as reverse Resource Hendir: HTMUSS response DEVELOPMENT Scenario Faure’ ‘The SimpleProxyServietis restricted to local testing usage only and you configure it in the web.xml available in your projact under WebContent / WEB-INF. There you will find already parts of the configuration, bul you have to add the remote location for your data services as a context parameter (highlighted in yellow). 9: Using the SAPUIS SimaleProxyServlet to comply with same-origin policy in 3 development scenario tewProductsipp a -nane>SinpleProxyServiet clays>com. sap.ul5.proxy Simp leProxyserviet servlet -name>$ inpleProxyservlet /proxy/* ‘welcome-File>index.htal SAP COMMUNITY NETWORK sen sap com ©2012 SAP AG 0End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services Source Code 9: Prony configuration in EPMiProductsApp/WebContent/WEB-INF/web.xml uting the SimpleProxyServiet Now the service call in the JavaScript code of controller ProductList.controlier js has to be adapted to use the proxy instead of a direct connection to the server. Since this code maybe reused several times, it will implemented as function getUn(sUn) in the view controller: sap.ui.controller(“epaproductsapp.ProductList™, { a = called when 2 controller is instantiated and its view controls (if = available) are already created. Can be used to modify the View before it + is displayed, to bind event handlers and do other one-time = initialization. Function() { 11 URL of ‘the OO service — IMPORTANT: relative to the server ‘sap /opu/odata/sap/z_epm_products/"; Sap.ui.getore().setModel (oModel); Ws 11, ontictorekende Wh Ff onkfterRenderiny Ws we: function) ( Function() { Hf ontxits Sunction() { m) tur : function(suel) { 4€ (surl == ‘return sur]; 4€ (icindow. location hostname ‘return “proxy” + surl; } else return eur]; ‘localhost™) { Source Code 10: Halpar methad geturll) In Productlst view controlar to caleulata same-arigin polcy compliant URL This method has to be usad now for the service URL of our OData model created in the view controller's: ‘oninit() hook, but also for the images (the SAP NetWeaver ESPM OData service delivers just relative URLS for its images). Sap.ut control ler(“epaproduct sapp.Producttist™, [ = called when a controller is instantiated and its View controls (LF + available) are already created. can be used to modify the View before it = Is displayed, to bind event handlers and do other one-tine * initialization. " ontnit : function() ( J URL of ‘the cOata_service — IMPORTANT: ver sServiceurl = ‘elative to the server Ys ‘SAP COMMUNITY NETWORK sen sap com ©2012 SAP AG 4End-to-End How-to Guide: Building SAPUIS Applications on SAP NotWeaver AS ABAP T.34 Consuming Gateway OData Services sap Source Code ui. jsview(“epmproductsapp.ProductList™, { getcontrollertiane : function() { return “epnproduct sapp.ProductList"; h createcontent : funetion(ocontroller) { 11 define the columns, which should be displayed addcolum(new sap.ui.table-Columa(( width + "eopx”, Flexible template : height J/ register function for press event on the image prews = Function(otvent) [ uw Lie popup cont ent obialog. cestroycontent( /[ Link model to popup & set the binding context from inage cbialag, seticdal (ocel)s stwindingenntext Cobvent .asurer “geteincingcontext()): If create popup content bial roperly(“LEL le, "Praduet in"); Dialog. eédcontent (new sap.ui.commons. layout .BonderLayout({ 2770p", eantental ign ere mes ah ent etree ee TESS contort values ? ? » Calling the getUrll) helper method to get proxy complant service and image URL Having done this configuration and coding modifications the application can also be tested locally on the Java Server configured in Eclipse before submitting it to the SAPUIS ABAP Repository. \Note: For more detalls on how to jocally test SAPUIS applications see document Testing the SAPU'5 Apolication in Eclipse in the SAPUIS Demo Kat. ‘SAP COMMUNITY NETWORK sen sapcom ©2012 SAP AG 4End-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Embedding a SAPUIS view into a ux3 Shell control Finally we make our SAPUIS application UI look more real by embedding it into a ux3 shell control It is part ‘of the next-generation UX control library of SAPUIS comprising other controls like ExectBrowser, FacetFiiter, ‘OverlayContainer, Thinginspector, QuickView and NavigationBar (for mora details see documentation} In the index himl page the ux3 shell control will be added and the products list view will be embedded in the shell <1D0CTYPE HTML> to use the ux3 shell control import the related sap.uiux3 Mbrary in the

Source Code 12: Embedding the product lst view Into'a ux3 shell control within the index.html page SAP COMMUNITY NETWORK sen sapcom ©2012 SAP AG 46Encito-End How Guide: Auriicing SAPLIS Applicadions on SAP NedWeaver AS ABAP 7.1 Cansuming Gmeway Q0acx Services rl List of Products peer svat BR yaa tsa tei tia 2 an rows rasa ‘ena came sescon ev seaman. prs fr lett meme awe ana tne pene Fa sean Nraoosben Ain Sree ‘Scraonahit 24: Final SAPUIE application Ulwith let of peaducts dlaplayd in und shall You have: now successfully completed a basic SAPUIS anplication that is hosted from within an SAP NelWedvar AS ABAP sysiem consuming a local Galewary OData service anu NITYEnd-to-End How-f0 Guide: Building SAPUIS Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services Related Content SAP NetWeaver Gateway SAP NetWeaver Gateway Community. SCN space ‘SAP NetWeaver Gateway Product Documentation, SAP Help, e.g. the Gateway Security Guide or Gateway ‘Service Builder SAP NetWeaver Gateway - How-To Guides, SCN doc SAP Technical Brief - SAP NetWeaver Gateway, web page, Chris Whealy, SAP AG The now SAP NetWeaver Gateway $ Thomas Moigon, SAP AG, Sopt 2012 Faboaling out User Interfaces with SAP NetWeaver Gateway, SCN blog from SAP Mentor John Moy. October 2012 Take Advantage of Cross-Platform, Cross-Devioe Access While Keeping Your Data Secure with SAP NetWeaver Gateway , SAP Insider articte, Genady Podgaetsky, André Fischer, SAP AG, July 2012 AP Note explaining yhen using Remote Gateway with HTMLS apps in ABAP SAP Web Dispatcher (Remote Proxy Solution from SAP), SAP Online Help, Ul add-on for SAP NetWeaver GW100: SAP NetWeaver Gateway - Building OData Services, SAP Training, 3 days classroom training Ul Development Toolkit for HTMLS Ul Development Toolkil for HTMLS Developer Center, SCN space for SAPUIB hllps:/isapui6. nelweaver ondemand.com/sdh/conlent/Overview.himl , SAPUIS SDK Demo Kit with developer guide documentation, control/API reference and Test Suite |, SCN doc, Bertram Ganz. SAP AG, Ul add-on for SAP NetWeaver Ul Add-On for SAP NetWeaver Product Documentation: SAP Help, Master Guide, Installation Guide, Security Guide, Developers Guide, Admin Guide. Contains also References lo Gateway and WebDispalcher a . SAP note 1759682, central note for the Ul add-on for SAP NetWeaver with up-to-date informtion Introducing the new UI Add-On for SAP NetWeaver, SCN blog, Filip Misovski, SAP AG, September 2012 SAP COMMUNITY NETWORK sensapcom ©2012 SAP AG 4End-o-End How-z0 Guide: Building SAPLIS Applications on SAP NecWeaver AS ABAP 7.31 Consuming Gateway Obata Services Copyright ©Copyright 2014 SAP AG fl rgtes reseed No par of 1s publestion ray be reprevcod or kensmite in any form or for any purpéca we! te saprless permission of SAP AG. Th intgmaton comand herein my be charged wernt poor adhe ‘Some sombre procucts inameted by SAP AG endits dtrnuaors conan peopratany Gofisee companants ef omer sonware vendors Ticroson,iWercows, Excel, look, and PowerPoint aré registered redemsrks of Microscn Corporation ‘Bill DR? DB? Universal Database, System , System iS, System p. System p5, Sysiam x, Systam «’ Systirn 210, Systers 29,210, 9, ISanor, pSeres, xSteies, zSance, eSetvu, ZIV VCS, 08, S300, 05900, O8/400, ASAD. S300 Porake Erierprisn Sofvey, Power, Power Archiectus, POWERS:, POWERS POWERS!, POWERS, POWER OpenPawer, Powe, BetcnPpes. BladeCacter, System Storage GPFS, RACMP. RETAIN. DB Connect, RACE, Redbooks, 052, Paral! Syspiax WVSIESA AIX, Intosigane Miner, WebSphare, Naiznty, Wal nd Incr are Leslee or registered Fodemalie 01 IBM Corpor Lnarc tho roped tagcat of Linas Torvas inthe Lad otter eau, nivel Ingo, Acrcbat, PstScrpk. and Reador aro either trademarks cr roi tadomavks af Adee Stes Incerporaied in te Untod States andic ear counties (roa 6 rested trader ot Gracie Coxparston UNDE, Kp, OF snd Molt ae registered tadamaris a the Cpsn Groun ie, IGA, Prone Neighborhoed! MetaFrame, WinFiame: Widoo#rame and Mdina (Gina Syston Ine trakerarks or togisiesed brates of IML, XML XPTMIL end WC are wademerks Or reqistered trademarks OF WICK, Vlora Wide Web Consorium, Massachusetts Insts a Teennoiegy. Java is @ repssered trademark ot Orecte Corparenon sewaScip is rege aco of Oracle Corpora, ved nies Bera fr bechaclogy ered nd iglemicael hy Neksp SAP. RI, SAP NelWeswer, Dial, Pose de RPh SAP Mhswcss fyDesign, an elas SAP praducls end services mwesened erain as wed as ther rasportve ogos are tacemans oF reqistered racemrts OTA AG mn Gefmany and omer cauninas {Business Qbsects and ine Business Obsectslono, HusnessCojects Coastal Reports, Cristal Lecsions, Wao Inteigence, Xcelsus, ana finer Hucness Onject products ara seences mantoned hare Ge wat as Nat spacve opos ere raasmanns cr feetered Telemark of Tastes Objarde SA Be Unda Saks aber coundiss Mutuses Oot ss en SAP conrgny Aer pet ad emu names pa ts aeons ter serves ndormetonal purzoses only. Nebonal product specications may vary Ingse metenals are sunjectte cuange wihout netca, [Nese matenee are provided by SAL AC end its aMlietee companies SA" Group") for nformetonal purposes caly wthoutrepresentacn ct veranty of any kind, and $A Creup shel nate eble far erocs oF nie wis repens meee The iy arenes SAP Cn pas sve as cn a et ini wntcinly selemenks-acemtyyieg sich adie wine sey Neti fei shoul bs cated cea fecctsinal waranty ‘Pas ete hs srt pret cary SAP COMMUNITY NETWORK Bai SAP AG

You might also like

• Ui5 Example1

  

  No ratings yet

  Ui5 Example1

  32 pages
• JCo Tutorial

  

  No ratings yet

  JCo Tutorial

  58 pages
• SAP UI5 Bar Graph App

  

  No ratings yet

  SAP UI5 Bar Graph App

  9 pages
• Create Odata Service Using RFC FM

  

  No ratings yet

  Create Odata Service Using RFC FM

  26 pages
• ATC Exemption Part3

  

  No ratings yet

  ATC Exemption Part3

  11 pages
• Enhancement Framework - User Exit and Customer Exit

  

  No ratings yet

  Enhancement Framework - User Exit and Customer Exit

  12 pages
• SAP Cloud Platform Neo Vs Foundry

  

  No ratings yet

  SAP Cloud Platform Neo Vs Foundry

  5 pages
• Odata and Icf

  

  No ratings yet

  Odata and Icf

  7 pages
• How Install Offline / Local SAP Web IDE

  

  No ratings yet

  How Install Offline / Local SAP Web IDE

  4 pages
• SAP BASIS Course Content

  

  No ratings yet

  SAP BASIS Course Content

  9 pages
• How To Configure & Execute The ABAP Test Cockpit (ATC) For SAP S - 4 Conversion

  

  No ratings yet

  How To Configure & Execute The ABAP Test Cockpit (ATC) For SAP S - 4 Conversion

  9 pages
• Capgemini Sap SD Interview Questions and Answers Archives - Trenovision

  

  No ratings yet

  Capgemini Sap SD Interview Questions and Answers Archives - Trenovision

  7 pages
• ANSI X12 To SAP Message Type and IDoc Typ

  

  No ratings yet

  ANSI X12 To SAP Message Type and IDoc Typ

  3 pages
• ABAP Webdynpro Interview Prep

  

  100% (4)

  ABAP Webdynpro Interview Prep

  7 pages
• Printing in SAP S4HANA Output Control

  

  No ratings yet

  Printing in SAP S4HANA Output Control

  4 pages
• SAP NetWeaver Gateway Setup Guide

  

  No ratings yet

  SAP NetWeaver Gateway Setup Guide

  6 pages
• ZBC480 - 99 - UNIT2 - EX1 p27

  

  No ratings yet

  ZBC480 - 99 - UNIT2 - EX1 p27

  6 pages
• How To Broadcast A BI Report To A Directory On The Enterprise Portal Server

  

  No ratings yet

  How To Broadcast A BI Report To A Directory On The Enterprise Portal Server

  15 pages
• Transacciones de SAP VMS

  

  No ratings yet

  Transacciones de SAP VMS

  5 pages
• How To Install SAP IDE Local

  

  No ratings yet

  How To Install SAP IDE Local

  22 pages
• OData V2 with V4 Model in OpenUI5

  

  No ratings yet

  OData V2 with V4 Model in OpenUI5

  5 pages
• Sap SNC Configuration - Doc - Sap SNC Configuration

  

  No ratings yet

  Sap SNC Configuration - Doc - Sap SNC Configuration

  9 pages
• How-To Connect Your HANA Cloud Platform Mobile Service Account To Your On-Premise OData Service

  

  No ratings yet

  How-To Connect Your HANA Cloud Platform Mobile Service Account To Your On-Premise OData Service

  25 pages
• SAP ADS Configuration in Netweaver 7.4

  

  No ratings yet

  SAP ADS Configuration in Netweaver 7.4

  8 pages
• SAP Sales Order API Guide

  

  No ratings yet

  SAP Sales Order API Guide

  175 pages
• SAP Adobe Forms: Beginner's Guide

  

  No ratings yet

  SAP Adobe Forms: Beginner's Guide

  12 pages
• Top 50 Abap On Hana Interview Questions

  

  No ratings yet

  Top 50 Abap On Hana Interview Questions

  13 pages
• Fighting Problems of Asynchronous Processing in ABAP - Hello World!

  

  No ratings yet

  Fighting Problems of Asynchronous Processing in ABAP - Hello World!

  8 pages
• Sap BTP Integration Advisor Hand Book

  

  No ratings yet

  Sap BTP Integration Advisor Hand Book

  26 pages
• Background Information About S4HANA Technical Job Repository

  

  No ratings yet

  Background Information About S4HANA Technical Job Repository

  3 pages
• 12 WebDynpro Overview

  

  No ratings yet

  12 WebDynpro Overview

  16 pages
• Sap BTP FSD

  

  No ratings yet

  Sap BTP FSD

  22 pages
• ABAP Program Tips v3

  

  No ratings yet

  ABAP Program Tips v3

  158 pages
• SAP JCo Server Example

  

  No ratings yet

  SAP JCo Server Example

  14 pages
• SAP Sales Cloud - Aug 2020

  

  No ratings yet

  SAP Sales Cloud - Aug 2020

  7 pages
• Courses Listed: Training For Applications With Sales in Sap Erp

  

  No ratings yet

  Courses Listed: Training For Applications With Sales in Sap Erp

  21 pages
• Fiori Analytical App Configuration Steps For Beginners SAP Blogs

  

  No ratings yet

  Fiori Analytical App Configuration Steps For Beginners SAP Blogs

  10 pages
• WebDynpro ABAP Course Details

  

  100% (1)

  WebDynpro ABAP Course Details

  24 pages
• SAP TM Output Management From Non Technical Aspect

  

  No ratings yet

  SAP TM Output Management From Non Technical Aspect

  57 pages
• Monitoring For Processed XML Messages in ABAP Proxy

  

  No ratings yet

  Monitoring For Processed XML Messages in ABAP Proxy

  4 pages
• Serialization of IDOC Message Type

  

  No ratings yet

  Serialization of IDOC Message Type

  4 pages
• Document Management in SAP S4HANA Cloud

  

  No ratings yet

  Document Management in SAP S4HANA Cloud

  5 pages
• BAPI Vs BDC

  

  No ratings yet

  BAPI Vs BDC

  3 pages
• BM Batch Management Batch Information From Non SAP Systems Using SAP MII

  

  No ratings yet

  BM Batch Management Batch Information From Non SAP Systems Using SAP MII

  35 pages
• How To Develop ABAP RICEF Objects in S

  

  50% (2)

  How To Develop ABAP RICEF Objects in S

  23 pages
• SAP NetWeaver Overview

  

  No ratings yet

  SAP NetWeaver Overview

  6 pages
• MOB303 - SAP API Management For Business-to-Consumer (B2C) Mobile Apps

  

  No ratings yet

  MOB303 - SAP API Management For Business-to-Consumer (B2C) Mobile Apps

  38 pages
• SAP Screen Personas Installation and Configuration

  

  No ratings yet

  SAP Screen Personas Installation and Configuration

  15 pages
• Alert Configuration-Step-By-Step Guide-SAP NetWeaver PI

  

  No ratings yet

  Alert Configuration-Step-By-Step Guide-SAP NetWeaver PI

  16 pages
• 1 Sap Products Supported by SWPM .Sar - Systems Based On Sap Netweaver 7.1 and Higher

  

  No ratings yet

  1 Sap Products Supported by SWPM .Sar - Systems Based On Sap Netweaver 7.1 and Higher

  6 pages
• SAP VF01 User Exit Guidance

  

  No ratings yet

  SAP VF01 User Exit Guidance

  1 page
• Process Model To Improve Code Quality in SAP - ABAP For PEWAG

  

  No ratings yet

  Process Model To Improve Code Quality in SAP - ABAP For PEWAG

  56 pages
• SAP Smart Form Driver Program Guide

  

  No ratings yet

  SAP Smart Form Driver Program Guide

  8 pages
• End-To-End How-To Guide - Building SAPUI5 Applications On SAP NetWeaver As ABAP 7

  

  No ratings yet

  End-To-End How-To Guide - Building SAPUI5 Applications On SAP NetWeaver As ABAP 7

  49 pages
• End-To-End How-To Guide - Building SAPUI5 Applications On SAP NetWeaver As ABAP 7.31 Consuming Gateway OData Services

  

  No ratings yet

  End-To-End How-To Guide - Building SAPUI5 Applications On SAP NetWeaver As ABAP 7.31 Consuming Gateway OData Services

  49 pages
• End-To-End How-To Guide: Building SAPUI5 Applications On SAP NetWeaver As ABAP 7.31 Consuming Gateway OData Services

  

  No ratings yet

  End-To-End How-To Guide: Building SAPUI5 Applications On SAP NetWeaver As ABAP 7.31 Consuming Gateway OData Services

  49 pages
• End-To-End How-To Guide Building SAPUI5 Applications On SAP NetWeaver As ABAP 7.31 Consuming Gateway OData Services

  

  100% (1)

  End-To-End How-To Guide Building SAPUI5 Applications On SAP NetWeaver As ABAP 7.31 Consuming Gateway OData Services

  49 pages
• 2-SAP NetWeaver Gateway Service Builder

  

  No ratings yet

  2-SAP NetWeaver Gateway Service Builder

  65 pages
• ODATA Service Creation

  

  83% (6)

  ODATA Service Creation

  23 pages
• A Simple Overview On SAP Netweaver Gateway - SAP Blogs

  

  No ratings yet

  A Simple Overview On SAP Netweaver Gateway - SAP Blogs

  2 pages
• Python Development Cycle

  

  50% (4)

  Python Development Cycle

  3 pages
• Fiori Loginpage Customisation

  

  No ratings yet

  Fiori Loginpage Customisation

  11 pages
• Fiori Launchpad On Portal

  

  No ratings yet

  Fiori Launchpad On Portal

  33 pages
• SAP Fiori Launchpad for Portals

  

  No ratings yet

  SAP Fiori Launchpad for Portals

  20 pages