Skip to Content

Create a SAP Fiori App and Deploy it to SAP S/4HANA Cloud, ABAP Environment

Create a SAP Fiori app for a RAP business object in SAP Business Application Studio and deploy it to SAP S/4HANA Cloud, 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 TemelAugust 23, 2022
Created by
mervey45
February 15, 2022
Contributors
mervey45
mervey45

Prerequisites

  • IMPORTANT: It is essential that you are a member of SAP Early Adopter program.
  • You have a license for SAP S/4HANA Cloud and have a developer user in it
  • You have installed the latest Eclipse with ADT.
  • Trial: You need an SAP BTP, ABAP environment trial user or a license.
  • Business Catalog SAP_CORE_BC_COM must be assigned to business user
  • The user must have the same email address as the user from trial

HINT: The administrator receives an welcome e-mail after provisioning. This e-mail includes the system URL. By removing /ui you can log into the SAP S/4HANA Cloud ABAP Environment system. Further information can be found here.

  • 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. Now you are in the trial overview page. Click Trust Configuration.

      assign role collection
    4. Click Default identity provider to set up your trust.

      assign role collection

      HINT: If you are using a licensed system, make sure you have the trust administrator role assigned to your user.

    5. Enter your e-mail address and click Show Assignments.

      assign role collection
    6. Click Assign Role Collection .

      assign role collection
    7. Select Business_Application_Studio_Developer and click Assign Role Collection.

      assign role collection
    8. Check your result. Now your user should have the Business_Application_Studio_Developer role collection assigned.

      assign role collection

      You are now able to develop on SAP Business Application Studio.

  • Step 2
    1. Select your subaccount trial.

      assign role collection
    2. In the navigation pane expand the Connectivity section and select Destinations. Click New Destination.

      assign role collection

      Configure the new destination with the following standard field values.

      Field Name Value
      Name System_XXX_SAML_ASSERTION
      Type HTTP
      Description SAML Assertion Destination to SAP S/4HANA ABAP Environment system_xxx
      URL In the SAP S/4HANA Cloud tenant, navigate to the Communication Systems app and copy the Host Name from Own System = Yes
      Own System Host Name in Communication Systems App
      and paste it with prefix https:// for example https://my12345-api.s4hana.ondemand.com.
      Proxy Type Internet
      Authentication SAMLAssertion
      Audience Enter the URL of your system and remove -api, for example https://my12345.s4hana.ondemand.com.
      AuthnContextClassRef urn:oasis:names:tc:SAML:2.0:ac:classes:PreviousSession

      Select New Property and maintain the following Additional Properties and values.

      Field Name Value Remark
      HTML5.DynamicDestination true  
      HTML5.Timeout 60000 value stated in milliseconds. 60000 equals 1 minute. Required as deployment needs longer than the standard of 30 seconds.
      WebIDEEnabled true  
      WebIDEUsage odata_abap,dev_abap  
      nameIDFormat urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress Required in case your subaccount sends mail address as SAML Name ID for authentication ( Subject Name Identifier in Identity Authentication tenant ), although SAP S/4HANA Cloud tenant expects user login by default. That is the case with a trial Account. This also requires the mail address to be maintained for SAP S/4HANA Cloud tenant business users.

      Make sure that the Use default JDK truststore checkbox is ticked.

      Configure Destination

      Click Save.

    3. Click Download Trust.

      assign role collection
  • Step 3
    1. Select your system and right-click Properties.

      dev
    2. Select ABAP Development and copy the System URL without the -api. Paste in a browser and log in to the system.

      dev
    3. In your SAP Fiori launchpad select Communication Systems under Communication Management.

      dev
    4. Click New.

      dev
    5. Create a new communication system:

      • System ID: BAS_TRIAL_XXX
      • System Name: BAS_TRIAL_XXX

      Click Create.

      dev
    6. Click the arrow and select Technical Data.

      dev
    7. Check Inbound Only in the general section. Set SAML Bearer Assertion Provider ON and click Upload Signing Certificate.

      dev
    8. Click Browse and select your trust configuration, then click Upload.

      dev
    9. Copy everything after CN= of your signing certificate subject and past it in SAML Bearer Issuer. Click Save.

      dev

      Now your communication system is set up.

  • Step 4
    1. Select trial.

      dev
    2. Select Service Marketplace and search for SAP Business Application Studio. Select actions and click Go to Application.

      dev
    3. Check the privacy statement and click OK.

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

      dev
    5. Create a new dev space:

      • Name: Fiori
      • Type: SAP Fiori

      Click Create Dev Space.

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

      dev
  • Step 5
    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
  • Step 6
    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 a System
      • System: System_XXX_SAML_ASSERTION
      • Service: ZSB_SHOP_XXX(1) - OData V2
      object
      Click Next >.
    5. Select your main entity online_shop and click Next >.

      object
    6. Configure project attributes:

      • Name: z_onlineshop_xxx
      • Title: Online Shop 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
      • Destination: System_XXX_SAML_ASSERTION <your_abap_system_url>
      • Name: z_purchase_xxx
      • Package: z_purchase_req_xxx
      • Transport Request: <your_transport_request>
      • Deployment description: z_onlineshop_xxx
      app

      Click Next >.

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

      app

    8. Configure Fiori Launchpad:

      • Semantic Object: z_purchase_req_xxx
      • Action: display
      • Title: Online Shop XXX
      app

      Click Finish.

    9. Now all files have been generated.

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

      run

      HINT: An alternative to run the application is to right-click your project folder, 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 8
    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.

  • Step 9
    1. Open Eclipse and check the BSP library and SAP Fiori Launchpad app descriptor item folder in your package Z_PURCHASE_REQ_XXX. If you are not able to see BSP applications and SAP Fiori Launchpad app description items, refresh your package Z_PURCHASE_REQ_XXX by pressing F5.
      library
  • Step 10
    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: ZSHOP_IAM_XXX
      • Description: IAM App for online shop
      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: ZSB_SHOP_XXX_0001
      iam

      Click OK.

      Save and activate your IAM app.

      iam
    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: ZSHOP_BC_XXX
      • Description: Business catalog for online shop
      catalog
      Click Next >.
    10. Click Finish.

      catalog
    11. Select Apps and add a new one.

      catalog
    12. Create a new business catalog:

      • IAM App: ZSHOP_IAM_XXX_EXT
      • Name: ZSHOP_BC_XXX_0001
      • Description: Business Catalog to IAM App assignment
      catalog
      Click Next >.
    13. Click Finish.

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

      catalog
  • Step 11
    1. Go back to SAP Business Application Studio and deploy your changes. Therefore right-click your project z_onlineshop_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 your system.

      url
    5. Click Go and check your result.

      url
  • Step 12

    Where can you upload your trust configuration?

Back to top