Skip to Content
Author's profile photo Murali Shanmugham

Developing a simple List based SAPUI5 Application

I have been for long thinking of writing my first SAPUI5 Application.  I thought I will share my experience especially for beginners like me. I still remember my first simple Sales Order Display screen which I developed using Abstract Portal Component (APC) back in 2005. Since then, I have been developing applications using different technologies – BSP/WDJ/WDA/Visual Composer and have seen lot of changes in the UI space. SAPUI5 for sure is to stay for its own features and benefits. I believe we will get to see more SAP transactions delivered with SAPUI5 in the near future.  I have already been introduced to some of these SAPUI5 screens in HR Renewal and Identity Management applications.

I will quickly demonstrate how to build a simple list based screen (Sales Order List Screen) without the need to depend on having a NetWeaver Gateway or an SAP ABAP 7.31 system with  UI Add-on in your own environment.  I would highly recommend to read this tutorial posted by Bertram Ganz. When I started building this application, I got stuck in several places and I was lucky to find solutions posted by others in different places.

Prerequisites:

  1. NetWeaver Gateway Server – I am using the SAP Netweaver Gateway Service Consumption Demo System offered by SAP. You can register for an access using this link
  2. Install Eclipse IDE (Juno)
  3. Download SAPUI 5 library 1.12.1
  4. Setup Eclipse to include SAPUI5 Plug-in
  5. Download NetWeaver Gateway Eclipse Plugin
  6. Download and Install Tomcat Web Server
  7. Modern browser – I am using Firefox with the Add-ons RESTClient and JSONView

Steps:

  1. I registered an account to access the Demo NetWeaver Gateway system. I used the Sales Order example – Query – Sales Order (Header). The steps to obtain access and launch SAPGUI are explained in detail. Once you have the URL of your service, you can test it using REST Client to see the output  

          REST.jpg

2. Download and install Eclipse Juno editor along with JDK 1.6. Make sure that the JAVA_HOME and classpath are set accordingly

3. The downloaded SAPUI5 Library would have the below folder structure

/wp-content/uploads/2013/07/1_250100.jpg

4. To install the SAPUI5 Plug-in, Open Eclipse and navigate to Help > Install New Software.. Provide Name for the Repository and click on “Local” to locate the \HTML5Evaluation_complete_1.12.1\tools-updatesite folder. Select all the components and install them

/wp-content/uploads/2013/07/2_250102.jpg

5. NetWeaver Gateway plug-in folder structure is shown below

/wp-content/uploads/2013/07/3_250103.jpg

Similar to the above steps, Open Eclipse and navigate to Help > Install New Software.. Provide Name for the Repository and click on “Local” to locate the \SAPNetWeaverGatewayPluginForEclipse_2.6.400 folder. Select only the required components and install them.

/wp-content/uploads/2013/07/4_250104.jpg

After restarting eclipse, under File > New > Other, you will be able to see SAPUI5 Application development and SAP NetWeaver Gateway folders

/wp-content/uploads/2013/07/5_250105.jpg

6. Download and Install Tomcat 7 server.  I used the 32-bit/64-bit Windows Service Installer to install Tomcat. The installation is straight forward and Apache website has lot of help documents on this.

/wp-content/uploads/2013/07/6_250112.jpg

After installing tomcat, you should be able to see the below folder

/wp-content/uploads/2013/07/7_250113.jpg

Check if your server is working by using http://localhost:8080

/wp-content/uploads/2013/07/8_250114.jpg

Configure the Server in Eclipse so that you could administer it from within Eclipse. Navigate to Window > Show View > Others to bring the Server .

/wp-content/uploads/2013/07/9_250115.jpg

Add the Apache Tomcat v7 server.

/wp-content/uploads/2013/07/10_250116.jpg

Now we are ready to build the application.

In Eclipse, Navigate to File > New > Other. Most of the tutorials on SCN, show how to create an SAPUI5 application from scratch using “SAPUI5 Application development”. I used the NetWeaver Gateway wizard to quickly build an SAPUI5 application with the code auto-generated.

