exercise 3f: develop and run an sap fiori application with sap … · step 7: check bsp library and...

1

Building Extensions with SAP Extension Suite

Exercise 3f: Develop and Run an SAP Fiori Application with SAP Business Application Studio.

Exercise Scenario

In this exercise, we’ll verify if you have the required roles and privileges to develop applications with the SAP Business Application Studio

Estimated Time to Complete: 10 minutes

Follow the steps below to complete the exercise.

Step 1: Assign Role Collections

Steps and Instructions Additional Information

1 Open your BTP trial account in a browser.

2 Select the trial tile.

2


3 Select Trust Configuration from the Security

area on the left.

4 Select the Default identity provider link.

5 Enter the email address you used for your free

trial and then select the Show Assignments

button.

The list of your current Role Collections is

displayed.

3


6 Verify that Business _Application Studio

Developer appears in your list of Role

Collections. If it does not, use the Assign

Role Collection button to add it.

Step 2: Create a Dev Space

1 Select trial from the breadcrumb trail at the top

of the page.

2 Select Instances and Subscriptions from the

Services area on the left. The list of your current Subscriptions is

displayed. Note that yours may be different from

the image below.

4


3 Select the Go to Application icon for the SAP

Business Application Studio.

The list of your current Dev Spaces is displayed.

The trial account only allows for two simultaneous

dev spaces. You may need to delete an existing

one before continuing.

4 Select the Create Dev Space button in the

upper-right.

The Create a New Dev Space page appears.

5


5 Type Fiori into the Dev Space name field,

select the SAP Fiori option, and then select the

Create Dev Space button in the lower right.

The Dev Space creation process begins. It will

take a moment to complete. You will know it is

done when it shows as Running.

6 Select Fiori.

The SAP Business Application Studio home

page is displayed.

Step 3: Set up Your Organization and Space

1 Select the Open Folder button in the upper left. The Open Folder dialog appears.

6


2 Select the Projects folder and then select the

Open button.

The Explorer will show that the Projects folder is

the current folder.

3 Select the message in the lower left that

indicates the organization and space have not

been set.

The Enter Cloud Foundry endpoint dialog

appears. The default Enter Cloud Foundry

endpoint should match the API Endpoint listed on

7


If this message does not appear, select Find

Command from the View menu, and select

CF: Set Org and Space.

the Overview menu for your Subaccount.

4 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.

5 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.

6 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.

7 Select the default Organization.

The Select Space dialog appears with your default

space displayed. There will be only one available

in your free trial.

8 Select the default Space.

A message stating The Organization and Space

have been set will appear in the lower right.

8


Step 4: Create a List Report Object Page


1 Open the View menu and then select Find

Command.

The list of commands is displayed.

2 Search for and select Fiori: Open Application

Generator. The Template Wizard tab opens on the right.

9


3 Choose the List Report Object Page tile and

then select the Next button.

The Data Source and Service Selection page

appears. This page will expand as you choose

different options.

4 Set the following values in the form and then

select the Next button.

Data source = Connect to an SAP System

System = ABAP Environment on SAP

Business Technology Platform

ABAP Environment = default_abap_trial

Service = ZUI_C_TRAVEL_M_XXXX(1) –

OData v2

The Entity Selection page appears.

10


5 Set the Main entity to TravelProcessor and

then select the Next button.

The Project Attributes page appears.


select the Next button. The Deployment Configuration page appears.

11


a. Module name = ztravel_app_xxxx

b. Application title = Travel App

XXXX

c. Description = A Fiori Application

d. Add deployment configuration =

Yes

e. Add FLP configuration = Yes

f. Configure advanced options = no



a. Target = ABAP

b. Is this an SAP Business

Technology Platform System =

Yes

c. Destination = Leave as default

d. Name = ztravelapp_XXXX

e. Package = ztravel_app_XXXX

f. Transport Request = Your

Transport Request (this value can

be found on the Transport

Organizer tab in the lower right

area of the eclipse application.

See the image to the right.)

The Fiori Launchpad Configuration page

appears.

To find and copy your Transport Request.

12


g. Deployment Description =

deployment XXXX



a. Semantic Object =

ztravel_app_XXXX

b. Action = display

c. Title = Travel App XXXX

The files are generated and displayed in the

Explorer area.

Step 5: Run SAP Fiori Application for Data Preview

13


1 Select the Run Configuration button on the

left.

The list of runnable apps is displayed.

2 Select the Run Module button for the Start

ztravel_app_XXXX item.

Activity will begin in the bottom right of the screen.

Eventually a message will appear informing you

about pop-up blockers.

3 Select the Open button. Activity will begin in the bottom right of the screen.

