Skip to Content
Previous

Consume the API Proxy in SAP Web IDE

By Meredith Hassett

In this tutorial you will learn how to consume the API Proxy created in the previous steps in SAP Web IDE

You will learn

Since SAP Cloud Platform, API Management is one of many services on the SAP Cloud Platform it also offers a deep integration in SAP Web IDE. With this integration you can easily browse and consume services from SAP Cloud Platform, API Management and directly create SAP Fiori like SAPUI5 applications leveraging one of the templates offered in SAP Web IDE.

Details


Step 1: Learn about the SAP Cloud Platform Destinations needed

Create SAP Cloud Platform Destinations that between them, give Web IDE both design time and runtime access to the API Proxies created in API Management.

Which destination is used by Web IDE at runtime?
×
Step 2: Learn about supplying an API Key to a request

You will see how a special security token known as the “API Key” or “Application Key” must often be sent as part of the request to invoke an API Proxy. You will see how to identify whether the API Key should be sent as part of the query string or as an HTTP header field, and what variable name should be used to carry that value. Learn more about providing your API key in a request to your API Proxy.

If you receive an error that says request.queryparam.apikey, where do you need to supply the apikey?
×
Step 3: Learn about accessing the Proxy through Web IDE

Consume an API Proxy in Web IDE, assuming the API proxy exposes an OData service.

When accessing your Developer Portal in Web IDE's template wizard, you see a list of your API Proxies. What must you select next to complete the subscription process?
×
Step 4: Log onto the SAP Cloud Platform Cockpit
Step 5: Open your destinations

Under Connectivity, click on Destinations.

Click on Destination
Step 6: Create API Management Catalog destination

<<<<<<< Updated upstream
Enter/confirm all fields in the Destination configuration section with the information below.

Field Name Value
Name APIM_DevPortal_Trial
Type HTTP
Description Destination to API Developer Portal
URL take the URL of the developer Portal seen in Activate SAP Cloud Platform, API Management on SAP Cloud Platform Trial, e.g. https://devportalu34f5b50f-YourIDtrial.hanatrial.ondemand.com
Proxy Type Internet
Authentication AppToAppSSO

=======
Click on New Destination.

Click on New Destination

Stashed changes

Provide the following information to create a destination for the API Management Catalog. This will provide Web IDE access to all the API Proxies you have exposed through published products.

Field Value
Name APIM_DevPortal_Trial
Type HTTP
Description Destination to API Developer Portal
URL take the URL of the Developer Portal seen in Activate SAP Cloud Platform, API Management on SAP Cloud Platform Trial, e.g. https://devportalu34f5b50f-<your-P-User>trial.hanatrial.ondemand.com
Proxy Type Internet
Authentication AppToAppSSO
Configure Destination

Click (twice) on New Property button. Enter the following information for the new properties.

Click on New Property
Field Value
WebIDEEnabled true
WebIDEUsage api_mgmt_catalog
Add Properties

Click on Save.

Click on SAPWebIDEviaAPIManagement
Step 7: Create destination for the API Proxy

To create a second destination click on New Destination again

Click on New Destination

Provide the following information to the new destination.

Please make sure to enter the SAP Cloud Platform username and password, not the username and password for the ES4 SAP Developer System

Field Value
Name APIM_Endpoint_Trial
Type HTTP
Description Destination to API Portal
URL https://trial.apim1.hanatrial.ondemand.com:443
Proxy Type Internet
Authentication Basic
Username <Your SAP Cloud Platform Username>
Password <Your SAP Cloud Platform Password>
Enter values

Click on New Property.

Click on New Property

Add three Additional Properties fields by clicking on the New Property button once for each property.

Field Value
TrustAll true
WebIDEEnabled true
WebIDEUsage api_mgmt_proxy
Add additional properties

Click on Save.

Click on Save
Step 8: Open your Web IDE

You can find the SAP Web IDE by clicking on Services.

Click on Services

From the section Dev & Ops, select SAP Web IDE. (Not the full-stack version!)

Click on SAP Web IDE

Click on Open SAP Web IDE

Open SAP Web IDE
Step 9: Create new project

Click on File > New > Project from Template.

Create new Template
Step 10: Select template

From the Template Selection windows click on SAP Fiori Master-Detail Application and click on Next.

Select Master Detail template
Step 11: Name the project

Enter a project name: SAPWebIDEviaAPIManagement and click on Next.

Enter name and click on Next
Step 12: Select the Destination to API Developer Portal

From the Service Catalog drop-down, select the Destination to API Developer Portal which you created in one of the previous steps.

Select Destination to API Developer Portal
Step 13: Select service and subscribe

Select the GWSAMPLE_BASIC API Proxy created in Create an API Proxy http://www.sap.com/developer/tutorials/hcp-apim-create-api.html) and click on Subscribe. From there select the related Product from Add the API Proxy http://www.sap.com/developer/tutorials/hcp-apim-create-product.html)

Select service and click on Subscribe
Step 14: Click next

Click on Next

Click on Next
Step 15: Enter mapping details

Enter:

Field Name Value
Title SAP Fiori App based on API Management
Namespace com.sap.apim
Description Fiori app leveraging API Management
Object Collection SalesOrderSet
Object Collection ID SalesOrderID
Object Title SalesOrderID
Object Numeric Attribute GrossAmount
Object Unit of Measure CurrencyCode
Line Item Collection ToLineItems
Line Item Collection ID ItemPosition
Line Item Title ProductID
Line Item Numeric Attribute GrossAmount
Line Item Unit of Measure CurrencyCode

and click on Finish

Enter mapping information
Step 16: Open manifest.json

Double click on the manifest.json file from SAPWebIDEviaAPIManagement -> webapp

Open manifest.json
Step 17: Open code editor

Switch to the Code Editor view by clicking on Code Editor

Switch to Code Editor
Step 18: Add code

Search for sap.ui5 and go to the models section. There add the following code snipped right after the “sap-documentation”: “heading” } entry:

      ,
			"headers": {
				"APIKey": "<yourAPIKey>"
			}

Make sure not to forget the first “,”

Add Code snippet
Step 19: Open the API Developer Portal

In order to get the API Key you need to open the API Developer Portal in a new tab, e.g. https://devportalu34f5b50f-<your-P-User>trial.hanatrial.ondemand.com/#/shell/discover

Switch to Developer Portal
Step 20: Click Consume

Click on the Hamburger menu and click on Consume

Click on Consume
Step 21: Open SAPWebIDEviaAPIManagement

Click on the Application SAPWebIDEviaAPIManagement which was automatically created by the SAP Web IDE Wizard

Open Application
Step 22: Copy application key

Mark and copy the Application key

Copy Application Key
Step 23: Paste application key

Go back to the SAP Web IDE and paste the correct application key in the <yourAPIKey> field from the manifest.json file

Replace API Key

Click on Save

Save in Web IDE
Step 24: Run App in FLP Sandbox

Right click on the Project and select Run > App in FLP Sandbox

Run the project

You should see a Fiori app connecting via SAP API Management to the SAP Gateway Developer System ES4.

See results

Next Steps

Updated 09/18/2017

Time to Complete

20 Min.

Beginner

Next Steps

Next
Back to top