Consuming APIs from Web IDE via SAP API Management
EDITORS NOTE: As mentioned in the blog announcement, some URLs have changed, if you have errors please check your URLs to ensure they match the changes. BLOG LINK
So far we have mainly talked about how to expose services via SAP API Management. Obviously we have just scratched the surface and we will continue to provide more and more information on how to build rich APIs.
In this blog we will focus on the consumption side. Of course you can use whatever technology you chose to consume the APIs, however, being based on the SAP HANA Cloud Platform it is fairly simple to leverage other services. One of these services is the SAP Web IDE which allows you to build SAP UI5 based applications like SAP Fiori.
You might have already seen how easy it is to consume OData services based on SAP Gateway. The great thing: the same is possible for APIs from SAP API Management.
The first step is to create two Destinations which will be used by the SAP Web IDE. One will point to the Developer Portal — having the Web IDE Usage = api_mgmt_catalog — from where the API Proxies will be retrieved and the second is to the API Portal — using the Web IDE Usage = api_mgmt_proxy — which is used during the actual runtime:
Name=API_Management_Dev_Portal_Trial
URL=https\://devportalu34f5b50f-p1941xxxxtrial.hanatrial.ondemand.com/
Description=A – API Management – Dev Portal – Trial
Type=HTTP
Authentication=AppToAppSSO
WebIDEUsage=api_mgmt_catalog
WebIDEEnabled=true
CloudConnectorVersion=2
ProxyType=Internet
The URL to your Developer Portal can be retrieved from your HCP Cockpit from where you enabled the SAP API Management, Free Trial of SAP API Management on HANA Cloud Platform is available now!
Name=API_Managment_EndPoint_trial
URL=https\://p1941xxxxtrial-trial.apim1.hanatrial.ondemand.com\:443
Description=B – API Management – runtime – endpoint – trial
Type=HTTP
Authentication=NoAuthentication
TrustAll=true
WebIDEUsage=api_mgmt_proxy
WebIDEEnabled=true
CloudConnectorVersion=2
ProxyType=Internet
NOTE: The URL for API Portal has changed, and now requires you to add your P#. You can get this value from the API Proxy URL generated for any API Proxy in your API Portal.
That’s more or less everything you need to do.
If your API Proxy is protected via an API Key (the Verify API Key Policy) you have to make sure that the policy is looking for the value APIKey in the Header property:
So let’s get started. For the following steps, I am using a very simple API Proxy that is connected to the GWSAMPLE_BASIC Service on ES4 (similar to what was done here, How to use SAP API Management on HCP Trial)
Open the SAP Web IDE (the URL looks something like https://webide-<yourID>trial.dispatcher.hanatrial.ondemand.com/), select New Project
and click on the “SAP Fiori Master Detail Application” template and click on Next
Enter a project name and click on Next
from the dropdown select the Destination you had previously created (when you are prompted for a username and password, enter your username from the HCP system). You will see a list of API Proxies which are available in your SAP API Management developer portal. Select one of the Proxies and click on Subscribe (if you cannot see the Subscribe button, scroll down a little
Now that you have selected the Proxy that you want to consume, you need to select the Product this Proxy is assigned to. Select the product and click on “Select Product”
Now click on Next and you can assign properties from the API Proxy to your SAP Fiori fields.
We are almost done. The only thing left is that — if you had set a Verify API Key Policy — you have to manually add the API Key (something that was done automatically during the designtime in the Wizard; for the runtime you still need to add this manually). To do so, open the manifest.json file in the webapps folder and copy the following lines in the sap.ui5 -> models -> settings section (you might need to switch to the Code Editor at the bottom of the screen). For the API Key you obviously have to take your own for which an Application was automatically created in the Developer Portal.
,
"headers" : {
"APIKey": "4q8Db5rgmnIrYXr4xxx"
}
That’s it. Click on Save and run your application which is now connected via SAP API Management to your backend system.
.
For more Blogs and Information about using SAP API Management please visit our Living Overview Document
Hi Kootesh,
please make sure that you have the WebIDEUsage property set correctly for both destinations. Then the Destination should show up.
However, with the latest update on SAP Web IDE the integration to SAP HCP, API Management has slightly changed. We are working on updating the documentation and new flow.
Regards,
Holger.
Hi Holger,
Nice blog.
I am trying to follow the steps as detailed by you. However, I am encountering "API Authentication not supported" error. Appreciate any pointers .
Thanks,
Anand
Hi Anand,
sorry for the late reply. I only now saw your reply...
In most cases the error that you have is because of a vailed API Key verification. One thing that I like to do for troubleshooting is start the F12 Developer Tool in my browser and repro the issue. Then in the network trace you can often see why exactly you get this error.
Actually depending on the version template that you are using the changes in the manifest file look now a little different:
Hi Holger,
Thanks for your reply.
I am encountering the error while using the wizard to generate using the template stated in your blog. The error I am encountering is even before the generation of manifest.json file. I believe the project gets created once the wizard is complete for me to make any amends? The error just states that the "Authentication Type is not supported". I am not sure what authentication type it is referring to. It is suppose to connect to the ES4 backend system. Any idea?
Appreciate your help!
Thanks & Best Regards,
Anand Patil
same issue
Hi Pablo,
The URL in this walkthrough has been updated, and should resolve any issues you have.
Regards,
Elijah
thanks now is working !!!!!
Hi Holger,
I was trying to follow the document. All the necessary steps are already executed with regard to setting up SAP API successfully. While following the above steps, at step where Product should be selected to which API is subscribed, I am getting below error.
Can you help me here? After selecting the correct Product using 'Select'button , I get the error message. Selecting Master-Detail template has no effect on error.
Kind Regards,
Purvang
Hello Purvang,
did you found a solution?
I got the same problem and can't find a solution yet...
Thanks and regards,
Johann
Hello,
after some more investigation I was able to connect WEB IDE with Developer Portal.
I've made two mistakes.
I hope this can help anyone who is facing similar issues.
Best regards,
Johann