Skip to Content

Create a SAP Fiori App and Deploy it to SAP BTP, ABAP Environment

Create a SAP Fiori app for a RAP business object from SAP BTP, ABAP Environment in SAP Business Application Studio and deploy it to SAP BTP, ABAP Environment.
You will learn
  • How to assign role collections
  • How to create dev spaces
  • How to set up organization and space
  • How to create list report object pages
  • How to run SAP Fiori applications
  • How to deploy applications
  • How to check BSP library in Eclipse
  • How to create IAM apps and business catalogs
mervey45Merve TemelJune 10, 2022

Prerequisites

  • Trial: You need an SAP BTP, ABAP environment trial user or a license.
  • Licensed system:
    • The business catalog SAP_A4C_BC_DEV_UID_PC (Development - UI Deployment) needs to be assigned to a business role of the developer user. For an existing ABAP systems, the business catalog needs to be added manually to the existing developer business role.
    • You need to be a member at the used global account​
    • You need to be an organization manager at the used Cloud Foundry subaccount
    • You need to be a security administrator at the used Cloud Foundry Subaccount​
    • The SAP Business Application Studio and the SAP BTP, ABAP environment instance should be under same subaccount.
  • Step 1
    1. Login to SAP BTP Trial cockpit and click Enter Your Trial Account.

      assign role collection
    2. Select your subaccount trial.

      assign role collection
    3. Select Service Marketplace and search for SAP Business Application Studio and select it.

      dev
    4. Click Create.

      dev
    5. Select the default entry and click Create.

      dev
    6. Click View Subscription.

      dev
  • Step 2
    1. Select trial.

      assign role collection
    2. Now you are in the trial overview page. Click Users and select your user.

      assign role collection
    3. Click Assign Role Collection.

      assign role collection
    4. Select Business_Application_Studio_Administrator, Business_Application_Studio_Developer and Business_Application_Studio_Extension_Deployer and click Assign Role Collection.

      assign role collection
  • Step 3
    1. On the left menu scroll to the top and select Instances and Subscriptions and open SAP Business Application Studio.

      dev
    2. Now the SAP Business Application Studio has started. Click Create Dev Space.

      dev
    3. Create a new dev space:

      • Name: Fiori
      • Type: SAP Fiori

      Click Create Dev Space.

      dev
    4. When your status is Running, select your dev space Fiori.

      dev
  • Step 4
    1. Now you are in your Fiori dev space in SAP Business Application Studio.
      Select Open Folder to set your workspace.

      organization
    2. Select projects and click Open.

      organization
    3. Select View > Find Command.

      organization
    4. Search for CF: Login to Cloud Foundry and select it.

      organization
    5. Select your API endpoint and press enter.

      organization
    6. Enter the same e-mail address you set in your trial instance and press enter.

      organization

    7. Enter your password and press enter.

      organization
    8. Select your global account and press enter.

      organization
    9. Select dev as your space and press enter.

      organization
    10. Check your result. Now your organization and space have been set.

      organization
  • Step 5
    1. Select View > Find Command.

      object
    2. Select Fiori: Open Application Generator.

      object
    3. Select List Report Object Page and click Next >.

      object
    4. Configure data source, system and service:

      • Data source: Connect to an SAP System
      • System: ABAP Environment on SAP Business Technology Platform
      • ABAP Environment: default_abap-trial
      • Service: ZUI_C_TRAVEL_M_XXX(1) - OData v2
      object

      Click Next >.

      A destination for the abap-trial service instance is generated automatically.
    5. Select your main entity TravelProcessor and click Next >.

      object
    6. Configure project attributes:

      • Name: ztravel_app_xxx
      • Title: Travel App XXX
      • Description: A Fiori application.
      • Add deployment configuration: Yes
      • Add FLP configuration: Yes
      • Configure advanced options: No

      Click Next >.

      object
      HINT: Your application name must begin with a z letter and must be in lowercase letters.
    7. Configure deployment:

      • Target: ABAP
      • Is this an SAP Business Technology Platform system? Yes
      • Target System URL: <your_abap_system_url>
      • Name: ztravel_app_xxx
      • Package: ztravel_app_xxx
      • Transport Request: <your_transport_request>
      • Deployment description: deployment xxx
      app

      Click Next >.

      HINT: If you want to copy your transport request, please do following: Open Eclipse, search your package ZTRAVEL_APP_XXX and open it. Open your transport organizer to see your transport request. Copy your transport request for later use. You can find your transport request underneath the Modifiable folder.

      deploy

    8. Configure Fiori Launchpad:

      • Semantic Object: ztravel_app_xxx
      • Action: display
      • Title: Travel App XXX
      app

      Click Finish.

    9. Now all files have been generated.

      app
  • Step 6
    1. Press the run button on the left side and select the Start ztravel_app_xxx run button to start your SAP Fiori application.

      run

      HINT: An alternative to run the application is to open the terminal and enter: npm start.

    2. Your default browser will open. Click Go to see your result.

      run
    3. Check your result.

      run
  • Step 7
    1. Click Files, right-click your project and select Open in Terminal.

      deploy
    2. Enter npm run deploy to deploy your application. When prompted, check deployment configuration and press y. Open the URL at the end of the deployment log in browser to preview the application.

      deploy

      When the deployment is successful, you will get these two information back as a result: UIAD details and deployment successful.

    HINT: If you want to update your SAP Fiori Launchpad configuration, then you can do following steps:
    1. Go back to SAP Business Application Studio, select projects, right-click your project ztravel_app_xxx and select Open in Terminal.

    deploy
    1. To add Fiori Launchpad content use this command, enter npx fiori add flp-config.

      Add following information:

      • Semantic Object: ztravel_app_xxx
      • Action: display
      • Title: Travel App XXX
      • Subtitle (optional): press enter
      deploy
    2. Open Eclipse, search your package ZTRAVEL_APP_XXX and open it. Open your transport organizer to see your transport request. Copy your transport request for later use. You can find your transport request underneath the Modifiable folder.

      deploy
    3. Go back to SAP Business Application Studio and open the terminal again. To add deploy config details, enter npx fiori add deploy-config.

      Add following information:

      • Please choose the target: ABAP
      • Is this an SAP Business Technology Platform system?: Y
      • Destination: press enter for default
      • Is this an S/4 Cloud system? N
      • Name: press enter for default
      • Package: ztravel_app_xxx
      • Transport Request: <your_transport_request>
      • Deployment description: deployment xxx
      deploy

      The ui5-deploy.yaml will be generated as part of this deploy config command.

  • Step 8
    1. Open Eclipse and check the BSP library and SAP Fiori Launchpad app descriptor item folder in your package ZTRAVEL_APP_XXX. If you are not able to see BSP applications and SAP Fiori Launchpad app description items, refresh your package ZTRAVEL_APP_XXX by pressing F5.
      library
  • Step 9
    1. In Eclipse right-click your package ZTRAVEL_APP_XXX and select New > Other Repository Object.

      iam
    2. Search for IAM App, select it and click Next >.

      iam
    3. Create a new IAM App:

      • Name: ZTRAVEL_IAM_XXX
      • Description: IAM App
      iam
      Click Next >.
    4. Click Finish.

      iam
    5. Select Services and add a new one.

      iam
    6. Select following:

      • Service Type: OData V2 (deprecated)
      • Service Name: ZUI_C_TRAVEL_M_XXX_0001
      iam

      Click OK.

      Save and activate your IAM app.
    7. Right-click your package ZTRAVEL_APP_XXX and select New > Other Repository Object.

      catalog
    8. Search for Business Catalog, select it and click Next >.

      catalog
    9. Create a new business catalog:

      • Name: ZTRAVEL_BC_XXX
      • Description: Business catalog
      catalog
      Click Next >.
    10. Click Finish.

      catalog
    11. Select Apps and add a new one.

      catalog
    12. Create a new business catalog:

      • IAM App: ZTRAVEL_IAM_XXX_EXT
      • Name: ZTRAVEL_BC_XXX_0001
      catalog
      Click Next >.
    13. Click Finish.

      catalog
    14. Click Publish Locally to publish your business catalog.

      catalog
  • Step 10
    1. Go back to SAP Business Application Studio and deploy your changes. Therefore right-click your project ztravel_app_xxx and select Open in Terminal.

      url
    2. Enter npm run deploy. When prompted, check deployment configuration and press y.

      url
    3. Press CTRL and click the following link to open the URL in a browser.

      url
    4. Log in to ABAP Trial.

      url
    5. Click Go.

      url
    6. Check your result.

      url
  • Step 11

    Which main entity do you need to select in order to create your list report object page?

Back to top