Skip to Content

Prepare Your Development Environment for SAP Fiori Elements

Beginner
20 min.
SAP Fiori, Beginner, SAP Fiori tools, SAP Cloud Application Programming Model, Tutorial, SAP Business Application Studio, SAP Business Technology Platform
Set up your development environment with SAP Business Application Studio to create an SAP Fiori elements application based on the SAP Cloud Application Programming Model.
You will learn
  • How to set up SAP Business Application Studio for SAP Fiori elements application development
  • How to create a project containing the service needed for generating your sample application
jo-fiessJoachim FiessMay 23, 2022
Created by
jo-fiess
November 27, 2020
Contributors
fakirdi
jo-fiess

Prerequisites

Click here for more information about the SAP Cloud Application Programming Model.

 

  • Step 1

    1. On the SAP Business Application Studio start page, click Create Dev Space.

    2. On the following page, enter a name for your new development space and choose the application type Full Stack Cloud Application from the list.

      Click Create Dev Space.

      Start the Dev Space

      Your development space is now ready to use. Wait until the status has changed from STARTING to RUNNING. After the initial creation this is done automatically.

      In case your development space was stopped, you can restart it by clicking the start button (for example after a longer idle time).

    3. Open the development space by clicking on its name.

  • Step 2

    Once you are in the development space, you will see a Welcome page from which you can create the application project.

    1. Copy the following GitHub repository URL into your clipboard:

      URL
      Copy
      https://github.com/SAP-samples/fiori-elements-incident-management.git

    2. Click the link Clone from Git.

      Click on link “Clone from Git”

      Paste the repository link into the input field and press Enter.

      Enter the github repository URL

    3. Wait until the cloning has finished. When you see a toast message in the lower right corner, click Open to open the project.

      You see your project in the explorer panel as shown in the image below:

      Explorer service structure
  • Step 3

    1. From the menu Terminal, select New Terminal

      Ensure that your terminal prompt shows fiori-elements-incident-management. At the terminal prompt, enter npm install and press Enter. This command will download and install all necessary modules from the npm package repository required to run the SAP Fiori elements application.

      Enter npm install

    2. After the installation is complete, enter npm i @sap/cds-dk -g at the terminal prompt.

      This will start the command line client and development toolkit for the SAP Cloud Application Programming Model. You will need this client to run your SAP Fiori elements application in the tutorial Generate a Fiori elements application. For more information about the command line client, refer to the documentation pages of SAP Cloud Application Programming Model.

    Your development environment is now ready.

    In the next tutorial, you will create an SAP Fiori elements application and run it inside the SAP Business Application Studio.

  • Step 4

    What kind of application do you choose for your development space if you want to use the SAP Cloud Application Programming Model?

Back to Top
Back to top