How to Create a Fiori Elements App on SAP BTP Using CDS Views

Creating Fiori Elements apps on SAP Business Technology Platform (BTP) using Core Data Services (CDS) views is a powerful way to provide users with structured and interactive applications quickly. This guide will walk you through each step, from understanding the business scenario to deploying the app.

Business Scenario: Real-Time Vendor Overview Dashboard

Imagine a large manufacturing organization, where the procurement team needs real-time insights into vendors, payment statuses, and contact details. They require a dashboard that aggregates vendor information and displays essential data for decision-making. Rather than building a custom UI from scratch, you decide to leverage SAP Fiori Elements. This allows you to use CDS views to expose vendor data as an OData service and then create a Fiori Elements app on SAP BTP to visualize it. This solution is efficient, scalable, and reusable for future needs.

More Such Questions

Step-by-Step Solution

Step 1: Create the CDS View in SAP S/4HANA

To begin, create a CDS view in SAP S/4HANA that consolidates relevant vendor data from tables like LFA1 (Vendor Master) and LFB1 (Company Code Data).

Define the CDS View
Go to ABAP Development Tools (ADT) in Eclipse and create a new CDS view. Use the code below to create a basic view with essential fields.

@AbapCatalog.sqlViewName: 'ZVENDOR_OVRVW'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Vendor Overview CDS View'
@OData.publish: true

define view Z_VENDOR_OVERVIEW as select from lfa1
    inner join lfb1 on lfa1.lifnr = lfb1.lifnr
{
    key lfa1.lifnr as Vendor,         // Vendor Number
    lfa1.name1 as VendorName,         // Vendor Name
    lfa1.ort01 as City,               // City
    lfb1.bukrs as CompanyCode,        // Company Code
    lfb1.zuawa as PaymentMethod       // Payment Method
}

Activate the CDS View
After defining the CDS view, activate it in ADT. The @OData.publish: true annotation will automatically generate an OData service for this view.

Step 2: Register and Test the OData Service in SAP Gateway

Register the OData Service
Go to SAP Gateway’s Service Builder (/IWFND/MAINT_SERVICE) and register the OData service named Z_VENDOR_OVERVIEW_CDS.

Test the OData Service
Use SAP Gateway Client (/IWFND/GW_CLIENT) or Postman to perform GET requests on the service URL. This verifies that data is retrieved as expected.

Example request:

https://<SAP_system>/sap/opu/odata/sap/Z_VENDOR_OVERVIEW_CDS/

Step 3: Configure SAP BTP for Fiori Elements

To access this OData service from SAP BTP, configure a Destination in SAP BTP Cockpit.

Create a Destination
Go to SAP BTP Cockpit > Destinations and create a new destination with the following settings:

  • Name: S4HANA
  • URL: Enter your SAP system’s URL
  • Proxy Type: OnPremise (if using SAP Cloud Connector)
  • Authentication: BasicAuthentication or other applicable methods
  • Additional Properties: WebIDEUsage=odata_abap;odata_gen

Test the Destination
Use the Check Connection option to ensure the destination is correctly set up.

Step 4: Create a Fiori Elements App in SAP Business Application Studio

Open SAP Business Application Studio (BAS)
In SAP BTP, open SAP Business Application Studio and start a new project.

Create a New Fiori Elements Project

  • Select Start from Template.
  • Choose SAP Fiori elements application.
  • Choose List Report Page (useful for overview apps).
  • Select Connect to an OData Service and pick the S4HANA destination created earlier.
  • Choose the OData service (Z_VENDOR_OVERVIEW_CDS) and the Entity Set (the CDS view fields).

Configure Project Details
Enter the application details, such as:

  • Application Title: Vendor Overview Dashboard
  • Namespace: com.company.vendor
  • Data Source: Choose the OData source created

Generate the Project
Complete the steps and let the project generate. You’ll see a generated app with basic CRUD functionalities.

Step 5: Customize the Fiori Elements App

Once generated, you can customize the Fiori Elements app using the following methods:

Modify the Annotation File
In SAP Business Application Studio, open the annotation.xml file. Use this file to define UI-specific annotations, such as field labels, table columns, and filters.

Example annotation to display VendorName as a filter:

<Annotation Term="UI.SelectionFields">
    <PropertyPath>VendorName</PropertyPath>
</Annotation>

Adjust List Report Behavior
Define custom filter fields, table columns, or sorting options directly in the annotation files. For example, to add sorting, use the UI.DataField annotation to enhance sorting or filtering.

Add Custom Actions
To add custom actions, you can enhance the List Report using the UI.Identification term in your annotations to add actionable buttons or links.

Step 6: Deploy the Fiori Elements App

After finalizing your customizations, deploy the app to SAP BTP.

Build the Project
Right-click on the project and select Build to compile and check for errors.

Deploy to SAP BTP
Right-click the project, select Deploy > Deploy to SAP BTP. Follow the prompts to deploy the app to your SAP BTP subaccount.

Access the Deployed App
Once deployed, navigate to the application URL provided in the deployment logs. The app will be live and can be accessed by end-users.

Tips for Success

  1. Annotations are Powerful: Use annotations in CDS views and XML files to control data presentation without custom coding.
  2. Testing Each Step: Test each component individually, such as the OData service in Gateway Client and the Fiori app locally in BAS.
  3. Explore Fiori Elements Documentation: SAP provides extensive documentation on customizing Fiori Elements apps. Use it to add advanced features.
  4. Monitor Performance: Fiori Elements can handle large datasets, but optimizing the CDS view and using pagination or lazy loading improves performance.
  5. Authorization: Ensure that all users have appropriate roles to access the CDS view and OData service in both SAP Gateway and SAP BTP.

By following these steps, you’ve successfully created a Fiori Elements app on SAP BTP using a CDS view. This solution provides a scalable, user-friendly application with minimal coding, ideal for real-time insights in a business environment.

Leave a Comment