openSAP Build Your Own SAP Fiori App in the

Cloud
Week 6 Exercise
Deploying Your App to the Fiori Cloud Launchpad

openSAP EXERCISE WEEK 6

Exercise - Week 6
Deploying Your App to the Fiori Cloud Launchpad

SAP Fiori Cloud Launchpad serves as an entry point to SAP Fiori applications, which are
developed and run on the SAP HANA Cloud Platform (HCP) using SAP Web IDE. The
Launchpad, which is available as a site in SAP HANA Cloud Portal, provides the apps with
services such as navigation, application configuration, and embedded support.
In this exercise, you will set up your own personal Fiori Cloud Launchpad on HCP and will
learn how to register an app there. You will be using your HCP account and SAP Web IDE
for this exercise. Unlike the SAP Web IDE environment, applications running on HCP and
the Fiori Cloud Launchpad do not support mock data by default. Mock data is used
generally during development as an alternative to a live OData provider.
In this exercise, you will build upon the exercises in week 2 and week 3, which use the
SAP NetWeaver Gateway Service Consumption System. This is the recommended way to
get your app up and running quickly in the Fiori Cloud Launchpad.

openSAP EXERCISE WEEK 6

Prerequisites
Before starting with this exercise, you need an SAP HANA Cloud Platform (HCP)
developer account.
In addition, you should have finished the week 2 exercise plus the week 3 or week 4
exercise and have at least one working application you can run inside your SAP Web IDE.
Note

All screenshots are based on SAP Web IDE version 1.10 and the Fiori Cloud Launchpad
version 1.15. Future versions of these cloud solutions might have a different look.

Learning Objectives
After creating and extending several Fiori apps with the SAP Web IDE, you are prepared
to deploy those apps and run them from within the Fiori Cloud Launchpad, which is the
standard host for any Fiori application. In this exercise, you will learn how to do the
following:
1. Subscribe to the Fiori Cloud Launchpad on your HANA Cloud Platform Account
2. Create your first Fiori Cloud Launchpad in the SAP Cloud Portal
3. Define Categories, Content Packages, and Tile Groups
4. Deploy an application from SAP Web IDE to HANA Cloud Platform
5. Replace the app data source from a local EDMX file to a real destination
6. Register your application in the Fiori Cloud Launchpad
In order to see your application in action, it must be connected to a real OData service.
You can deploy apps that use mock data, such as the archive apps used as a starting
point for the week 4 exercises. They will run but they will not present any data until you
bind them to a live destination.

openSAP EXERCISE WEEK 6

1. Subscribe to SAP Fiori Cloud Launchpad

In order to use SAP Fiori Cloud Launchpad you first need to subscribe to that service in
your personal HANA Cloud Platform (HCP) account.
1.1.

Log in to your HCP account cockpit at:

https://account.hanatrial.ondemand.com/cockpit

1.2.

From the left menu, go to Subscriptions. In the list of subscribed services, check if
you are already subscribed to the trial - flpportal service. If not, choose New
Subscription'.

1.3.

From the list of available services, pick the one called: trial / flpportal and press
Save.

Note

You can use this opportunity and subscribe to the cloud Theme Designer. It will not be
discussed in this course, but it might be part of a future openSAP course.
4

openSAP EXERCISE WEEK 6

The Fiori Launchpad on HCP is part of the SAP HANA Cloud Portal. In order to use and
administrate it, you need to make sure that the Cloud Portal service is enabled.
1.4.

From your HCP account left menu, go to Services and Enable the SAP HANA
Cloud Portal service, if it is not already enabled.

1.5.

Once enabled, click on the Configure roles icon:

1.6.

Verify that you are a member of the TENANT_ADMIN role.

1.7.

If your User ID is not already assigned to the TENANT_ADMIN role, click on

Assign next to Individual Users and add it.
5

openSAP EXERCISE WEEK 6

2. Create Your Fiori Cloud Launchpad

Once you have subscribed to the Fiori Launchpad, enabled the Cloud Portal service, and
assigned yourself the correct permissions, you are ready to create the Launchpad.
2.1.

From your HCP account left menu, go to Services and find the Cloud Portal
service in the list.

2.2.

Click on Go to Service to start HANA Cloud Portal administration

2.3.

In the cloud portal administration screen, click on

the big + and choose Fiori Launchpad from the
list to add a new Fiori Launchpad. Give it a name
and description and then Save your work.

2.4.

With your mouse cursor hovering over the newly

created site icon, open the site actions menu and
choose Publish. This will publish your Launchpad
and make it accessible.

openSAP EXERCISE WEEK 6

2.5.

Once the site is published, you will notice that the

site icon changed its color to green and the status
to Public. There is a URL to access the
Launchpad from your browser and a Manage
button to enter the Fiori Configuration Cockpit.

