Skip to Content
Author's profile photo Former Member

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!

 

Destination1.png

 

 

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

Destination2.png

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:

APIProxy.png

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

NewProject.png

and click on the “SAP Fiori Master Detail Application” template and click on Next

MasterDetail.png

Enter a project name and click on Next

ProjectName.png

 

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

 

Subscribe.png

 

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”

 

SelectProduct.png

 

Now click on Next and you can assign properties from the API Proxy to your SAP Fiori fields.

 

FioriAssignFields.png

 

 

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"
  }

 

 

/wp-content/uploads/2016/05/manifest_963768.png

 

That’s it. Click on Save and run your application which is now connected via SAP API Management to your backend system.

 

FioriApp.png 

.

 

 For more Blogs and Information about using SAP API Management please visit our Living Overview Document

 

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Anand Patil
      Anand Patil

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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:

      1. There add the following code snippted right after the "preload”: true entry:
      
      
              ,
      
                      "settings": {
      
                         "headers": {
      
                               "APIKey": "<yourAPIKey>""
      
                           }
      
                      }
      
      Note: Make sure that you do not forget the first “,”
      
      Note: After the APIKey there should be 4 closing “}”
      
      
      Let me know if this helps. 
      
      Regards, 
      
       Holger.
      
      
      Author's profile photo Anand Patil
      Anand Patil

      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

      Author's profile photo Pablo Grasso
      Pablo Grasso

      same issue

      Author's profile photo Elijah Martinez
      Elijah Martinez

      Hi Pablo,

      The URL in this walkthrough has been updated, and should resolve any issues you have.

      Regards,
      Elijah

      Author's profile photo Pablo Grasso
      Pablo Grasso

      thanks now is working !!!!!

      Author's profile photo Purvang Zinzuwadia
      Purvang Zinzuwadia

      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

      Author's profile photo Johann Fischer
      Johann Fischer

      Hello Purvang,

       

      did you found a solution?

       

      I got the same problem and can't find a solution yet...

       

      Thanks and regards,

      Johann

       

      Author's profile photo Johann Fischer
      Johann Fischer

      Hello,

       

      after some more investigation I was able to connect WEB IDE with Developer Portal.

      I've made two mistakes.

      • First: I used the URL from API portal for the "API_Managment_EndPoint_trial" Destination, but this have to be the Proxy URL from the APIs. -> my mistake 🙂
      • Second: I was able to see that the metadata problem was caused from a Policy step which I was using. (XMLToJson step).

      I hope this can help anyone who is facing similar issues.

       

      Best regards,

      Johann