Day 5: CDS UI Annotations (Fiori-ready CDS)

-
 

Day 5: CDS UI Annotations (Fiori-ready CDS)

  • UI annotations: @UI.lineItem, @UI.selectionField

  • Field Groups and Facets

  • Search annotations, Smart Filter setup

  • CDS View Extension

  • All annotations discussed so far

Hands-on:

  • Build CDS with Smart Filter support

  • Test in WebIDE or Business Application Studio


๐Ÿ”น 1. What Are CDS UI Annotations?

CDS UI Annotations are metadata tags used in a CDS view to describe how the data should be presented in a Fiori app. They control UI behavior—like which fields show in the table, which fields are searchable, editable, or grouped—and enable automatic UI generation.

✅ Why important?
 They eliminate the need for separate UI coding by guiding Fiori Elements to build your UI dynamically.

๐Ÿ”น 2. Why Use UI Annotations?

Purpose

Traditional Way

With CDS UI Annotations

Define UI fields

Manual XML/JS coding

Just use @UI.lineItem

Group fields in forms

XML views / config

@UI.facet, @UI.fieldGroup

Enable search and filter

Backend + XML config

@Search.fuzzinessThreshold, @UI.selectionField

Localize labels

Custom translation work

@EndUserText.label

✅ Annotations allow Fiori to “read” your CDS view and render UI automatically.

๐Ÿ”น 3. Important UI Annotations and Their Use

✅ @UI.lineItem - @UI.lineItem: [{ position: 10 }]

Displays a field as a column in a Fiori List Report table.

✅ @UI.selectionField - @UI.selectionField: [{ position: 20 }]

Marks a field to appear as a filter in the Smart Filter Bar. 

✅ @UI.identification -  @UI.identification: [{ position: 10 }]

Used in the Object Page header.

✅ @UI.facet and @UI.fieldGroup

Used to group fields in an Object Page for better UX.

๐Ÿ”น 4. Example: Fiori-ready CDS with UI Annotations


@AbapCatalog.sqlViewName: 'ZUI_CDS_ORDR'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #NOT_REQUIRED

@EndUserText.label: 'Sales Order with UI Annotations'

define view entity ZUI_SalesOrder

  as select from I_SalesOrder as so

  association [0..1] to I_Customer as _Customer

    on so.BuyerParty = _Customer.Customer

{

  @UI.lineItem:       [{ position: 10 }]

  @UI.selectionField: [{ position: 10 }]

  key so.SalesOrder,


  @UI.lineItem:       [{ position: 20 }]

  @UI.selectionField: [{ position: 20 }]

  so.SalesOrderType,


  @UI.lineItem:       [{ position: 30 }]

  @UI.selectionField: [{ position: 30 }]

  so.SalesOrganization,


  @UI.lineItem:       [{ position: 40 }]

  @UI.selectionField: [{ position: 40 }]

  so.TotalNetAmount,


  @UI.lineItem:       [{ position: 50 }]

  _Customer.CustomerName

}

➡️ This CDS, when exposed via OData and used in a Fiori List Report, automatically builds a table with filters and column headers.

๐Ÿ”น 5. What Are Field Groups & Facets?

✅ @UI.facet

Used to create logical groups of fields (like tabs or sections in Object Page).

✅ @UI.fieldGroup

Defines a group of fields shown together under a facet.

