Professional Documents
Culture Documents
Consume NetWeaver Gateway Services Via SAPUI5
Consume NetWeaver Gateway Services Via SAPUI5
SAPUI5 - Part 1
Posted by Ivan Femia in SAPUI5 Developer Center on Oct 15, 2012 9:04:42 AM
Tweet
At SAP Inside Track Milan 2012 I presented in a 6 minutes session (unfortuntely my friend,
colleague and co-speakerFabio Di Micco was unable to present) how you can easily consume
NetWeaver Gateway services using SAPUI5 library, in this blog I will resume the concept and
the code and share it with the SCN community.
Prerequisite
1. SAPUI 5 library (Download here)
2. Eclipse IDE for J2EE Developers, I'm using Juno (Download here)
3. SAPUI5 Eclipse plugin installed
4. HTTP Web Server installed (I'm using Tomcat in this example)
5. Basic knowledge of NetWeaver Gateway
Gateway service can be easily created on you ABAP Gateway system, but to speed up the
presentation I used one of the demo services provided by SAP on ES Workplace
(available here) and in particular the classical Flight Sample.
Frontend - SAPUI5
Create a new SAPUI5 project in Eclipse and name it "SITMIL" and check "Create an Initial
view", in the next screen name the view "retrieveFlight"
you should have a project structure like below. This looks like a classical MVC structure.
index.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. id="sap-ui-bootstrap"
8. data-sap-ui-theme="sap_goldreflection">
9. </script>
15. // Just take the shell and place it in the html area called shellArea
16. oShell.placeAt("shellArea");
17. sap.ui.localResources("sitmil");
19. id : "idFlightService1",
22. oShell.addContent(view);
23. </script>
24. </head>
27. </body>
28. </html>
Now let's try to explain the code and understand what we are doing.
First step is to import sapui5 libraries used in this demo
3. data-sap-ui-theme="sap_goldreflection">
4. </script>
Then we initialize the Shell element, that creates a nice look & feel to our page, and we
attach it in block element <div id="shellArea">. The shell will be our main container.
3. appIcon : "http://www.sap.com/global/images/SAPLogo.gif",
5. // Just take the shell and place it in the html area called shellArea
6. oShell.placeAt("shellArea");
As said, the shell will be our main container, what we finally need is to instantiate the main
view content and attach it to the shell
1. sap.ui.localResources("sitmil");
3. id : "idFlightService1",
4. viewName : "sitmil.retrieveFlight",
6. oShell.addContent(view);
retrieveFlight.view.js
SAPUI5 plugin automatically creates the main view JS class with two methods
1. sap.ui.jsview("sitmil.retrieveFlight", {
2. getControllerName : function() {
3. return "sitmil.retrieveFlight";
4. },
5. createContent : function(oController) {
6. }
7. });
what we need it is to implement the createContent method, in this method we will create our
user interface.
2. layout.setWidth('80%');
5. rTitle.setText('All - Flights');
6. rPannel.setTitle(rTitle);
8. oTable.addColumn(
9. new sap.ui.table.Column({
13. }));
14. oTable.addColumn(
20. oTable.addColumn(
25. }));
26. oTable.addColumn(
31. }));
32. oTable.addColumn(
37. }));
38. oTable.addColumn(
43. }));
46. false,
47. "GW@ESW",
48. "ESW4GW");
49. oTable.setModel(oModel);
50. oTable.bindRows("FlightCollection");
51. rPannel.addContent(oTable);
52. layout.createRow(rPannel);
53. this.addContent(layout);
54. }
2. layout.setWidth('80%');
5. rTitle.setText('All - Flights');
6. rPannel.setTitle(rTitle);
Next step we configure our table layout, it remembers me the WDINIT method in WDA and
the ALV configuration. For each column we need to specify the field name of the collection
property (FlightCollection in the gateway service, seemetadata of our Gateway service for
more details) that we want to bind and display in that column
2. oTable.addColumn(
3. new sap.ui.table.Column({
6. sortProperty: "AirLineID"
7. }));
8. oTable.addColumn(
9. new sap.ui.table.Column({
13. }));
14. oTable.addColumn(
19. }));
20. oTable.addColumn(
25. }));
26. oTable.addColumn(
32. oTable.addColumn(
37. }));
We need to attach our layout (yes we draw the layout until this point) to our oData service.
Here it comes the power of SAPUI5 library, with only 3 lines of code we are able to consume
an oData resource and bind a collection to our table; each row of our table will be an entity of
the FlighCollection
2. "http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_
2",
3. false,
4. "GW@ESW",
5. "ESW4GW");
6. oTable.setModel(oModel);
7. oTable.bindRows("FlightCollection");
We are almost done, we only need to attach our table to the panel
1. rPannel.addContent(oTable);
2. layout.createRow(rPannel);
3. this.addContent(layout);
Final step is to export the WAR file into Tomcat webapps directory. You can also deploy it on
your preferred HTTP web server, for example I also deployed a live demo on my Apache HTTP
server.
Warning: You have to accept Cross Origin Request on you browser, otherwise you will see
empty tables
In part 2 we enhance this demo focusing on navigation property. In the meantime, below the
recording of my session at SAP Inside Track Milan 2012.