Professional Documents
Culture Documents
Posted by Murali Shanmugham in UI Development Toolkit for HTML5 Developer Center on Jul 23, 2013
8:12:42 AM
inShare2
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.
2.
3.
4.
5.
6.
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
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
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\toolsupdatesite folder. Select all the components and install them
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.
After restarting eclipse, under File > New > Other, you will be able to see SAPUI5 Application
development and SAP NetWeaver Gateway folders
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.
After installing tomcat, you should be able to see the below folder
Configure the Server in Eclipse so that you could administer it from within Eclipse. Navigate to Window
> Show View > Others to bring the Server .
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.
browse the available services by clicking on the "Catalog" button. Click on the Validate button to
ensure that the service is valid.
In the below List template, provide the View name, select the Entity Set and columns to be displayed.
Once you click Finish, you will see a project created with files generated.
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.
I was also able to test this from the browser by accessing the application on Tomcat server
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.
18529 Views
24 Comments
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
Like (0)
o
Murali Shanmugham Jul 29, 2013 10:44 AM (in response to Martin Schneiders)
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
Like (0)
M Sudhakar Reddy Sep 29, 2014 11:49 AM (in response to Nagesh A)
Hi Eshwar,
Its a binding issue with table. please check it once.
Like (0)
Hi ,
How can i modify that.
Thanks
Nagesh
Like (0)
Shri Vishnu Priyan Krishnamurthy Dec 12, 2013 1:01 PM (in response to Murali
Shanmugham)
hai....can you guide me how to get a jason data Sales order list from a
localhost ...Without any gateway services
Like (0)
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!).
Like (0)
o
Murali Shanmugham Aug 5, 2013 2:38 AM (in response to Simon Kemp)
Thanks Simon. It's really good that SAP is providing us with Trial servers to test most
of their new stuffs.
Like (0)
Hi Murali,
Thank you very much for the detailed explanation, finally I got output..
flow.
Cheers,
Gopi.
Like (0)
Thanks Murali,
Wow, greate blog.
Finally, I clear this problem after reading your blog.
Thanks.
Like (0)
Thanks,
Syam
Like (0)
Thanks Murali,
This is really very helpful to me.
I was just able to start my first SAPUI5 application.
Regards
Shruti
Like (0)
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 ;
o
Christian Sandoval Aug 25, 2014 5:08 PM (in response to Thushara Ratnayake)
Hello,
Can you resolved this fixed?
I am getting some error. Can you help me?
Regards.
Christian
Like (0)
Hi Murali Shanmugham
Thanks for a great write up.
Can you suggest which function modules used in this demo service ?
Like (0)
Sai Krishna Kowluri Jun 13, 2014 6:39 PM
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
Like (0)
Great work.
Thanks Murali...
Like (0)
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
Like (0)
Thanks and apologies for not responding to some of the questions here. Can you please post
your questions in this forum.
Like (1)
New_Gateway_plug-in_for_ Eclipse
Like (1)
Vaibhav Jain Aug 12, 2014 12:16 PM
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.