openSAP Build Your Own Fiori App in the Cloud

Week 3 Exercise
Create and Test a Fiori Master Detail App with SAP Web IDE

openSAP Exercise - Week 3

Exercise - Week 3
Create and Test a Fiori Master Detail App with SAP Web IDE

SAP Web IDE is a browser-based development tool. It accelerates building modern

applications for desktop and mobile devices by using the latest UI technologies. SAP Web
IDE simplifies the end-to-end application lifecycle for SAPUI5 and Fiori applications:
prototyping, development, packaging, deployment, and extensions.

Prerequisites
Before starting with this exercise, you need an SAP HANA Cloud Platform (HCP)
developer account and a destination in your account to the SAP NetWeaver Gateway
Service Consumption System as described in the week 2 exercise Create a new SAP
HANA Cloud Platform trial account.
Please verify your destination looks like this:

Note

All screenshots are based on SAP Web IDE version 1.9. Future versions of SAP Web IDE
might look different.

openSAP Exercise - Week 3

Learning Objectives
After going through the prerequisites of setting up your SAP HCP trial account and
creating a new destination to a demo back-end system, you are now ready to access SAP
Web IDE from your browser and create your first Fiori app. It is recommended that you use
the Google Chrome browser to get the best experience with SAP Web IDE.
The SAP Web IDE documentation is available here, and the list of supported browsers by
SAP Web IDE is available here.
In this exercise you will:
1. Create a new SAP Fiori Master Detail Application project by using the service
SALESORDERXX that is available on the ES1 SAP NetWeaver Gateway Service
Consumption System (this back-end service delivers the content data to your app) or,
alternatively, by using an Entity Data Model file (EDMX) provided.
2. Run the resulting app within the SAP Web IDE preview and test the results.
3. Run the app with random or personalized mock-data.

1. Access SAP Web IDE from your HCP account cockpit

From your SAP HANA Cloud Platform developer account, you can access your personal
SAP Web IDE page that will be the starting point to create an SAP Fiori Master Detail App.
1.1.

Login to your HANA Cloud Platform account in which you created the destination
to the NetWeaver Gateway Service Consumption System (The account that you
created in the week 2 exercise mentioned earlier).

1.2.

Navigate to Subscriptions and select the webide entry (click on webide).

openSAP Exercise - Week 3

1.3.

In the webide entry details, you can find your personalized SAP Web IDE URL.
This is your starting point for the development environment.
The WebIDE URL should look like the following:
https://webideXXXXXXXX.dispatcher.hanatrial.ondemand.com

openSAP Exercise - Week 3

You may want to bookmark this URL for future use and easy access.

2. Create a new Project based on Fiori Master Detail App template and
SAP Netweaver Gateway Service
SAP Fiori apps consume data from a backend system using an OData service. In order to
generate and test the UI in SAP Web IDE, you need to have access to an OData service
or to a local Entity Data Model file (EDMX), which holds a service model description.
Using an EDMX file as a starting point is a common practice in projects where different
team members are working on the UI and on the data design. The EDMX file enables you
to start and design your application even before the OData service is ready.
In the week 2 exercise, you created a destination to the SAP NetWeaver Gateway Service
Consumption System that provided you demo data from an SAP back-end system.
In this section, you will start the creation of a Fiori app based on a Master Detail template
included in SAP Web IDE.
1. Launch SAP Web IDE.
2. From your Welcome Page, choose New Project from Template.

openSAP Exercise - Week 3

3. Alternatively, you can choose in the menu File New Project from Template

openSAP Exercise - Week 3

4. Choose SAP Fiori Master Detail Application from the templates screen and click Next.
(make sure not to choose SAP Fiori Master Master Detail Application)

5. Give a name to your project, e.g., MyFirstFioriApp and click Next at the bottom of the
page to continue to the next screen.

In the next step, you will create an app based on the destination you already defined in
week 2 (a real SAP NetWeaver Gateway service).
If you were unable to define or connect to a destination (for a real SAP NetWeaver
Gateway service), you can use the alternative method described in section 4 of this
exercise and start your application using an EDMX file. If that is the case, feel free to
skip straight to section 4 now.

openSAP Exercise - Week 3

6. Select the Service Catalog source and choose the connection to the SAP Netweaver
Gateway Service Consumption System. In the screenshot below, the destination
description is SAP Gateway Demo. In your account the name might be different,
depending on the name you provided when you created the destination.
Note

This might prompt you to login to the back-end system if you didnt store your
credentials during the creation of the destination entry. If this is the case, provide your
credentials when asked to do so.
Select the service SALESORDERXX and click Next to proceed.

7. In the Template Customization step, enter the following values for the Project Settings
and the Master Section.

openSAP Exercise - Week 3

Note

By using a value for the Project Namespace, you assign a kind of group definition to your
project files. In future exercises when you create a new view, the Project Namespace
value will indicate that the new view and its controller belong to your app or the respective
app that you are going to extend.
8. Scroll down to the Detail Section and provide values for the Detail Section as follows
and leave the Navigation Section blank.

