exercise 6e: create an sap fiori app using sap business

Exercise 6e: Create an SAP Fiori App Using SAP Business Application Studio

In this exercise you’ll build an application that presents a list of suppliers from an on-premise backend. The

supplier data will be retrieved from the BusinessPartnerSet collection in the GWSAMPLE_BASIC OData

service that is available from SAP’s ES5 demo Gateway system.

Step 1: Create new Multitarget Application project

In this step you’ll create a Multitarget application in your recently created Dev Space.

Follow the steps below to complete the exercise.

Steps and Instructions Additional Information

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

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.

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

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

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


5 Select the default Organization.

The Select Space dialog appears with your

default space displayed. There will be only one

available in your free trial.

6 Select the default Space.

A message stating The Organization and Space have been set will appear in the lower right.

7 Select Find Command from the View menu.

The search window opens.

8 Type wizard into the search box and then select Open Template Wizard.

The Template Wizard tab open on the right.


9 Select the Basic Multitarget Application tile and then select the Start button.

The Provide a Name page appears on the right.

10 Enter FioriDemo into the Provide a Name field and then select the Finish button.

The loading screen appears as the system prepares your environment. It may take up to a minute to complete.

Once complete the EXPLORER pane appears on the left with some basic project files. The MTA


descriptor file mta.yaml has been generated for you. At this point, it only contains basic elements:

Step 2: Configure the App to use Managed Application Router

Next, you’ll configure a Managed Application Router. When end-users access an App in the Cloud Foundry

environment, they access the Application Router first. The application router is used to serve static content,

authenticate users, rewrite URLs, and forward or proxy requests to other micro services while propagating user

information.



1 Select Find Command from the View menu.

The search window opens.


2 Type wizard into the search box and then select Open Template Wizard.

The Template Wizard tab opens on the right.

3 Scroll down to locate and select the Approuter Configuration tile, then select the Start button.

The Project Location screen appears.

4 Select the Browse for Folder icon.

The Open dialog appears with your project

displayed.


5 Select FioriDemo, and then select the Open button.

The path for your project appears in the Project

Location field.

6 Select the Next button. The Approuter Configuration screen appears.


7 Complete the dialog with the following details, and then select the Next button.

a. Select your HTML5 application runtime = Managed Approuter

b. Enter a unique name for the business solution of the project = BP

c. Do you plan to add a UI = Yes

Note: The Managed Application Router is only

provided in conjunction with the following

products:

• SAP Launchpad Service

• SAP Work Zone

• SAP Cloud Portal

Further information on the Managed Application

Router:

https://help.sap.com/viewer/65de2977205c403b

bc107264b8eccf4b/Cloud/en-

US/589a2395df2d481393acb1ba2f17eeef.html.

New configurations will be added to the

mta.yaml descriptor file automatically. In

addition, a new file xs-security.json is added to

the project. We are going to have a look at the

https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/589a2395df2d481393acb1ba2f17eeef.html




project structure and meaning of files at a later

step.

Step 3: Generate and Run an App Based on SAPUI5 Application Template

In this step you will build your app using a template, and then run it.



1 Select the Start from template tile.

The Project From Template tab appears on the right.


2 Scroll down to locate and select the SAP Fiori application tile, then select the Start button.

The Floorplan Selection screen appears.

3 Set the Application Type to SAPUI5 freestyle, select the SAPUI5 Application tile, and then select the Next button.

The Data Source and Service Selection screen appears. The fields on this screen change as you select various options.

4 Set the following options and then select the Next button.

d. Data source = Connect to an SAP System

e. System = ES5

f. Service = ZGWSAMPLE_BASIC (1) – Odata V2

Note: You only see ES5 in the System selection, because you previously created a destination for that system. The Service


selection shows the available OData Services of the connected backend system.

The Entity Selection screen appears.

5 Change the View name to Suppliers and then select the Next button.

The Project Attributes screen appears.


6 Set the following attributes and then select the Next button:

g. Module name = businesspartners

h. Application title = Suppliers

i. Application namespace = ns

j. Description = An SAPUI5 app to view a list of suppliers (demo)

k. Project folder path = /home/user/projects/FioriDemo

l. Add deployment configuration = Yes

m. Add FLP configuration = Yes

n. Configure Advanced Options = No

Note: As the Project folder path you specify the path of the MTA project, because the Fiori app should be a part of that multitarget application.

Note: FLP is the abbreviation for Fiori Launchpad. The configuration is required for the Launchpad Service integration.

The Deployment Configuration screen appears.


7 The target should default to Cloud Foundry and the Destination should default to ES5. Verify the defaults are correct, then select the Next button.

The Fiori Launchpad Configuration screen appears.

8 Populate the fields with the following values, and then select the Finish button.

o. Semantic Object = Object

p. Action = display

q. Title = {{appTitle}}

r. Subtitle = {{appSubTitle}}

This is the configuration that will be used by the SAP Launchpad Service when providing the application.

Field Description

Semantic Object Represents a business entity, such as a customer, a sales order, or a product.

Action Describes which operation is intended to be performed on a semantic object


Title The name of the Fiori application that appears on the Fiori launchpad tile in a free text format.

