SAP Gateway has come a long way. It’s actually quite pleasant to develop a quick REST web service these days with it. With the growing presence of Gateway services, the question keeps popping up with our clients on how to connect to non-SAP services. In this blog I’ll show one simple option for using Gateway as a proxy and hosting SAPUI5 application all in one place. Our example is an external contract management application.
You can see here how the application will eventually look (SAPUI5):
Our external web service itself uses XML-based REST services. We developed this quickly to demonstrate this application.
We have two services. One that includes a list of contracts, and one that goes into the details of a contract.
Get a list:
Get a single contract:
Next, in ABAP, create a function module to call these services. The function module should utilize the http client class: if_http_client.
Use this class to make an outbound web service call, and parse the xml and return it to the function module.
It looks like this:
Use the same concept for the function module for the get details call.
Next, jump into Gateway and use transaction SEGW to define your new service. We defined the get list, and get details.
In the service implementation we call a remote rfc which are the functions we defined above:
After activated, you can test out your new OData services:
So now we can connect our SAPUI5 to Gateway just like any other service!
If you haven’t done SAPUI5 in a while, things have really changed. The eclipse add-on is very complex to install, but sure does a great job once you have it. I particularly like the team components which streamline the upload to the BSP. Manually uploading this content was very painful!
Create a new SAPUI5 project in eclipse and check it into your ABAP system as a new BSP. Start with the template that creates the index.html
And include the controller and view:
This guide is really a lot of help if you haven’t done this before: https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/40d59930-791c-3010-2abd-ac7793ad6c57?QuickLink=index&overridelayout=true&59017145615734
I created a simple table and set a binding for my get list. I also added an event on a button in the list that creates a dialog popup and gets the details of that contract.
Make sure to set your binding to your collection that matches what you have in gateway: oTable.bindRows(“/ContractCollection”)
Once this is complete, you can go into your BSP and test your application:
It performs very nicely. Clicking on each contract makes another ajax call to the get contract details.
For more demonstrations, please see our work at Mindset Consulting: https://mindsetstg.wpengine.com/solutions.html
You can also follow me (Gavin Quinn) on LinkedIn: https://lnkd.in/gvjKb4
Thanks to Paul Modderman, one of my favorite ABAP gurus who provided some incredible guidance on this topic: https://www.linkedin.com/pub/paul-modderman/4/680/39a
If you are interested in viewing similar articles, visit our blog, here.
View our LinkedIn, here.