9. Click Next to proceed.

openSAP Exercise - Week 3

10. Click Finish to complete the wizard.

11. Congratulations! Your project based on the service SALESORDERXX has been
created.

3. Run the Fiori Master Detail App in Preview

Now you will run the Master Detail App you created in the SAP Web IDE preview.
To run the app, proceed as follows:
1. If you are not already there, open SAP Web IDE. You may arrive on the Welcome page
or in the Development page of SAP Web IDE. Switch to the Development page of SAP
Web IDE as highlighted below in the left-hand column.

10

openSAP Exercise - Week 3

2. Expand the project folder (in this example, it is the MyFirstFioriApp project).
3. Select the index.html entry in the projects file browser.
4. Click the Run button to open a new browser tab/window.

If there is a successful connection to a back-end service that contains the relevant data,
the app will show the results in the Master Section. Selecting an entry in the Master
Section, corresponding information will be displayed in the Details Section.

11

openSAP Exercise - Week 3

If you want to learn how to run this application with random or personalized mock-data,
continue to section 5 of this exercise.

12

openSAP Exercise - Week 3

4. Create a new Project based on Fiori Master Detail App template, local
EDMX file and mock-data
SAP Fiori apps consume data from a back-end system using an OData service. In order to
generate and test the UI in the SAP Web IDE, you need to have access to an OData
service or to a local Entity Data Model file (EDMX), which holds a service model
description. Using an EDMX file as a starting point is a common practice in projects where
different team members are working on the UI and on the data design. The EDMX file
enables you to start and design your application even before the OData service is ready.
This section is provided as an alternative to what was covered in section 2 above and
allows you to complete this exercise without connectivity to an OData service. If you would
like to complete this exercise using this alternative, please follow section 2 steps 1-5 first
and then continue below, which is the screen you should see after completing section 2,
step 5. Otherwise, if you were able to complete section 2 and section 3 above, feel free to
skip straight to section 5.
1. Download the schema_file_salesorder.edmx file from the same openSAP page where
you found this exercise. Select the File System source and browse for the file you just
downloaded. Click on Next to proceed.

13

openSAP Exercise - Week 3

2. In the Template Customization step enter the following values for the Project Settings
and the Master Section.

Note

By using a value for the Project Namespace, you assign a kind of group definition to your
project files. In future exercises when you create a new view, the Project Namespace
value will indicate that the new view and its controller belong to your app or the respective
app that you are going to extend.
3. Scroll down to the Detail Section and provide values for the Detail Section as follows
and leave the Navigation Section blank.

14

openSAP Exercise - Week 3

4. Click Next to proceed.

5. Click Finish to complete the wizard.

6. Congratulations! Your project based on the SalesOrder EDMX schema file has been
created.

5. Test the app with mock-data and display the result in your SAP Fiori
app
Next you will learn how to test a Fiori App project without back-end data delivered by an
OData service or in addition to an existing OData service. SAP Web IDE allows running
each app with random or individualized mock-data. This helps developers to test their Fiori
apps from design and front-end development perspectives without interferences due to
lack of back-end availabilities.
The easiest way to run the app with mock-data is calling the app with random data.
1. Launch SAP Web IDE.
2. Expand the project folder (in this example, it is the MyFioriApp project).
3. Select the index.html entry in the projects file browser.

15

openSAP Exercise - Week 3

4. Choose from the menu Run Run with Mock Data to open a new browser
tab/window.

5. Check the results and select an entry in the Master Section to see its detailed
information.

Note

Alternatively, you can right-click on index.html and choose Run Run with Mock Data

16

openSAP Exercise - Week 3

6. Edit and personalize your mock-data

Generally, it may be valuable to use personalized mock-data that reflects your specific
needs properly. Therefore, randomly generated mock-data can be edited directly in the
SAP Web IDE project. SAP Web IDE provides an easy table-like editing form and creates
the respective JSON file at the end of the editing process. A JSON-formatted mock-data
example can be found in the Appendix file available on the same openSAP page where
you found this exercise.
1. Launch SAP Web IDE.
2. Expand the project folder (in this example, it is the MyFioriApp project).
3. Expand the folder model.
4. Right-click on the entry metadata.xml and choose Edit Mock Data

5. Choose now either the option Generate Random Data and then edit this data. This is
available for both collections of this service / schema file.

17

openSAP Exercise - Week 3

6. Or create some entries, line by line, by choosing Add Row.

7. Finish entering individual mock-data entries by clicking on OK.

8. SAP Web IDE created a new mock-data file XXXXX.json in the folder model.

18

openSAP Exercise - Week 3

9. To test again, right-click on the index.html entry in the projects file browser and go to
Run Run with Mock Data to open a new browser tab/window

10. Check the results and select an entry in the Master Section to see its detailed
information.

19

www.sap.com

2015 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://www.sap.com/corporate-en/legal/copyright/index.epx#trademark 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 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 SEs 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.