Subtitle (optional) A free text field where the user can further describe the application in the launchpad.

Note: The variables in curly brackets, e.g. {{appTitle}} are placeholders for translatable attributes from file i18n.properties.

The system will process for a few moments, displaying messages in the lower right as it completes its tasks. Once completed a Notification will appear in the lower right and additional files and folders will appear in the upper left.

Next, we’ll need to make a minor modification to one of the generated files.


9 On the left, expand the businesspartners folder, then expand the webapp folder, and then select the index.html file.

The contents of index.html open in a new Code Explorer tab on the right.

Let’s quickly go through the project structure. The 3 main folders in an SAPUI5 application are the root folder, the webapp folder and the test folder. In your case, businesspartners is the root folder and webapp lies within the root folder. The index.html file in the root folder you just opened will be required when starting the app in a standalone mode, without Fiori Launchpad. The webapp folder contains all the sources of the application. This includes the JavaScript files for the logic in folders model and controller, view files written in xml, html, json or js format, and also files for localization, such as i18n.properties files. Any files that are only relevant for testing should be put inside the test folder.

Further information on SAPUI5 Folder Structure: https://sapui5.hana.ondemand.com/#/topic/003f755d46d34dd1bbce9ffe08c8d46a.

10 Modify the src line (line 9 by default) from src="resources/sap-ui-core.js" to src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”

The full text can be found in the Exercise 6, index.html file section of the Exercise Code Snippets.txt file.

https://sapui5.hana.ondemand.com/#/topic/003f755d46d34dd1bbce9ffe08c8d46a

https://sapui5.hana.ondemand.com/#/topic/003f755d46d34dd1bbce9ffe08c8d46a


11 Select Save from the File menu.

12 Right-click the webapp folder and then select Preview Application from the pop-up menu.

A dialog appears with a list of scripts you can run.

13 Select the start option. There will be some activity in the lower right.

The system will open the app in a new browser tab or window. If you are notified of pop-up blockers, then choose the options to open the window.

The opened page will have the word Title at the top.

Leave this tab or page open. As you make changes to your app, it will be updated


automatically, and you will be revisiting it in the future.

Step 4: Open the Layout and Code Editors

The SAP Business Application Studio lets you build your apps using a Code Editor and a Layout Editor. All

the previous exercises utilized the Code Editor. In this step you will access the Layout Editor.



1 Select the Toggle Bottom Panel icon in the lower right.

The bottom panel, that showed the system activity, will be hidden. You can use the same icon to unhide it.

2 Expand the businesspartners folder, then expand the webapp folder, then expand the view folder, right-click the Suppliers.view.xml file, and select Layout Editor from the Open With menu.

After a few moments, the Layout Editor displays on the right.


3 Right-click the same file and choose Code Editor from the Open With menu.

The Code Editor opens in a separate tab on the right.

You can now switch back and forth between the Code Editor and Layout Editor views of the same file.

You can also drag the editors to different locations.

4 Select and drag the Code Editor tab down to the lower right portion of the screen and release your mouse.

The Code Editor tab now appears below the Layout Editor tab. You can now easily see how changes in one tab will be reflected in the other.

Step 5: Make Changes to the UI

Now that you have seen how the Code and Layout Editors show the code and UI for your app

simultaneously, you will start to customize your app. In this step, all changes will be made in the Layout

Editor. As you make changes you can review both the Code Editor and generated website to see the

changes applied in real-time. The opposite is also true: you can edit the contents of the Code Editor and the

Layout Editor will reflect those changes in real-time.



1 Select the Explorer icon on the left.

The Explorer pane becomes hidden, giving you more room to work on the right.

2 From the Layout Editor pane, select the Controls tab, and then expand the List area.

The different types of list tools you can add to your app are displayed.


3 Select the List control and drag it below the {i18n>title} element on the right.

The List control element with ID list0 is created.

Inspect the Code Editor area to see that code for this list is automatically generated.

4 Select the element displaying List Item 1, then select the Bind icon for the Entity Set property on the right.

The Select Entity Set dialog is displayed. The size of the dialog varies based on the size of the Layout Editor pane. You can resize the pane to make the dialog bigger.

5 Select the Define entity set and set the selected control as template option, choose /BusinessPartnerSet from the Entity Set dropdown, and then select the Bind button.

A Template indicator appears in the List control element and the code is updated to reflect the BusinessPartnerSet.


6 Locate the Title property in the Properties pane and select the Bind icon.

The Data Binding [Standard List Item] dialog appears.

7 Click the Clear expression icon.

The text in the Expression (string) field is removed.

8 Scroll through the items on the left and double-click CompanyName (string).

{CompanyName} appears in the Expression (string) field on the right.


9 Select the Bind button.

The title of the list item becomes {CompanyName} and the code is updated to include the new name.

10 Repeat steps 6 – 9 to set the Description property to {WebAddress}.

The description of the list becomes {WebAddress} and the code is updated to include the new description.

11 Switch to the tab or browser window that is showing the app.

Notice that the page now has data. The Company Name and Web Address for each Business Partner are displayed.

© 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 6e: create an sap fiori app using sap business

Documents