Skip to Content

Prepare Your Development Environment for SAP Fiori Elements

test
0 %
Prepare Your Development Environment for SAP Fiori Elements
Details

Prepare Your Development Environment for SAP Fiori Elements

Joachim Fiess
Joachim Fiess
November 27, 2020
Created by
Joachim Fiess
November 27, 2020
Beginner
20 min.
SAP Fiori, SAP Cloud Platform, Tutorial, SAP Business Application Studio, SAP Cloud Application Programming Model, SAP Fiori tools, Beginner
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
QR code

Prerequisites

For more information about the SAP Cloud Application Programming Model, refer to the documentation pages of SAP Cloud Application Programming Model.

Step 1: Create development space

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

    Start the Dev Space

  2. On the following page, enter a name for your new development space and choose the application type SAP Cloud Business 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.

    Start the Dev Space

    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.

    Start the Dev Space
Done
Log on to answer question

 

Step 2: Clone the demo service
View Full Instructions

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:

    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, then click Open Workspace in the explorer panel.

    Click on “Open Workspace” button

    Select the project in the popup dialog and click on Open.

    Confirm project in popup

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

    Explorer service structure
Done
Log on to answer question
Step 3: Complete the service

  1. Open a new terminal in your SAP Business Application Studio.

    Open a 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.

    Start CDS Command Line Client

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.

Done
Log on to answer question
Step 4: Test yourself
What kind of application do you choose for your development space if you want to use the SAP Cloud Application Programming Model?
×

Next Steps

Navigate tutorial steps

QR Code

QR code
Back to top