2.6.

Click on the Launchpad URL and check your new Launchpad. Depending on your
computer security settings, you might need to provide your HCP account username
and password. Add this site to your browser bookmarks as you will have to launch it
again later. You will add content to this Launchpad later.

2.7.

Go back to the portal administration screen (that should still be open in another tab).

openSAP EXERCISE WEEK 6

2.8.

With your mouse, hover again over your newly created site icon and click on the
Manage button. This should open the Fiori Configuration Cockpit.

The Fiori Configuration Cockpit is a set of administrative Fiori Apps used by site
administrators to configure applications, Launchpad settings, UI themes, localization, etc.

openSAP EXERCISE WEEK 6

3. Define Categories, Content Packages, and Tile Groups

In the Fiori Launchpad, apps are usually arranged in Tile Groups and each app belongs to
specific Categories and Content Packages.
Category An attribute assigned to apps for classification and availability in catalogs at
runtime. One app can be assigned to multiple categories.
Content Package A collection of apps for the purpose of role-based access. One app
can be assigned to multiple content packages, and one content package can be assigned
to multiple roles.
Group - A titled grouping in which apps are organized in a site. Groups are initially
configured by administrators. An app can be assigned to multiple groups.
3.1.

From the Fiori Configuration Cockpit, launch the Define Categories app.

3.2.

Create two new categories by pressing on the + button in the footer. You can
choose whatever name you want for your categories. Examples are: openSAP
apps, My Personal apps, Project XYZ, Self Service apps etc. Once done, click
on the Home or Back arrow buttons.

openSAP EXERCISE WEEK 6

3.3.

From the Fiori Configuration Cockpit, launch the Manage Content Packages app
and create two new content packages by pressing on the + button in the footer.
Content packages are used to enable applications access based on role or
permission; but in this exercise, you will not configure those properties. Examples
for content packages are: Public Content Package, Restricted Content Package,
Sales Analytics Content Package, Purchasing Content Package etc.

Once done, click on the Home or Back arrow buttons.

3.4.

From the Fiori Configuration Cockpit, launch the Manage Tile Groups app
and create two new tile groups by pressing on the + button in the footer. Tile
groups are used to organize and arrange apps on the Launchpad. Examples for
Tile groups are: Home, My Apps, Self Service Apps, Cash Management etc.
Once done, click on the Home or Back arrow buttons.

10

openSAP EXERCISE WEEK 6

4. Deploy Your Application

The final step in creating a new application is to deploy it to its real host environment. SAP
Web IDE enables you to deploy your applications directly into the HANA Cloud Platform as
lightweight HTML5 applications.
HTML5 applications on SAP HANA Cloud Platform consist of static resources and can
connect to any existing on-premise or on-demand REST services. Static resources and
REST calls are served using a shared dispatcher service provided by the SAP HANA
Cloud Platform.
In order to successfully deploy and run an application, you need to have at least one
working app from either the week 3 or week 4 exercises and an active destination to the
NetWeaver Gateway Service Consumption System (ES1).
The app you are planning to deploy should be based on the SALESORDERXX service or
based on the EDMX file from the week 3 exercise or based on the archived projects that
were provided for the week 4 exercises (MyFirstFioriApp_w4uX_start). Make sure that you
are not trying to import or deploy the Northwind app at this stage.
If you do not have an app that matches those requirements or you do not have an active
HCP destination to the SAP NetWeaver Gateway Service Consumption System (ES1),
you can skip to the next section of this exercise and deploy a sample app that is not using
this system.
4.1.

Open SAP Web IDE and test your app to see that it is working as expected

4.2.

Right click on the project folder and choose Deploy Deploy to SAP HANA Cloud
Platform

11

openSAP EXERCISE WEEK 6

4.3.

Follow the on-screen instruction by entering your HCP username and password. If
this is your first time deploying to HCP you might also need to provide your details
to Git - the repository used to store the files on HCP.

4.4.

Next, you need to provide some deployment details like application name and
version. Make sure that the Activate field is checked this will automatically set
this version as the active app version on HCP. Finally, click on Deploy.

12

openSAP EXERCISE WEEK 6

4.5.

Once deployed, you will see a confirmation screen with two links. Click on Open the
active version of the application to run it from HCP. If this app was based on mock
data, it should run, but no data will be displayed.

13

openSAP EXERCISE WEEK 6

4.6.

Close the tab and return to SAP Web IDE. Now, click on the link Open the
application page in SAP HANA Cloud Platform cockpit. If you accidently closed this
dialog box, login to HCP Cockpit HTML5 Applications and click on the app name
you just deployed.

