Developing Read-Only List Reporting Apps

by | Aug 1, 2021 | ABAP RAP

Home » SAP » ABAP » ABAP RAP » Developing Read-Only List Reporting Apps

Preface – This post is part of the SAP ABAP RAP series.

Introduction

Using persistent data sources, we are going to implement a query for the OData service to get an application with the read-only feature. This OData service will be consumed by the Fiori Element application.

This article will provide the step-by-step guide to build a read-only list reporting application.

  1. Create data model with CDS views.
  2. Add associations to CDS views for navigation purpose.
  3. Add relevant annotations.
  4. Changing UI field labels and description
  5. Create OData service
    1. Create a Service Definition
    2. Expose CDS views
    3. Create Service Binding
    4. Publish OData service
  6. Application preview

Create data model with CDS views

Procedure

  1. Launch ADT (ABAP Development Tool).
  2. Select package for your development.
  3. Right-click on package and choose NEW > Other Repository Objects > Core Data Services > Data Definition.
  4. Provide the details (Name, Description).
    Create data model with CDS views
  5. Select Next and provide the Transport Request number.
  6. Select Finish.

Result Screen

An inactive version of the data definition is created. You need to provide the data source name and add the elements in the CDS views. Similarly, create all the required CDS views.

Generated Template code

Figure 2: Generated Template code

 

Add associations to CDS views for navigation purpose

  1. Define association and cardinality
    Define association and cardinality
  2. Define mapping condition
    Define mapping condition
  3. Add association element list in CDS view
    Add association element list in CDS view

Add relevant annotations

Add required annotations to fields (see the below figure).

ABAP CDS Annotation

Changing UI field labels and description

UI field labels and description allows you to customize your UI application. You can add text annotation (@ObjectModel.text.association:'<_AssocToTextProvider>’),value help (@Consumption.valueHelpDefinition: [{ entity: { name: ‘<target_view>’ , element: ‘<target_element>’ }}]), search capability ( @Search.searchable: true ) and as many functionality to your field element.

Changing UI field labels and description

Create OData service

a.       Create a service definition

In service definition, we will expose our data models.

Procedure

  1. Launch ADT (ABAP Development Tool).
  2. Select package for your development.
  3. Right-click on package and choose NEW > Other Repository Objects > Business Service > Service Definition.
  4. Provide the details (Name, Description).
    Create a service definition
  5. Select Next and provide the Transport Request number.
  6. Select Finish.

 

b.      Expose CDS views

In service definition, add the CDS view that you want to expose to UI. You can provide an alias also for the same. Once the CDS views are exposed, activate the service definition.

Expose CDS views

c.       Create Service Binding

In service definition, we will expose our data models.

Procedure

  1. Launch ADT (ABAP Development Tool).
  2. Select package for your development.
  3. Right-click on the package and choose NEW > Other Repository Objects > Business Service > Service Binding.
  4. Provide the details (Name, Description).
    Create Service Binding
  5. Select Next and provide Transport Request number.
  6. Select Finish.

When you open the created service binding from editor you can see the below screen. As soon as the service binding is created, it is registered in your local system.

Activate the service binding

Activate the service binding and it is ready for consumption.

d.      Publish OData service

Once you activate the service binding, the OData service is published and is activated in SAP Gateway. Now it can be consumed by UI5 application.

Publish OData service

The service URL on the right side will provide the metadata information of OData service. Preview button will navigate you to the resulting UI service.

Application preview

The resulting UI5 application will look like this:

Application preview

Author

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Author