Skip to Content

Using API Hub with SAP Web IDE

By Meredith Hassett

Learn how to use the SAP API Business Hub integration with SAP Web IDE


You will learn

In this tutorial, you will explore some of the new features that are part of SAP Web IDE Full-Stack. Learn how to use the SAP API Business Hub services catalog that is available out of the box in this version of SAP Web IDE. Create and run an SAPUI5/Fiori Application.

Step 1: Open SAP Web IDE Full-Stack

Make sure you have SAP Web IDE Full-Stack open.

sap web ide multi-cloud service

Steps on how to find and enable SAP Web IDE Full-Stack are available under the how-to guides.

start up page for web ide
Step 2: Create a new project

In the SAP Web IDE, select New Project from Template by either selecting the icon on the home screen or by going to File > New > Project from Template.

new project from template icon

On the Template Selection page, choose the SAP Fiori Worklist Application Template.

template selection location

Click Next.

Step 3: Name the project

On the Basic Information page of the template wizard, provide a name for the project in the Project Name field.

basic information page of template wizard

Click Next.

Step 4: Select the data connection

On the Data Connection page of the template wizard, select SAP API Business Hub from under the Sources options.

SAP API Business Hub in the service Catalog

A list of APIs will populate in the table. You can filter down the APIs by either selecting an API Package from the drop-down or by entering a search term in the search box. In the search box, type employee to find the services available for employee information. Select the Employee Entity Type service from the list.

Services search on Data Connection page of wizard

You may be prompted for a username and password. This is in order for SAP API Business Hub to generate an API key for you. Enter your credentials for the SAP Cloud Platform, which should be the same credentials you use to log in to the SAP API Business Hub. Enter your credentials and click Login.

login for SAP API Business Hub

Once you are successfully logged in, you should see a blue message on the top of the screen saying that Service: Employee Entity Type selected. Once the proper data service is selected, click Next.

selection of Employee Entity Type
Step 5: Customize the template

On the Template Customization page of the template wizard, you will define the properties of the application as well as bind some of the data.

In the Application Settings section, provide the following information for the application.

Field Name Value
Type Standalone App
Title Employee Information
Description (optional)
application settings section on Template Customization page

In the Data Binding section, you will define what collection and attributes to bind to the view.

Provide the following values for the specified fields in this section.

Field Name Value
Object Collection EmployeeCollection
Object Collection ID ObjectID
Object Title Name
Object Numeric Attribute (blank)
Object Unit of Measure Email
data binding section on Template Customization page

Once the data binding and application settings are complete, click Next.

Template Customization page with next selected
Step 6: Finish the app

On the Confirmation page of the template wizard, click Finish to create your application.

Confirmation page with finish indicated
Step 7: Run the application

Once the application is finished being created, you will see a new project in your workspace.

Project file structure in Web IDE

Right Click on the application. Select Run > Run as > Web Application to bring up the run configuration menu.

Right click path for running an app

When prompted to Choose the File to Run, select the index.html file from the File Name list.

file selection for running the application

Click OK.

When your application loads, you will see a list of employee names and emails pulled from the SAP API Business Hub.

expected output of the project as a web app

Next Steps

Updated 01/23/2018

Time to Complete

15 Min



Next Steps

Back to top