Skip to content
This repository was archived by the owner on Jun 8, 2026. It is now read-only.

unit4.md

Latest commit

 

History

History
464 lines (260 loc) · 12.1 KB

unit4.md

File metadata and controls

464 lines (260 loc) · 12.1 KB
Raw

Hands-on exercise for week 3 unit 4:
Deploying your SAP Fiori elements app

Previous exercise

Creating an overview page

Video on openSAP.com platform

Deploying your SAP Fiori elements app

Introduction

Prerequisite: You have performed all previous exercises of this course.

In this unit, you will learn how to deploy the application that have been previously built to our SAP cloud account and run them together in the SAP Fiori launchpad.

Before we start adding the configurations, we make sure a terminal is open and we are logged into our cloud account.

Step 1. Open terminal and log into cloud account

  1. Click in menu Terminal -> New Terminal

  2. This will open a new terminal. Next we make sure that we are logged into our cloud account by executing the following command ...
    ... for BTP trial region 🇪🇺 Europe:

    cf login -a https://api.cf.eu10.hana.ondemand.com

    ... for BTP trial region 🇺🇸 US:

    cf login -a https://api.cf.us10.hana.ondemand.com

  3. We need to provide the email address that we used when we signed up for the cloud account ...

  4. ... and also the password.

Before we deploy our applications, we add deploy and SAP Fiori launchpad configurations to each of our SAP Fiori elements applications bookinganalysis, travellist, and traveloverview.

Step 2. Add deploy config to bookinganalysis

  1. In the terminal change to folder bookinganalysis by executing command

    cd bookinganalysis

  2. Start the interactive deployment config generator by executing command

    npx fiori add deploy-config

  3. The fist prompt is Please choose the target. Use the arrow up/down keys to select Cloud Foundry and hit enter.

  4. Next it asks for a Destination name. Keep the selected entry abap-cloud-default_abap-trial(SCP) and hit enter.

  5. Answer the question Add application to managed application router? with Y for yes. Hit again the enter key.

The deploy configuration will now be generated.

Step 3. Add SAP Fiori launchpad config to bookinganalysis

  1. In the terminal in same folder execute following command to add a SAP Fiori launchpad configuration:

    npx fiori add flp-config

    This will start the interactive generator to add a SAP Fiori launchpad configuration.

  2. For Semantic Object enter the value Booking.

  3. For Action enter the value analysis.

  4. The Title can be freely set, we use Booking Analysis.

  5. We can skip the Subtitle (optional) by just hitting enter. This concludes the creation of the SAP Fiori launchpad.

Now we have added a deploy and SAP Fiori launchpad configuration and can continue to build and deploy the application bookinganalysis.

Step 4. Build and deploy the application bookinganalysis

Now that we have the deploy and SAP Fiori launchpad configurations, we can build and deploy the application.

  1. The artifact that is deployed to Cloud Foundry is call a Multi Target Application (MTA). To build this, we can execute following command in the terminal:

    npm run build:mta

  2. This will build the file bookinganalysis/mta_archives/archive.mtar. Now we can start the deployment using command

    npm run deploy

This will upload the mta we have build to the cloud account.

Because we want to deploy all 3 applications, we need to repeat these steps for application travellist and traveloverview.

Step 5. Add deploy config to travellist

  1. In the terminal, change to the folder ../travellist by executing command

    cd ../travellist

  2. Now add the deploy config by executing command

    npx fiori add deploy-config

  3. Use the same values as we did for the application we configured previously:

    Please choose the target: Cloud Foundry
Destination name: abap-cloud-default_abap-trial(SCP)
Add application to managed application router?: Yes

Step 6. Add SAP Fiori launchpad config to travellist

  1. We add also a SAP Fiori launchpad configuration to the travellist application by executing command

    npx fiori add flp-config

  2. For the travellist application we use following values below. The subtitle can be set, but here we leave it empty.

    Semantic Object: Travel
Action: manage
Title Travel: List
Subtitle: (optional)

Step 7. Build and deploy the application travellist

  1. As for the previous application, in order to deploy the travellist we need to build the mta first using command

    npm run build:mta

  2. Then we can deploy the application with command

    npm run deploy

