Skip to Content

Create a Fiori Launchpad App

0 %
Create a Fiori Launchpad App

Create a Fiori Launchpad App

December 8, 2021
Created by
March 23, 2020
After you set up the environment, use the generator to bootstrap a new SAPUI5 project. Learn about the main components of this basic project and the tools that support it.

You will learn

  • How to create a new SAPUI5 project on your local machine
  • How the UI5 tooling helps you to develop more efficient
QR code


Step 1: Scaffold a SAPUI5 project

Run the following command to trigger the creation of a new project.

yo easy-ui5 project

Choose the following responses for the prompted parameters.

Parameter Value
What do you want to do? Create a new OpenUI5/SAPUI5 project [app]
How do you want to name this project? products
Which namespace do you want to use? tutorial
On which platform would you like to host the application SAP Launchpad service
Which view type do you want to use? XML
Where should your UI5 libs be served from? Content delivery network (SAPUI5)
Would you like to create a new directory for the project? Yes
Would you like to add JavaScript code assist libraries to the project? Yes
What name should be displayed on the Fiori Launchpad tile Products


The following installation of the project’s dependencies might take a while.

Log on to answer question
Step 2: Inspect the generated code

Let’s have a look at the generated code. Go to the newly created directory and open the code with your favorite editor (here Visual Studio Code).

code tutorial.products/

You can see that the wizard created a bunch of folders and files.


The main code for the SAPUI5 app can be found in the directory webapp. You can also find the following directories:

  • deployer: A Cloud Foundry tasks which uploads the static web resources to the HTML5 application repository service during deploy-time.
  • uimodule: The source file of your SAP Fiori app.

You might miss the folders dist and mta_archives as they will be created later during the build step.

The package.json file contains much useful information about the project. The npm scripts are especially interesting since they wrap the command you will use later.

Log on to answer question
Step 3: Test the web app locally

This project leverages the UI5 tooling framework for development. This tool belt can help you to start a local web server and is extendable so you can integrate mocked destinations and a live-reload feature when files are updated. The great thing is, you don’t have to worry about this for now. The easy-ui5 generator already installed these two tasks for you. Additional UI5 tooling tasks can be found on

Start the web server locally via the command line.

npm start

Click on the only tile you see in the SAP Fiori Launchpad to start the SAPUI5 application.


Hint: Put windows next to each other to benefit from the live-reload feature. This way, you will be able to see the changes in the website right when you do file modifications without having to switch to another window.

Log on to answer question
Step 4: Modify the title

Open the i18n file uimodule/webapp/i18n/ Replace the content of this file with the following content.

# This is the resource bundle for tutorial.products

#Texts for manifest.json

#XTIT: Application name
appTitle=Product List

#YDES: Application description
appDescription=App Description
#XTIT: Main view title
title=Coming soon!

You should see the result of your action immediately in the browser.


Optional: Depending on your region, you can also add a new i18n file and maintain the corresponding properties in there. Possible file names could be,, or,

In which file can you find the invocation and configuration of the integrated UI5 tooling tasks?

Next Steps

Back to top