Skip to Content

Develop and Run SAP Fiori Application With SAP Business Application Studio

test
0 %
Develop and Run SAP Fiori Application With SAP Business Application Studio
Details

Develop and Run SAP Fiori Application With SAP Business Application Studio

Merve Temel
Merve Temel
September 15, 2020
Created by
Merve Yalcin
March 14, 2019
Beginner
25 min.
SAP Cloud Platform, ABAP environment, SAP Cloud Platform, Tutorial, SAP Business Application Studio, Beginner, ABAP Development
Develop and run your SAP Fiori application with SAP Business Application Studio

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
  • How to create index.html
  • How to run index.html

Prerequisites

  • You need a SAP Cloud Platform ABAP Environment trial user or a license.

Step 1: Assign role collection to user

  1. Login to SAP Cloud Platform trial cockpit and click Enter Your Trial Account.

    assign role collection

  2. Select your subaccount trial.

    assign role collection

  3. Click Trust Configuration 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.

  4. Select sap.default.

    assign role collection

  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.

Done
Log on to answer question
Step 2: Create dev space

  1. Select trial > Subscriptions > SAP Business Application Studio and click Go to Application.

    dev

  2. Check the privacy statement and click OK.

    dev

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

    dev

  4. Create a new dev space:

    • Name: Fiori
    • Type: SAP Fiori
    • Additional SAP Extensions: Launchpad Module

    Click Create Dev Space.

    dev

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

    dev

Done
Log on to answer question
Step 3: Set up organization and space

  1. Now you are in your Fiori dev space in SAP Business Application Studio.
    Select Open Workspace to set your workspace.

    organization

  2. Select projects and click Open.

    organization

  3. Select The organization and space in Cloud Foundry have not been set.

    organization

  4. Press enter to set your Cloud Foundry endpoint.

    organization

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

  6. Enter your password and press enter.

    organization

  7. Select your global account and press enter.

    organization

  8. Select dev as your space and press enter.

    organization

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

    organization

Done
Log on to answer question
Step 4: Create list report object page

  1. Select View > Find Command.

    object

  2. Search for Yeoman UI Generators and select it.

    object

  3. Select SAP Fiori elements application and click Next >.

    object

  4. Select List Report Object Page and click Next >.

    object

  5. Configure data source, system and service:

    • Data source: Connect to SAP System
    • System: New System
    • ABAP Environment: <your_abap_trial_instance>
    • Service: ZUI_C_TRAVEL_M_XXX

    Click Next >.

    The destination service is: abap-cloud-<your_abap_trial_instance>(SCP).

    object

  6. Select your main entity TravelProcessor and click Next >.

    object

  7. Configure project attributes:

    • Name: ztravel_app_xxx
    • Title: Travel App XXX
    • Description: A Fiori application.

    Click Finish.

    objectHINT: Your application name must begin with a z letter and must be in lowercase letters.
Done
Log on to answer question
Step 5: Run SAP Fiori application for data preview

  1. Close the wizard.

    run

  2. Press the run button and select press button for Start ztravel_app_xxx to run your SAP Fiori application.

    run

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

  3. Click Expose and Open.

    run

  4. Enter travel and press enter.

    run

  5. Select test/.

    run

  6. Select flpSandbox.html.

    run

  7. Now your SAP Fiori application runs. Select your application Travel App XXX.

    run

  8. Click Go to see your result.

    run

  9. Check your result.

    run

Done
Log on to answer question
Step 6: Deploy your application

  1. Go back to SAP Business Application Studio, select projects, right-click on your project ztravel_app_xxx and select Open in Terminal.

    deploy

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

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

  4. To add deploy config details enter npx fiori add deploy-config.

    Add following information:

    • Please choose the target: ABAP
    • Target System URL: press enter for default
    • Is this an ABAP Cloud System?: Y
    • Name: press enter for default
    • Package: ztravel_app_xxx
    • Transport Request: <your_transport_request>
    • Generate standalone index.html during deployment: y

    deploy

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

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

Done
Log on to answer question
Step 7: Check BSP library and SAP Fiori Launchpad app descriptor item in Eclipse
  1. Open Eclipse and check the BSP library and SAP Fiori Launchpad app descriptor item folder in your package ZTRAVEL_APP_XXX.library
Done
Log on to answer question
Step 8: Create IAM App and business catalog

  1. In Eclipse right-click on 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
    • Service Name: ZUI_C_TRAVEL_M_XXX_0001

    iam

    Click OK.

    Save and activate your IAM app.

  7. Right-click on 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

Done
Log on to answer question
Step 9: Create index.html and run SAP Fiori application
View Full Instructions

  1. Go back to SAP Business Application Studio, select projects and open your project ztravel_app_xxx.Right-click your webapp folder and select New File.

    index

  2. Create a new file:

    • Name: index.html

    run

    Click OK.

  3. Copy and paste following code:

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BonusPlan_MD_CXT_TECH_Standalone</title>
    <!-- Bootstrapping UI5 -->
    <script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{"ztravel_app_xxx": "."}'
            data-sap-ui-frameOptions="trusted">
    </script> 
    <script>
        sap.ui.getCore().attachInit(function () {
            sap.ui.require([
                "sap/m/Shell",
                "sap/ui/core/ComponentContainer"
            ], function (Shell, ComponentContainer) {
                // initialize the UI component
                new Shell({
                    app: new ComponentContainer({
                        height : "100%",
                        name : "ztravel_app_xxx"
                    })
                }).placeAt("content");
            });
        });
 </script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content">
</body>
</html>

  4. Save index.html.

  5. Deploy your changes, therefore right-click on your project ztravel_app_xxx again and select Open in Terminal.

    url

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

    url

  7. Press CTRL and click on the following link to open the URL in a browser.

    url

  8. Login to ABAP Trial.

    url

  9. Click Go.

    url

  10. Check your result.

    url

Done
Log on to answer question
Step 10: Test yourself
Which main entity do you need to select in order to create your list report object page?
×

Give us 55 seconds of your time to help us improve

Next Steps

Navigate tutorial steps

QR Code

QR code
Back to top