exercise 4b: call sap api business hub api from a sapui5 … · building extensions with sap...

Building Extensions with SAP Extension Suite

Exercise 4b: Call SAP API Business Hub API from a SAPUI5

Application

Exercise Scenario

In this exercise, you will build a basic UI5 application that uses data from the SAP SuccessFactors API to

populate a list.

Estimated Time to Complete: 25 minutes

Step 1: Create destinations to the SAP API Business Hub

The first step is to create two Destinations in the BTP.

Follow the steps below to complete the exercise.

Steps and Instructions Additional Information

1 Enter your BTP trial environment and open the

trial Subaccount.


2 Select Destinations on the left.

3 Select the New Destination button.

The Destination Configuration page appears.

You can populate this screen with the information

about your destination.


4 Populate the fields with the values below:

Name = apihub_sandbox

Type = HTTP

Description = SAP API Business Hub –

Sandbox end point

URL = https://sandbox.api.sap.com

Proxy Type = Internet

Authentication = NoAuthentication

5 Select the New Property button on the right.

The Additional Properties area appears on the

right.

https://sandbox.api.sap.com/


6 Set the dropdown to

HTML5.DynamicDestination, type true into the

text field, and select the New Property button.

The new property is created and two new fields

appear allowing you to create another property.

7 Repeat step 6 twice, to create the following two

additional properties, then select the Save

button.

WebIDEEnabled = true

WebIDEUsage = apihub_sandbox

The new Destination is displayed.

8 Repeat steps 3 – 7 to create and save another

destination with the following attributes:

Name = SAP_API_Business_Hub

Type = HTTP

Description = SAP API Business Hub

URL = https://api.sap.com

Proxy Type = Internet

Authentication = NoAuthentication

You will see two Destinations listed.

https://api.sap.com/


Additional Properties:

HTML5.DynamicDestination = true

WebIDEEnabled = true

WebIDEUsage = apihub_catalog

Step 2: Create a Fiori Dev Space and Connect to a Cloud Foundry Endpoint

The next step is to create a new SAP Fiori Dev Space and connect it to your Cloud Foundry environment.



1 Select Instances and Subscriptions from the

left.

2 Select the Go to Application icon for the SAP

Business Application Studio.

The list of your current Dev Spaces is displayed.

You are limited to only two Dev Spaces at one

time in the BTP free trial, with only one running at

any time. You may need to delete a Dev Space

before you can proceed.


If you have just completed Module 3, you will

already have a Fiori space setup, which you can

use again for this exercise. Simply select the

Start button to re-activate that Dev Space and

then select its name once it is running.

Otherwise, you can create a new Dev Space by

following the steps below.

3 Select the Create Dev Space button.

4 Type Demo_Fiori in the Dev Space Name field,

make sure the SAP Fiori option is selected, and

then select the Create Dev Space button.

The Dev Space creation process begins. Wait

until the status is RUNNING before proceeding.


5 Select Demo_Fiori.

The loading screen appears. It may take a few

moments to complete.

6 At the bottom of the screen is a message

indicating that the organization and space have

not been set. Select this message to set those

values.

If this message does not appear, select Find

Command from the View menu, and select CF:

Set Org and Space.

The Enter Cloud Foundry endpoint dialog

appears. The default Enter Cloud Foundry

endpoint should match the API Endpoint listed

on the Overview menu for your Subaccount.


7 Accept the default, by pressing the Enter or

Return key on your keyboard or selecting Enter

Cloud Foundry endpoint.

The Enter e-mail address dialog appears.

8 Enter the email address you used to create your

free trial and press the Enter or Return key on

your keyboard.

The Enter password dialog appears.

9 Enter the password you used to create your free

trial and press the Enter or Return key on your

keyboard.

The Select Organization dialog appears with

your default Organization displayed. There will be

only one available in your free trial.

10 Select the default Organization.

The Select Space dialog appears with your

default space displayed. There will be only one

available in your free trial.

11 Select the default Space. A message stating The Organization and

Space have been set will appear in the lower

right.


Step 3: Create a New Project Next, you will create a new SAP Fiori Freestyle Project using a template.



1 Select Start from template.

The Project From Template tab opens on the

right, displaying options available to populate