Eventually a message will appear informing you

about pop-up blockers.

14


4 Select the Go button.

Your data should be displayed.

Step 6: Deploy Your Application

We now have created and run our application for the first time. Next, we are finally going to deploy it.


1 Navigate back to your SAP Business

Application Studio window and select the

Explorer button on the left.

15


2 Select New Terminal from the Terminal menu.

A terminal window opens in the lower right.

3 Navigate into your project directory by typing

cd ztravel_app_XXXX and pressing the Enter

or Return key on your keyboard.

The focus directory has changed.

In the next step we will build the application with

npm

Learn more about npm and node.js here:

https://www.npmjs.com/

https://nodejs.org/en/about/

4 Type npm run deploy and press the Enter or

Return key on your keyboard.

The deployment process begins. You will be asked

if you want to start the process.

5 Press the Y key on your keyboard. The process will continue. It will take a few

minutes to complete. You will know when it has

https://www.npmjs.com/

16


finished when the prompt is displayed again and

Deployment Successful message is displayed.

Step 7: Check BSP Library and SAP Fiori Launchpad App Descriptor Item in Eclipse


1 Navigate back to the Eclipse program and

select Refresh from the File menu.

New items are added to your project, including

BSP Library and Fiori Launchpad App Descr

Items, both listing your app.

17


Step 8: Create IAM App Business Catalog

The Identity and Access Management (IAM) apps secure the access to your solution for your business users.

Access to business apps is controlled by a role-based authorization management. That means you assign

roles to users and these roles provide access to certain business tasks.

For this let’s create an IAM App first.

Read more here:

https://help.sap.com/viewer/f544846954f24b9183eddadcc41bdc3b/1902.500/en-US/f25f9108740442c3804370f2d88a9bdd.html


1 Right-click on your package and select Other

ABAP Repository Object from the New menu.

The ABAP Repository Object dialog appears.

2 Expand the Cloud Identity and Access

Management folder, select the IAM App item,

and select the Next button.

The IAM App dialog appears.

https://help.sap.com/viewer/f544846954f24b9183eddadcc41bdc3b/1902.500/en-US/f25f9108740442c3804370f2d88a9bdd.html

18


3 Enter ZTRAVEL_IAM_XXXX into the Name

field, IAMAPP into the Description field and


The Selection of Transport Request dialog

appears.

19


4 Select the Finish button.

The IAM App is displayed in a new tab on the

right.

5 Select the Services tab.

The list of current Services is displayed. It should

be empty at this point,

6 Select the Insert button.

The Find Service dialog appears.

20


7 Select OData IWSG in the Service Type field,

enter ZUI_C_TRAVEL_M_XXXX_0001 in the

Service Name field, and select the OK button.

The new Service is now listed.

8 Right-click on your package and select Other

ABAP Repository Object from the New menu.

The ABAP Repository Object dialog appears.

9 Expand the Cloud Identity and Access

Management folder, select the Business

Catalog item, and select the Next button.

The Business Catalog dialog appears.

21


Here we are going to create our own business

catalog, which can then later be assigned to a

business role and then to your users.

10 Enter ZTRAVEL_BC_XXXX in the Name field,

Business Catalog into the Description field,

and select the Next button.


appears.

22



The Business Catalog page is displayed on the

right side.

12 Select the Apps tab. The list of current Apps is displayed. It should be

empty at this point.

23


13 Select the Add button.

The Business Catalog App Assignment dialog

appears.

14 Enter ZTRAVEL_IAM_XXXX_EXT into the IAM

App field, ZTRAVEL_BC_XXXX_0001 into the

Name field, and select the Next button.


appears.

24



The App is added.

16 Select Publish Locally from the upper right. The publication process begins. It will take a few

moments to complete.

25


Step 9: Run the SAP Fiori Application


1 Navigate back to your SAP Business

Application Studio session.

2 Right-click your travel app and choose the

Open in Terminal option.

A new terminal window opens in the lower right. It

is opened t your travel project.

3 Type npm run deploy and press the Enter or

Return key on your keyboard.

The deployment process begins. Just like the last

time you did this, you will be asked if you want to

continue the process.

4 Press the Y key on your keyboard.

The process continues. You will know it has

finished when a Deployment Successful

message is displayed and the prompt is showing.

26


5 CTRL + click the URL to open your app in a

new browser tab or window. The URL should

be the line just above the Deployment

Successful message in the terminal.

The login page will appear.

6 Enter the Email and Password you used to

create your free trial and select the Log On

button.

Your app will open.

7 Select the Go button in the upper right. Your data will display.

27


© 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 3f: develop and run an sap fiori application with sap … · step 7: check bsp library and...

Documents