Select “Starter Application Project” and proceed with the wizard.

/wp-content/uploads/2013/07/11_250136.jpg

Select “HTML5” in the below screen and provide a Project name

/wp-content/uploads/2013/07/12_250137.jpg

Select SAPUI5 option instead of JQuery Mobile.

/wp-content/uploads/2013/07/13_250138.jpg

Provide the Gateway Service URL. In my case, I provided https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/. You can browse the available services by clicking on the “Catalog” button. Click on the Validate button to ensure that the service is valid.

/wp-content/uploads/2013/07/14_250142.jpg

In the below List template, provide the View name, select the Entity Set and columns to be displayed.

/wp-content/uploads/2013/07/15_250149.jpg

Once you click Finish, you will see a project created with files generated.

/wp-content/uploads/2013/07/16_250150.jpg

While testing this application initially, I got to see blank screens/no data being retrieved. On researching in SCN, I found out that below changes had to be made.

In the file connectivity.js, I had make some changes.

var serviceUrl = “https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/“;

changed to

var serviceUrl = “proxy/https/sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/”;

This is because of Same-Origin Policy which is explained in the E2E Tutorial (which I mentioned above). Since, I am just having a Tomcat server, I continued with this fix.

In Index.html

src=”./sapui5-1.4/resources/sap-ui-core.js” changes to src=”./resources/sap-ui-core.js”

In mylistscreenController.js

oTable.bindRows(“SalesOrders”); changes to oTable.bindRows(“/SalesOrders”);

After making all these changes, I used the option to “Run on Server”. This would open another window within eclipse and show the output.

/wp-content/uploads/2013/07/18_250154.jpg

I was also able to test this from the browser by accessing the application on Tomcat server

/wp-content/uploads/2013/07/19_250155.jpg

You could still go ahead and develop the same for a mobile application and package the source code into a Mobile Application which can be deployed on to a mobile device using products like Titanium or Adobe Phonegap (cloud service)

I hope you found this informative.