Step 8. Add deploy config to traveloverview

  1. We also add a deploy and SAP Fiori launchpad configuration for the traveloverview application, but first we change to the folder by executing command:

    cd ../traveloverview

  2. Then we execute again the command to add the deployment configuration

    npx fiori add deploy-config

  3. And again, we use the same values:

    Please choose the target: Cloud Foundry
Destination name: abap-cloud-default_abap-trial(SCP)
Add application to managed application router?: Yes

Step 9. Add SAP Fiori launchpad config to traveloverview

  1. In the same way as for the other applications, we also add a SAP Fiori launchpad configuration to traveloverview by running command

    npx fiori add flp-config

  2. For traveloverview we use the values:

    Semantic Object: Travel
Action: overview
Title: Travel Overview
Subtitle (optional):

Step 10. Build and deploy the application traveloverview

  1. As a last step in this section we build the mta for traveloverview and deploy it to our cloud account using the commands ...

    npm run build:mta

  2. ... followed by command:

    npm run deploy

Step 11. Creating a SAP Fiori launchpad and adding the applications

In this part of the exercise we will enable the Launchpad service in your cloud account, create a SAP Fiori launchpad and add the previously deployed applications to it.

  1. Navigate to https://account.hanatrial.ondemand.com and login to your cloud trial account.

  2. Inside the cloud cockpit navigate to your trial subaccount.

Step 12. Activate the Launchpad service

  1. In Cloud Cockpit in your sub account click on Service Marketplace.

  2. Search for launchpad and click the tile.

  3. Find the Create button and click it.

  4. Keep the dropdown list boxes and click on Create.

  5. In the confirmation popup click on Close.

Step 13. Add launchpad role to your user

In order to manage SAP Fiori launchpads, you need to add the launchpad role to your user.

  1. Expand Security in the navigation bar on the left and click on Users. In the users list click on the row with your user name.

  2. In the section Role Collections click on the button with the three dots, then on Assign Role Collection.

  3. In the dialog search for launchpad, check the checkbox at Launchpad Admin, then click on Assign Role Collection.

Step 14. Create launchpad and add applications

In order to create a new launchpad we need to open the Site Manager.

  1. In the menu of subaccount trial click on Instances and Subscriptions.

  2. Find the Launchpad Service and click on Go to Application.

    This will open the 'Site Manager'.

  3. Click the button + Create Site.

  4. Give the new site a name, for instance Travel and click button Create.

  5. Click the back arrow to see the site directory.

  6. In the navigation bar on the left click on Provider Manager.

  7. Click the Fetch updated content button to refresh the HTML5 repository.

  8. In the navigation bar click on Content Manager.

  9. Click on tab Content Explorer.

  10. Click on tile HTML5 Apps.

  11. Select all 3 application and click button + Add to MyContent.

  12. Switch back to MyContent tab.

  13. Click Everyone.

  14. Click on Edit button.

  15. Set the cursor into field + Search for items to assign and select 3 applications.

  16. Click button Save.

  17. Click on Back to content management.

  18. Click on + New and select Catalog.

  19. Enter for instance Travel Catalog as title.

  20. Set the cursor into field + Search for items to assign and select all 3 applications.

  21. Click Save to assign the application to the catalog.

  22. Click on Back to content management.

  23. Click on + New and select Group.

  24. Enter as title for instance Travel Apps.

  25. Set the cursor into field + Search for items to assign and select all 3 applications.

  26. Click Save.

Step 5. Test launchpad

  1. From the navigation bar select Site Directory.

  2. In the Site Directory' view click on Go to site.

    This should open the launchpad showing the 3 applications we have deployed.

  3. You can test the apps and navigation, for instance by clicking on application Travel Overview.

  4. In 'Travel Overview' you can click the chart.

  5. This will trigger navigation to 'Booking Analysis'. From there you can go back.

    Which brings you back to the 'Travel Overview'. You can also click an entry in card 'Travel List'.

  6. This will navigate to 'Travel List' application.

Summary

You have completed the exercise! In this unit, you have learned

  • How to add deploy and SAP Fiori launchpad configurations to applications
  • How to deploy SAP Fiori applications
  • How to create a SAP Fiori launchpad and add applications to it

Next Exercise

Week 3 Unit 5: Building an SAP Fiori elements app with an external OData service