@UI.facet: [

  { id: 'General', type: #IDENTIFICATION_REFERENCE, label: 'General Info', position: 10 }

]

@UI.fieldGroup: [{ groupId: 'General', position: 10 }]

@UI.identification: [{ position: 10 }]

so.SalesOrder


๐Ÿ”น 6. Search Annotations & Smart Filter Setup

To improve search experience:

✅ @Search.defaultSearchElement

This marks a field as primary search field in global search (Ctrl+F).

@Search.defaultSearchElement: true

@UI.lineItem: [{ position: 10 }]

CustomerName

✅ @Search.fuzzinessThreshold - @Search.fuzzinessThreshold: 0.8

Controls fuzzy search behavior.

๐Ÿ”น 7. CDS View with All Key UI Annotations (Full Example)


@AbapCatalog.sqlViewName: 'ZSO_UI_FULL'

@EndUserText.label: 'Sales Order - Full UI Demo'

@AccessControl.authorizationCheck: #NOT_REQUIRED

define view entity ZUI_FullSalesOrder

  as select from I_SalesOrder as so

  association [0..1] to I_Customer as _Customer

    on so.BuyerParty = _Customer.Customer

{

  @UI.lineItem:       [{ position: 10 }]

  @UI.selectionField: [{ position: 10 }]

  @UI.identification: [{ position: 10 }]

  @Search.defaultSearchElement: true

  key so.SalesOrder,


  @UI.lineItem:       [{ position: 20 }]

  @UI.selectionField: [{ position: 20 }]

  @UI.identification: [{ position: 20 }]

  so.SalesOrderType,


  @UI.lineItem:       [{ position: 30 }]

  @UI.selectionField: [{ position: 30 }]

  @UI.identification: [{ position: 30 }]

  so.SalesOrganization,


  @UI.lineItem:       [{ position: 40 }]

  @UI.selectionField: [{ position: 40 }]

  so.TotalNetAmount,


  @UI.lineItem:       [{ position: 50 }]

  @UI.identification: [{ position: 50 }]

  _Customer.CustomerName

}


✅ Summary: When & Why to Use CDS UI Annotations

Use Case

Annotation

Show field in List table

@UI.lineItem

Make field filterable

@UI.selectionField

Show field on Object Page

@UI.identification

Organize fields as section/tab

@UI.facet

Group related fields together

@UI.fieldGroup

Improve Search UI

@Search.*



๐Ÿ”น 8. CDS View Extension (Enhancement)

✅ What Is It?

CDS View Extensions allow you to add fields or annotations to existing CDS views without modifying the original view.

This supports the SAP Clean Core principle — allowing you to extend views without touching standard SAP or base custom views.

๐Ÿง  Why Do We Use It?

๐Ÿ” Use Case

๐Ÿ’ก Why Extension?

Add custom field to SAP's I_Material

No modification to standard code

Add UI annotations in a project CDS

Avoid cluttering base logic

Enable reuse across projects

Modular, maintainable CDS architecture

๐Ÿ”ง Syntax


extend view entity ZI_SalesOrderParam with ZI_SalesOrderParam_Extension

{

  vbak.vbtyp as SalesDocType,

  vbak.vkgrp as SalesGroup

}


๐Ÿ› ️ Step-by-Step Implementation

Let’s enhance the CDS ZI_SalesOrderParam (created above) with two extra fields: Sales Document Type and Sales Group.

✅ Step 1: Create Extension in ADT


Package: ZCDS_TRAINING

Name: ZI_SALESORDERPARAM_EXT


✅ Step 2: Add Code


@EndUserText.label: 'Extension for Sales Order Param CDS'

extend view entity ZI_SalesOrderParam with ZI_SalesOrderParam_Ext

{

  vbak.vbtyp as SalesDocType,

  vbak.vkgrp as SalesGroup

}


✅ Note:

  • The original view (ZI_SalesOrderParam) must include vbak in the FROM clause.

  • You can also add annotations in the extension like @UI.lineItem, etc.

✅ Step 3: Activate & Preview

Now when you do Data Preview on ZI_SalesOrderParam, the extra fields SalesDocType and SalesGroup are included in the result set.

๐Ÿงช UI Extension Use Case

extend view entity ZI_SalesOrderParam with ZI_SalesOrderParam_UI

{

  @UI.lineItem: [{ position: 10 }]

  vbak.vbtyp as SalesDocType,


  @UI.selectionField: [{ position: 20 }]

  vbak.vkgrp as SalesGroup

}



๐Ÿ“˜ CDS Annotations Overview from Day 1 - 4

Annotations in CDS are metadata tags that define semantics, behaviors, and UI characteristics of the CDS views. They help expose CDS views properly in analytics, OData, or UI5 apps.

๐Ÿ”น 1. @AbapCatalog Annotations

Annotation

Purpose

@AbapCatalog.sqlViewName

Defines the technical SQL view name in the DB

@AbapCatalog.compiler.compareFilter

Optimization for filters during query execution (optional)

✅ Example:

@AbapCatalog.sqlViewName: 'ZVBAKBASIC'


๐Ÿ”น 2. @EndUserText Annotations

Annotation

Purpose

@EndUserText.label

Provides the UI/display label for the CDS view

✅ Example:

@EndUserText.label: 'Sales Order Basic View'


๐Ÿ”น 3. @UI Annotations

Used for UI purposes (Fiori Elements, etc.)

Annotation

Purpose

@UI.headerInfo

Defines how the view header should appear in UI (title, object type, etc.)

✅ Example:

@UI.headerInfo: {

  typeName: 'Sales Order',

  typeNamePlural: 'Sales Orders',

  title: { type: #STANDARD, value: 'SalesOrder' }

}


๐Ÿ”น 4. @Analytics Annotations

Used to enable the CDS view for analytical reporting tools like RSRT or SAP Analytics Cloud.

Annotation

Purpose

@Analytics.query: true

Makes a CDS view act like a BW Query for analytical reporting

✅ Example:

@Analytics.query: true


๐Ÿ”น 5. @Semantics Annotations

These annotations indicate unit, currency, and value types, essential for analytical views and correct field formatting.

Annotation

Purpose

@Semantics.currencyCode: true

Indicates the field is a currency code

@Semantics.unitOfMeasure: true

Indicates the field is a unit of measure

@Semantics.amount.currencyCode: 'Field'

Links a currency field to a numeric value field (e.g., NetValue)

✅ Example:

@Semantics.currencyCode: true

Currency,

@Semantics.amount.currencyCode: 'Currency'

NetValue,


๐Ÿ”น 6. @ObjectModel Annotations

Used for controlling OData exposure and UI behavior in VDM or RAP.

Annotation

Purpose

@ObjectModel.readOnly: true

Prevents update/delete operations via OData/RAP

@ObjectModel.representativeKey

Defines representative key for UI rendering (e.g., Name)

@ObjectModel.text.element: 'Field'

Links a text field to a code field (Value Help)

✅ Example:

@ObjectModel.text.element: 'Country'

CountryName


๐Ÿ”น 7. @AccessControl Annotations (Used in Advanced cases)

Annotation

Purpose

@AccessControl.authorizationCheck

Controls whether CDS respects PFCG authorization objects

✅ Example:

@AccessControl.authorizationCheck: #CHECK


๐Ÿ“Œ Optional: Filter & Parameter-related

Annotation

Purpose

@Consumption.filter.defaultValue

Defines a default value for a filter

@Consumption.filter.mandatory: true

Marks a filter as mandatory

@Environment.systemField: #USER

Passes current user automatically as parameter

๐Ÿงช Summary Table

Category

Annotation Example

Description

Technical

@AbapCatalog.sqlViewName

SQL view name

UI Label

@EndUserText.label

View title in UI

UI Rendering

@UI.headerInfo

Header in Fiori apps

Analytics

@Analytics.query: true

Makes view analytical

Semantics

@Semantics.currencyCode, @Semantics.amount.currencyCode

Currency/Unit definition

Value Help

@ObjectModel.text.element

Enables text association

Access Control

@AccessControl.authorizationCheck

Enables authorization integration

Filtering

@Consumption.filter.mandatory

UI filter behavior











Comments

Post a Comment

Popular posts from this blog

Day 1: Introduction to ABAP on HANA

-
  Day 1: Introduction to ABAP on HANA What is ABAP on HANA? Code Pushdown concept Differences: Classical ABAP vs ABAP on HANA Tools: Eclipse/ADT, HANA Studio vs SE80 Setup environment (if needed) Tasks : Read SAP Help documentation Watch SAP DevTuts video (YouTube/learning.sap.com) Write Hello World CDS view in ADT 1️⃣ What is ABAP on HANA? Verified Source : SAP Help: ABAP on SAP HANA ABAP on HANA is not a new language — it's the modern way to write ABAP code that uses SAP HANA’s in-memory capabilities . It focuses on performance, clean architecture, and code pushdown to the database. 2️⃣ Code Pushdown Concept Verified Source : SAP Blog - Code Pushdown Explained Traditional ABAP fetches all data, then filters it in memory. With HANA, logic should be executed at the DB level (pushdown), using: CDS Views AMDP (ABAP Managed DB Procedures) Table Functions Benefit : Less data transfer = Faster, more efficient programs. 3️⃣ Classical ABAP vs ABAP on HANA Feature Classical ABAP ABAP on...
Read more

Day 3: CDS Intermediate – Filters & Expressions

-
  ✅ ๐——๐—ฎ๐˜† 3 : CDS Intermediate - Filter and Expression  Where conditions Parameters COALESCE, CASE, Arithmetic expressions Value help with @ObjectModel and search help annotations Hands-on : CDS view with parameter & expression field Add @Search.defaultSearchElement ๐Ÿ“Œ 1. Using WHERE Conditions in CDS Views In CDS views, the WHERE clause filters data at the database level, enhancing performance by retrieving only relevant records.​ Medium Syntax: define view entity ZI_CustomerFilter   as select from kna1   where land1 = 'IN' {   key kunnr,       name1,       ort01 } Key Points: The WHERE clause applies conditions directly to the data source. Fields used in the WHERE clause need not be part of the SELECT list. Aggregate functions are not permitted within the WHERE clause.​ SAP Help Portal For more details, refer to the SAP Help Portal on WHERE clauses . ๐Ÿ“Œ 2. Utilizing Parameter...
Read more

Day 2: CDS View Basics

-
Click Here To Explore Day 1: Introduction to ABAP on HANA Day 2: CDS View Basics Syntax and structure of CDS Data elements, labels, associations, joins Types: Basic View, Composite View Predefined functions Annotations: @AbapCatalog, @EndUserText Hands-on : Create 2–3 CDS views with associations Practice INNER JOIN, LEFT OUTER JOIN ๐Ÿ“˜ Syntax and Structure of CDS Views SAP recommends using the DEFINE VIEW ENTITY syntax for defining CDS views, especially in S/4HANA and RAP models. This approach simplifies the syntax and eliminates the need for certain annotations like @AbapCatalog.sqlViewName . Example: @AbapCatalog.viewEnhancementCategory: [#NONE] @AccessControl.authorizationCheck: #NOT_REQUIRED @ EndUserText .label: 'Customer Basic View' @Metadata.ignorePropagatedAnnotations: true @ObjectModel.usageType:{ serviceQuality: #X, sizeCategory: #S, dataClass: #MIXED } define view entity ZDEMO_Customer as select from snwd_bpa { key node_key as GenericNo...
Read more