Skip to Content

Create a Fiori Launchpad App

test
0 %
Create a Fiori Launchpad App
Details

Create a Fiori Launchpad App

2020-03-23
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

Prerequisites


Step 1: Scaffold a SAPUI5 project

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

yo easy-ui5

Choose the following responses for the prompted parameters.

Parameter Value
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 Fiori Launchpad on Cloud Foundry
Which view type do you want to use? XML
How do you want to name your main view? MainView
Where should your UI5 libs be served from? Content delivery network (SAPUI5)
Would you like to create a new directory for the project? Yes
What name should be displayed on the Fiori Launchpad tile Products
yeoman

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.

vscode

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

  • approuter: This is a Cloud Foundry application that exposes all used services via an HTTP endpoint
  • deployer: A Cloud Foundry tasks which uploads the static web resources to the HTML5 application repository service during deploy-time.
  • launchpad: A Cloud Foundry tasks which uploads the static Launchpad resources to the HTML5 application repository service during deploy-time.

You might miss the folders dist and mta_archieves 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 we’ll 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 npm.com.

Start the web server locally via the command line.

npm start

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

local

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 webapp/i18n/i18n_en.properties. Replace the content of this file with the following content.

title=Coming soon!
appTitle=Product List
appDescription=App Description

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

livereload

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 i18n_en_US.properties, i18n_en_GB.properties, or i18n_de_DE.properties,

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

Next Steps

Back to top