By

Create Odata Service and Fiori Elements application

In the last article, we created projection layer for Travel BO( Business Object). Today, we will create Service for the created BO.

Steps:

  1. Create Service Definition

Right click on ABAP on Cloud package

Menu options for creating a new ABAP Repository Object, highlighting the 'New' option.
Screenshot of the ABAP Repository Object interface, highlighting the 'Service Definition' option under the 'Business Services' section.
Screenshot of the Service Definition creation interface in ABAP on Cloud, displaying fields for project name, package, service name, description, original language, and navigation buttons.
Screenshot of the New Service Definition interface showing available templates, including 'Service Definition (creation)' and 'Service Extend (creation)', with a code snippet for defining a service.
@EndUserText.label: 'Travel processor service definition'
define service ZHA_SA_SD_TRAVEL_PROCESSOR {
  expose ZHA_SA_TRAVEL_PROCESSOR        as Travel;
  expose ZHA_SA_BOOKING_PROCESSOR       as Booking;
  expose ZHA_SA_BOOKING_SUPPL_PROCESSOR as BookSuppl;
  expose /DMO/I_Agency                  as Agency;
  expose /DMO/I_Customer                as Customer;
  expose /DMO/I_Carrier                 as Carrier;
  expose /DMO/I_Connection              as Connection;
  expose /DMO/I_Supplement              as Supplement;
  expose I_Currency                     as Currency;
  expose I_Country                      as Country;
  expose /DMO/I_Overall_Status_VH       as TravelStatus;
  expose /DMO/I_Booking_Status_VH       as BookingStatus;
}

2. Create Service Binding for Odata V2

Menu option for creating a new service binding in the ABAP on Cloud development environment.
Screenshot of the New Service Binding interface, showing fields for Name, Description, Original Language, Binding Type, and Service Definition.
Screen showing service binding configuration for ZHA_SA_SB_TRAVEL_PROC_V2, specifying OData V2 - UI binding type and service version details.

Publish Odata

Service binding configuration screen for ZHA_SA_SB_TRAVEL_PROC_V2 showing details for OData V2 - UI, including options to add service definitions and publish the service.
Service binding details for the ZHA_SA_SB_TRAVEL_PROC_V2 in OData V2 - UI format, showing service version, endpoint, and entity set associations.

3. Create Service Binding for Odata V4

Dropdown menu with 'New Service Binding' option highlighted in orange.
Screenshot of the 'New Service Binding' window displaying fields to create a service binding for OData V4 in an ABAP environment.

Save and Activate

Publish Odata service

Service binding interface for OData V4 showing the service definition and publication status.

4. Test run

Open V2 Odata >> Select Travel Entity >> Click Service URL

Service binding details for ZHA_SA_SB_TRAVEL_PROC_V2 displaying service information and version details for an OData service.
XML file structure displaying data collections for Travel service attributes including Agency, BookingStatus, Carrier, and Connection.

Open V4 Odata >> Select Travel Entity >> Click Service URL

Screenshot of the service binding details for ZHA_SA_SB_TRAVEL_PROC_V4, displaying the OData V4 binding type and associated service definitions.
JSON representation of OData metadata showing various entity names and corresponding URLs for a travel processor service.

Default service document for Odata V2 is xml, however for Odata V4 it is json.

Output

Odata V2 for Customer Entity

/sap/opu/odata/sap/ZHA_SA_SB_TRAVEL_PROC_V2/Customer?sap-client=100&$format=json

JSON output showing customer details including ID, name, address, and contact information for a travel service.

Odata V4 for Customer Entity

/sap/opu/odata4/sap/zha_sa_sb_travel_proc_v4/srvd/sap/zha_sa_sd_travel_processor/0001/Customer?sap-client=100

JSON data showing customer details including CustomerID, FirstName, LastName, Title, Street, PostalCode, City, CountryCode, PhoneNumber, and EmailAddress.

As you can see in Odata V2, we have metadata information for every record, which is not in Odata V4.

Therefore, Odata V4 is light weight as compared to Odata V2 and latest format.

5. Test Fiori application

Go to Odata V2 service binding >> Right click on Travel Entity >> Launch Fiori Elements App Preview

Screenshot showing the Service Version Details for an OData service with endpoint information, entity sets, and associations in a user interface.
SAP Fiori Elements App preview interface with no visible columns in the table. Instruction to select columns in table settings.

Go to Settings >> Select all columns

Screenshot of SAP Fiori Elements App preview with an empty table and a message prompting users to select columns in the settings.
View settings interface displaying selected columns for Agency ID, Booking Fee, and other fields in a tabular format.