your template. (It can take up to a minute for this

tab to fully open and display its contents.

2 Select the SAP Fiori application tile and then

select the Start button.

The Floorplan Selection page appears on the

right.


3 Select SAPUI5 Freestyle from the dropdown as

the application type, select the SAPUI5

Application tile, and select the Next button.

The Data Source and Service Selection page

appears on the right.

4 Select Connect to SAP API Business Hub as

the Data Source, select User Management as

Service

The Enter your username and Enter your

password fields appear on the screen.


5 Enter the username and password for your free

trial in the corresponding fields, and then select

the Login icon.

Once your credentials have been validated,

select the Next Button

Your username and password will be verified.

Once verified the Next button becomes active.

The Entity Selection screen appear

6 Select the Next Button. The Project Attributes page appears on the left.


7 Enter tutorial_api as module name and click

Finish.

8 Select the Open Folder button. The list of Folders is displayed.


9 Expand the Projects folder, select tutorial_api,

and then select the Open button.

The process of finalizing the project begins. It will

take a few moments to complete. Once the

process is finished, the project will open in the

SAP Business Application Studio. Notice the

project folders appear in the EXPLORER area on

the left.

You will see some configuration files there

ending with .yaml or .json.


These configuration files are then used in the

build and deployment process for example.

If you open the .env file, there will be your API

Key for the API Business Hub. If you have run

the application multiple times, you will see

multiple .env files there. The .env file with the

greatest number is the latest.

The entire UI5 application is in the folder

webapp. We will use this folder in the next step to

extend our main view.

Since, we do not want to build everything from

scratch each time, we make use of plenty of

dependencies. These dependencies are in the

folder node_modules.

Step 4: Add a List Follow the steps below to complete the exercise.


1 On the left side of the screen expand the

webapp folder, then expand the next webapp

folder, then expand the view folder, and then

select the View1.view.xml file.

The View1.view.xml file opens in a new Code

Editor tab on the right.


2 Relace the selected lines (10 – 12) in the first

image below with the text below.

<Page id="page" title="Data from the SAP API Business Hub">

<content>

<List items="{/User}">

<StandardListItem title="{firstName}

{lastName}" description="{email}"/>

</List>

</content>

</Page>

The finished file should look like the image

below.

The full text can be found in the Exercise 4,

View1.view.xml file section of the Exercise

Code Snippets.txt file.


3 Select Save from the File menu.

4 Select the Run Configuration button on the left

to open the UI Module.

The RUN CONFIGURATIONS panel appears on

the left.

5 Select the Create Configuration button.

A prompt appears on the right, asking what

module you would like to run. There should be

one option (tutorial_api) highlighted below the

prompt.

6 Select tutorial_api. The Select a UI5 version prompt appears,

displaying some options from which to select.


7 Select Latest.

A prompt asking for the destination type will

appear.

8 Select the Connect to SAP system value and

choose apihub_sandbox

A prompt asking to enter a name will show up

with a default value.

You might be asked to enter your username and

password here again.

9 Press Enter

Expand the tutorial_api folder.

Step 5: Run the Web App Running your application has several advantages over deploying it: it’s faster, doesn’t require a build step, and

won’t minify your JavaScript codebase.



1 Select the Run icon for your app.

There will be a lot of automatic activity in the

lower right portion of the screen. This should last

for several seconds. Once that activity is

complete, you will see a notice that a service is

listening to a port.

2 Select the Expose and Open button. A prompt

will appear asking for a description. You can

enter anything here and then press the Enter or

Return key on your keyboard.

A new browser tab or window opens, displaying

the data returned by your app. It may take a

minute to populate, please be patient.

,© 2021 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express

permission of SAP SE or an SAP affiliate company.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks

or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see

http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and

notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of

other software vendors.

National product specifications may vary.

These materials may have been machine translated and may contain grammatical errors or inaccuracies.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without

representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or

omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and

services are those that are set forth in the express warranty statements accompanying such products and

services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined

in this document or any related presentation, or to develop or release any functionality mentioned therein. This

document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future

developments, products, and/or platform directions and functionality are all subject to change and may be

changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in

this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality.

All forward-looking statements are subject to various risks and uncertainties that could cause actual results to

differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-

looking statements, which speak only as of their dates, and they should not be relied upon in making

purchasing decisions.

exercise 4b: call sap api business hub api from a sapui5 … · building extensions with sap...

Documents