Assigned Tags

      26 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Martin Schneiders
      Martin Schneiders

      Thanks Murali,

      great stuff! This was really very helpfull to me.

      I was just able to start my first SAPUI5 Screen 🙂

      Thanks a lot and best regards

      Martin

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Good to know that you found it useful. Thanks.

      Author's profile photo Nagesh A
      Nagesh A

      Thanks Murali,

      Good blog  for UI5 development.

      I had started developing a simple UI5 app by following your steps, my local server is working fine, my service url is working fine and i have done all the changes suggested by you but i am unable to get any data. It is just simply showing empty columns and no data.

      Can you please help me out on this.

      Thanks

      Nagesh

      Author's profile photo Former Member
      Former Member

      Hi Eshwar,

      Its a binding issue with table. please check it once.

      Author's profile photo Nagesh A
      Nagesh A

      Hi ,

           How can i modify that.

      Thanks

      Nagesh

      Author's profile photo Former Member
      Former Member

      hai....can you guide me how to get a jason data Sales order list  from a localhost ...Without any gateway services

      Author's profile photo Simon Kemp
      Simon Kemp

      Thanks for sharing Murali and nice job outlining all the steps required to get started with this - for me it was a good reminder of the NW Gateway Eclipse plugin (I had sort of forgotten it existed!).

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Thanks Simon. It's really good that SAP is providing us with Trial servers to test most of their new stuffs.

      Author's profile photo Shen Peng
      Shen Peng

      It will be excellent to support JSON.

      Author's profile photo Former Member
      Former Member

      Hi Murali,

      Thank you very much for the detailed explanation, finally I got output.. 🙂 And I understand the flow.

      Cheers,

      Gopi.

      Author's profile photo Former Member
      Former Member

      Thanks Murali,

      Wow, greate blog.

      Finally, I clear this problem after reading your blog.

      Thanks.

      Author's profile photo Syam Babu
      Syam Babu

      Good Blog and also helpful for beginner like me 🙂

      When I am installing the \SAPNetWeaverGatewayPluginForEclipse_2.6.400 getting below

      error.

      Cannot complete the install because one or more required items could not be found.

        Software being installed: SAP NetWeaver Gateway – HTML5 Toolkit 2.6.100.201211111631 (com.sap.iw.gw.oc.eclipse.html5.feature.feature.group 2.6.100.201211111631)

        Missing requirement: Component List 2.6.400.201211111622 (com.sap.iw.gw.oc.eclipse.component.list 2.6.400.201211111622) requires 'bundle org.junit4 4.8.1' but it could not be found

        Cannot satisfy dependency:

          From: SAP NetWeaver Gateway – HTML5 Toolkit 2.6.100.201211111631 (com.sap.iw.gw.oc.eclipse.html5 2.6.100.201211111631)

          To: bundle com.sap.iw.gw.oc.eclipse.patterns 2.5.400

        Cannot satisfy dependency:

          From: SAP NetWeaver Gateway – HTML5 Toolkit 2.6.100.201211111631 (com.sap.iw.gw.oc.eclipse.html5.feature.feature.group 2.6.100.201211111631)

          To: com.sap.iw.gw.oc.eclipse.html5 [2.6.100.201211111631]

        Cannot satisfy dependency:

          From: Patterns 2.6.400.201211111622 (com.sap.iw.gw.oc.eclipse.patterns 2.6.400.201211111622)

          To: bundle com.sap.iw.gw.oc.eclipse.component.list 1.0.0

      Thanks,

      Syam

      Author's profile photo Former Member
      Former Member

      Thanks Murali,

      This is really very helpful to me.

      I was just able to start my first SAPUI5 application.

      Regards

      Shruti

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      great stuff..  would try it very soon.

      Author's profile photo Former Member
      Former Member

      Hi Murali,

      Great stuff. Thanks .

      I am getting following error after i validate the service url . Can you please assist me to fix this .

      screenshots as follows ;

      2014_04_08_14_19_01_Java_GBS_PresentationFeedback_WebContent_index.html_Eclipse.png

      2014_04_08_14_05_04_Greenshot_capture_form.png

      Thanks a lot in advance ..

      Regards,

      Thushara

      Author's profile photo Former Member
      Former Member

      Hello,

      Can you resolved this fixed?

      I am getting some error. Can you help me?

      Regards.
      Christian

      Author's profile photo Virinchy P
      Virinchy P

      Hi Murali Shanmugham

      Thanks for a great write up.

      Can you suggest which function modules used in this demo service ?

      Author's profile photo Former Member
      Former Member

      Thanks a lot for the detailed blog post Murali 🙂

      Author's profile photo Former Member
      Former Member

      Hi Murli,

      Where do you write the query, my confusion is how do we access the SAP tables to get/update the data.

      Please let me know if you need more information.

      Thanks

      Rahul

      Author's profile photo Yokesvaran kumarasamy
      Yokesvaran kumarasamy

      Great work.

      Thanks Murali...

      Author's profile photo Yokesvaran kumarasamy
      Yokesvaran kumarasamy

      Hi Murali,

      The above application is working in Desktop browser, but when im executing this in iPad through WIFI its not working.

      Can you help me with this issue?

      Regards

      Yokesvaran Kumarasamy

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Thanks and apologies for not responding to some of the questions here. Can you please post your questions in this forum.

      Author's profile photo Former Member
      Former Member
      Author's profile photo Former Member
      Former Member

      Hey Murali

      When I try to integrate the plugin in Eclipse only search console installs.

      No other thing than 'search console' installs. I have attached the screenshot.

      Help me to solve this. Its very urgent.SAP_Neatweaver_Gateway_Plugin.pngNetweaver(1).png

      Author's profile photo Former Member
      Former Member

      Hi Murali,

      I dont see any download option for NetWeaver Gateway Eclipse Plugin

      Can you please help me out here Plz.. !

      Thanks

      Josh

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Josh,

      I have not been using this plug-in in the last few years and hence not sure where it is at the moment. Can you please post a question in one of the relevant forums and someone should be able to respond to your question.

      Thanks,