Go to Adapt Filters >>Select required filters >> Click Ok

Preview interface for Fiori Elements App displaying standard view with columns for Agency ID, Booking Fee, Changed By, and options to adapt filters and execute the search.
A user interface displaying filter options for adapting data, including checkboxes for fields like Agency ID, Customer ID, and Description.
Screenshot of the 'Adapt Filters' dialog in a Fiori application interface, showing a list of fields including 'Customer ID', 'Description', and 'Overall Status', with an 'OK' button highlighted.

Click Go

Screenshot of the Fiori Elements App preview interface showing fields for Agency ID, Customer ID, Description, and Overall Status, with a Go button and Adapt Filters option.

You can see the data is loaded

Preview of Fiori Elements App showing a table with agency IDs, booking fees, and other associated details.

6. Create Metadata(MDE) File

Why MDE file needed?

In the current Fiori element report, we need to select the columns and filters every time we open the Fiori elements, which is not good for user experience.

In the metadata file, we will set the default user experience.

Steps:

Pre-requisite:

Add @Metadata.allowExtensions: true extension in Travel processor projection view.

  • Right click on Travel processor projection view >> New Metadata Extension
Menu options for creating a new metadata extension in an application development environment
Interface for creating a metadata extension in a software application, showing fields for project, package, name, description, original language, and extended entity.
Code snippet showing the annotation of an entity in a programming environment with specific metadata layer attributes.
@Metadata.layer: #PARTNER
annotate entity ZHA_SA_TRAVEL_PROCESSOR with
{
  @UI.selectionField: [{ position : 10 }]
  TravelId;
  @UI.selectionField: [{ position : 20 }]
  AgencyId;
  @UI.selectionField: [{ position : 30 }]
  CustomerId;
//  BeginDate;
//  EndDate;
 // BookingFee;
  @UI.selectionField: [{ position : 40 }]
  TotalPrice;
//  CurrencyCode;
  @UI.selectionField: [{ position : 50 }]
  Description;
  @UI.selectionField: [{ position : 60 }]
  OverallStatus;
//  CreatedBy;
//  CreatedAt;
//  LastChangedBy;
//  LastChangedAt;
  /* Associations */
//  _Agency;
//  _Booking;
//  _Currency;
//  _Customer;
//  _OverallStatus;

}

Now, Launch the Fiori elements again

You can see the selection fields coming by default.

Fiori Elements application preview interface with fields for Travel ID, Agency ID, Customer ID, Total Price, and Description, along with options to adapt filters.

Add UI annotation for column display

@Metadata.layer: #PARTNER
annotate entity ZHA_SA_TRAVEL_PROCESSOR with
{
  @UI.selectionField: [{ position : 10 }]
  @UI.lineItem: [{ position : 10   }]
  TravelId;
  @UI.selectionField: [{ position : 20 }]
  @UI.lineItem: [{ position : 20   }]
  AgencyId;
  @UI.selectionField: [{ position : 30 }]
  @UI.lineItem: [{ position : 30   }]
  CustomerId;
   @UI.lineItem: [{ position : 40   }]
   BeginDate;
  //  EndDate;
  // BookingFee;
  @UI.selectionField: [{ position : 40 }]
  @UI.lineItem: [{ position : 50   }]
  TotalPrice;
  //  CurrencyCode;
  @UI.selectionField: [{ position : 50 }]
  Description;
  @UI.selectionField: [{ position : 60 }]
  @UI.lineItem: [{ position : 60   }]
  OverallStatus;
  //  CreatedBy;
  //  CreatedAt;
  //  LastChangedBy;
  //  LastChangedAt;
  /* Associations */
  //  _Agency;
  //  _Booking;
  //  _Currency;
  //  _Customer;
  //  _OverallStatus;

}

Click on Go

Preview interface for Fiori Elements App with fields for Travel ID, Agency ID, Customer ID, Total Price, Description, and an 'Adapt Filters' button.

And, you can see the columns displayed.

Screenshot of SAP Fiori Elements App Preview displaying a travel data entry form with fields for Travel ID, Agency ID, Customer ID, Total Price, and Overall Status.

Thank for visiting!

Sangeeta Singh

One response to “Create Odata Service and Fiori Elements application”

  1. […] In this article, we will add UI annotations for the Fiori Elements App which we created in out last article. https://hanaxabap.com/2025/08/09/create-odata-service-and-fiori-elements-application/ […]

Leave a Reply

Discover more from HANAxABAP

Subscribe now to keep reading and get access to the full archive.

Continue reading