Skip to Content
Previous

Using API Hub with Web IDE

By Meredith Hassett

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

You will learn

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

Details


Step 1: Open Multi-Cloud Web IDE

Make sure you have the SAP Web IDE Multi-Cloud Version open.

sap web ide multi-cloud service

Steps on how to find and enable the SAP Web IDE Multi-Cloud Version are available in the previous tutorial.

start up page for web ide
Please log in to access this content.
Step 2: Create a new project

In the 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.

Please log in to access this content.
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.

Please log in to access this content.
Step 4: Select the data connection

On the Data Connection page of the template wizard, select Service Catalog from under the Sources options. In the drop down menu to select a system, find the SAP API Business Hub option.

SAP API Business Hub in the service Catalog

You may be prompted for a username and password. 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.

login for SAP API Business Hub

If you successfully login, a list of services will populate in the Services pane. In the search box, type employee to find the services available for employee information.

Services search on Data Connection page of wizard

Select the Employee Entity Type service from the list. You should see a blue message on the top of the screen saying that Service: Employee Entity Type selected.

selection of Employee Entity Type

You can open up the Employee Entity Type service to see what collections are provided with this API Service. Drilling down further reveals the attributes available for each collection. Once the proper data service is selected, click Next.

Please log in to access this content.
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
Namespace api.employee.app
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
Please log in to access this content.
Step 6: Finish the app

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

Confirmation page with finish indicated
Please log in to access this content.
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
Please log in to access this content.

Next Steps

Updated 06/27/2017

Time to Complete

15 Min

Beginner

Tags

Prerequisites

Next Steps

Next
Back to top