SAP BTP ABAP Fiori UI Annotations Guide | Metadata Extension Tutorial (Hyderabad Training)

🟢 Introduction

SAP Fiori applications play a crucial role in modern enterprise user experience (UX). However, the default UI behavior often does not meet real-world business requirements, making customization essential for better usability and performance.

In this guide, you will learn how to customize SAP Fiori UI using Metadata Extensions and UI Annotations in SAP BTP ABAP, with real-time practical examples.

👉 If you're looking for practical, job-oriented training, check out our

SAP BTP ABAP Online Training

Program designed with real-time project scenarios, expert guidance, and placement support.

🟢 SAP BTP ABAP Architecture Overview

To build a modern SAP Fiori application using SAP BTP ABAP, developers follow a structured architecture consisting of multiple layers.

Database Tables – Store core business data
CDS Views (Core Data Services) – Define data models and relationships
Service Definition – Expose data as OData services
Service Binding – Connect backend services to UI
Metadata Extension – Customize UI behavior using annotations

These layers ensure a scalable, maintainable, and clean SAP application architecture, which is essential for enterprise-grade Fiori applications.

🟢 What is Metadata Extension in SAP ABAP?

Metadata Extension is a powerful feature in SAP BTP ABAP that allows developers to customize the UI without modifying the core CDS Views.

This approach helps maintain a clean architecture by separating UI logic from backend data models, making applications more scalable and easy to manage.

Separation of concerns – UI logic is independent
Better maintainability – No changes to core CDS
Flexible customization – Easily extend UI behavior

To enable metadata extension, use the annotation:

@Metadata.allowExtensions: true

🟢 Enhancing UI with Header Annotations

In SAP BTP ABAP, you can improve the user interface by adding header-level annotations using UI annotations. These annotations help display meaningful information at the top of your Fiori application.

Header annotations are useful for showing titles, descriptions, and key business information like Sales Order details, making the application more user-friendly.

Display titles – Example: Sales Order
Show descriptions – Customer or Buyer details
Improve UX – Better readability for end users

Use the following annotation to define header information:

@UI.headerInfo: {
  typeName: 'Sales Order',
  typeNamePlural: 'Sales Orders',
  title: {
    type: #STANDARD,
    value: 'Order ID'
  },
  description: {
    value: 'Customer'
  }
}

🟢 Controlling Table Display using Line Item Annotations

In SAP BTP ABAP, you can control how data appears in the Fiori list page using Line Item annotations. These annotations define which columns are displayed, their order, and their labels.

Instead of manually selecting columns every time, you can programmatically define the structure for a consistent and professional UI.

Define column labels – User-friendly names
Control column order – Using position values
Improve UI consistency – Same layout for all users

Use the following annotation to control table columns:

@UI.lineItem: [
  { position: 10, label: 'Sales Order', value: 'Order ID' },
  { position: 20, label: 'Customer', value: 'Customer ID' },
  { position: 30, label: 'Sales Person', value: 'Created By' }
]

📌 Pro Tip: Always use position values in multiples of 10 (10, 20, 30). This helps you easily insert new columns later without disturbing the existing order.

🟢 Adding Filters using Selection Field Annotations

Filters play a crucial role in improving user experience in SAP Fiori applications. Using Selection Field annotations in SAP BTP ABAP, you can allow users to filter data dynamically based on their requirements.

Instead of loading all records, users can quickly find relevant data by applying filters such as Sales Order, Customer, or Sales Person.

Enable field-based filtering
Improve performance by reducing data load
Enhance usability with quick search options

Use the following annotation to enable filters:

@UI.selectionField: [
  { position: 10, element: 'Order ID' },
  { position: 20, element: 'Created By' },
  { position: 30, element: 'Sales Manager' }
]

📌 Note: Filter positions are independent of line item positions. Each annotation category maintains its own ordering logic.

🟢 Implementing Global Search in SAP Fiori

Global search is a powerful feature in SAP Fiori applications that allows users to search across multiple fields using a single input box. This improves usability and helps users quickly find relevant data.

In SAP BTP ABAP, you can enable global search using specific annotations, making your application more interactive and user-friendly.

Search across multiple fields with a single input
Faster data retrieval
Improved user experience

Use the following annotations to enable global search:

@Search.searchable: true

@Search.defaultSearchElement: true

🚀 Pro Tip: Apply @Search.defaultSearchElement to multiple fields so that the search works across different columns like Order ID, Customer, and Created By.

🟢 Designing Object Page using Facets in SAP Fiori

In SAP Fiori applications, the object page displays detailed information when a user clicks on a record. This detailed layout is designed using Facets in SAP BTP ABAP.

Facets help organize data into logical sections such as Sales Order details, Customer information, and Item details, making the UI structured and easy to navigate.

Organize data into sections
Improve navigation on object page
Display related data like header, customer, and items

Use the following annotation to define facets:

@UI.facet: [
  {
    id: 'SalesOrder',
    type: #IDENTIFICATION_REFERENCE,
    label: 'Sales Order Details',
    position: 10
  },
  {
    id: 'Customer',
    type: #IDENTIFICATION_REFERENCE,
    label: 'Customer Details',
    position: 20
  },
  {
    id: 'Items',
    type: #LINEITEM_REFERENCE,
    label: 'Item Details',
    position: 30
  }
]

📌 Important:
• IDENTIFICATION_REFERENCE → Used for single record display (Header, Customer)
• LINEITEM_REFERENCE → Used for multiple records (Item table)

🚀 Pro Tip: Always define correct cardinality (1:1 or 1:N). Incorrect configuration may not show data properly even if no error is displayed.

🟢 Common Mistakes to Avoid in SAP Fiori UI Annotations

While working with SAP BTP ABAP and Fiori UI annotations, even small mistakes can lead to unexpected UI behavior. Understanding these common errors can save development time and improve application performance.

Missing Metadata Extension – Not enabling @Metadata.allowExtensions
Incorrect Cardinality – Wrong relationship (1:1 vs 1:N)
Wrong Annotation Usage – Using incorrect UI annotations
Duplicate Position Values – Leads to inconsistent column order
Missing Labels – Results in poor user experience

⚠️ Important: Some errors may not show technical issues but will affect UI behavior. Always validate your annotations carefully.

🚀 Master SAP BTP ABAP with Real-Time Training

Ready to build real-time SAP Fiori applications and boost your career? Join our expert-led SAP BTP ABAP training program designed for beginners and professionals.

✔ 20+ Years Industry Expert Trainer
✔ Live Interactive Classes
✔ Daily Recorded Sessions
✔ 24/7 Server Access
✔ 100% Placement Assistance

👉 Enroll Now – SAP BTP ABAP Training

📞 Limited Seats Available – Book Your FREE Demo Today!