Skip to Content

Create a Fiori Launchpad App

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
nicoschoenteichNico SchoenteichNovember 28, 2022
Created by
IObert
March 23, 2020

Prerequisites

  • Step 1

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

    Terminal
    Copy
    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
    Do you want to enable the SAP Fiori elements flexible programming model? No
    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
    Would you like to initialize a local git repository for the project? Yes
    What name should be displayed on the Fiori Launchpad tileProducts
    yeoman

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

  • Step 2

    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).

    Bash
    Copy
    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:

    • 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.

  • Step 3

    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.

    Bash
    Copy
    npm start
    

    Click on the only tile you see in the SAP Fiori 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.

  • Step 4

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

    TEXT
    Copy
    # 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.

    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?

Back to top