From this screen you can manage your deployed HTML5 application, stop and start
the app, launch it, delete it, set permissions, review version information, etc.
If the application you deployed was based on mock data, you can change the
destination mapping and assign it to use a destination that is already defined in
your HCP account.
If you want to assign or change the destination that your deployed app is using,
click the Edit button in the Required Destinations section, and choose a new
destination from the Mapped Account Destination drop down list.
It is
recommended that you choose the destination to the SAP NetWeaver Gateway
Consumption system you created in the week 2 exercise.
Click Save and click on the Application URL to run the app again.

14

openSAP EXERCISE WEEK 6

4.7.

Close the tab and return to SAP Web IDE. Now click on the button Register to SAP
Fiori Launchpad. If you accidently closed this dialog box, right click on the project
and choose Deploy Register to SAP Fiori Launchpad. SAP Web IDE will now
guide you through the process of registering your app to the Fiori Launchpad.

4.8.

First, provide some general information on the app or accept the default information
that is based on the project metadata. Then click Next.

4.9.

In the second step, you define a tile for your app. This is the tile that you will later
see in the Launchpad. Chose static tile, enter a title and a subtitle, and choose an
icon for your app. Then click Next

A dynamic tile has additional properties that enable you to present data from the
OData service directly on the tile. For this exercise, create a Static tile.

15

openSAP EXERCISE WEEK 6

4.10. The final stage in registering a Fiori app to the Launchpad is to assign it to a
category, content package, and group. Choose from the drop down menus one of
the categories and content packages that you created earlier. Then click Next and
on the next confirmation screen click Finish.

4.11. If there were no errors, your application was Successfully Registered. Click on the
registered application link to run your application from the Fiori Cloud Launchpad.

If this is the first time you are deploying a Fiori app to your Launchpad, it might still
be empty. You now need to go to your application catalog and add the application
you want, including the one you just deployed, to your personal Launchpad.

16

openSAP EXERCISE WEEK 6

4.12. Next, from the same dialog box, click on the link to SAP Fiori Launchpad and go to
your personal Launchpad. If you accidently closed this dialog box, go to your HCP
Cockpit Subscriptions and click on the flpportal service to find the URL of your
Launchpad.

4.13. Open the Launchpad group panel by clicking on the

the Tile Catalog button.

button and then click on

17

openSAP EXERCISE WEEK 6

4.14. In the tile catalog, scroll through the page to find your freshly deployed app, click on
the + sign to add the tile to one or more groups. Then press OK and click on the
home or back arrow button.

4.15. Congratulations! You should now see your deployed and registered app in the Fiori
Launchpad. Launch it by simply clicking on the tile.
If you are asked for credentials in order to login to the Launchpad use your
HCP credentials.
If you are asked for credentials after launching the app use your SAP
NetWeaver Gateway Consumption System credentials

18

openSAP EXERCISE WEEK 6

5. Recap Import and Deploy a Sample Application (Optional)

In this section, you will have the opportunity to review what you learned and try again the
end-to-end process of deploying an app. This time you will deploy a sample application
that is using a public OData service from www.odata.org, so it should work without access
to any SAP NetWeaver Gateway server.
5.1.

Download the Northwind.zip and northwind.hcp files from the same openSAP week
6 exercise page from which you downloaded this exercise. The Northwind.zip is an
application archive that can be imported to SAP Web IDE and the northwind.hcp is
an HCP destination properties file that can be imported into HCP.

5.2.

Log in to your HCP cockpit, go to the Destinations page and either import the
northwind.hcp properties file or create the following destination manually. This
destination is pointing to a public OData service.

5.3.

Make sure the destination name is northwind with a lowercase n.

19

openSAP EXERCISE WEEK 6

5.4.

Open SAP Web IDE and go to File Import From File System. Choose the
file Northwind.zip and import it into the /Northwind directory.

5.5.

Make sure you Import to the folder Northwind with a capital N.

20

openSAP EXERCISE WEEK 6

5.6.

After importing the app, Run it and test it. Make sure the table is populated with
data provided by the OData service.

5.7.

Right click on the application folder and from the Deploy menu choose Deploy to
SAP HANA Cloud Platform. Enter your HCP password (if needed), make sure the
app name is Northwind and that Activate is checked.

5.8.

Once successfully deployed, click on Register to SAP Fiori Launchpad

5.9.

Accept the default application name; create a static tile for the app; and assign it to
a Category, Content Package, and Group.

5.10. Once successfully deployed, go to your Fiori Cloud Launchpad and run the
application from there. If you do not see the app tile on the Launchpad, you might
need to add it from your catalog of applications.

Congratulations!
You now know how to plan, design, develop, extend, and deploy SAP Fiori apps using
SAP Web IDE, SAP HANA Cloud Platform, and SAP Fiori Cloud Launchpad.

21

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.