Day 7: CDS + OData Integration + Deep Dive: UI5 Fiori Annotations

-

 




Day 7: CDS + OData Integration + Deep Dive: UI5 Fiori Annotations

  • @OData.publish annotation

  • Service Activation: /IWFND/MAINT_SERVICE

  • URI Testing, $metadata, $expand, $filter

  • Deep Dive: UI5 Fiori Annotations

Tasks:

  • Expose CDS via OData

  • Fetch data in browser using URI




✅ 1. What is CDS + OData Integration?

CDS (Core Data Services) views in ABAP can be directly exposed as OData services. This allows frontend applications (e.g., SAP Fiori) to consume backend data over HTTP in a RESTful manner.

Why?

  • Enable Fiori/UI5 apps.

  • Minimize custom Gateway code.

  • Automatically generate metadata and entities.

✅ 2. @OData.publish: true – Explanation and Example

Annotation: @OData.publish: true

Purpose: Automatically creates an OData service from the CDS view.

Example:

@AbapCatalog.sqlViewName: 'ZC_CUSTOMERS'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'Customer Consumption View'

@OData.publish: true

define view ZC_Customer as select from I_Customer

{

  key Customer,

  FirstName,

  LastName,

  Country

}

➡️ This will generate a service: ZC_CUSTOMER_CDS.

✅ 3. Service Activation – Step-by-Step using /IWFND/MAINT_SERVICE

  1. Go to transaction /IWFND/MAINT_SERVICE.

  2. Click Add Service.

  3. System Alias: Usually LOCAL.

  4. Search for Technical Service: ZC_CUSTOMER_CDS.

  5. Click Add Selected Services.

  6. Assign to a package / local object.

  7. Assign a Catalog and click Continue.

  8. Service is now active.

✅ 4. URI Testing – $metadata, $expand, $filter

After activation, test using:

✅ Metadata:

/sap/opu/odata/sap/ZC_CUSTOMER_CDS/$metadata

Returns XML with the structure of your entity.

✅ Filter:

/sap/opu/odata/sap/ZC_CUSTOMER_CDS?$filter=Country eq 'IN'

Fetches customers from India.

✅ Expand:

If associations exist:

/sap/opu/odata/sap/ZC_SALESORDER_CDS?$expand=_Items


✅ 5. Create VDM-Style CDS + OData with Authorization + UI Annotations

๐Ÿ”ท Step 1: Basic View


@AbapCatalog.sqlViewName: 'ZB_SALESORD'

@EndUserText.label: 'Basic Sales Order View'

define view entity ZB_SalesOrder as select from vbak

{

  key vbeln,

      erdat,

      kunnr

}

๐Ÿ”ท Step 2: Composite View


@AbapCatalog.sqlViewName: 'ZJ_SALESORD'

@EndUserText.label: 'Composite Sales Order View'

define view entity ZJ_SalesOrder as select from ZB_SalesOrder

association [0..1] to I_Customer as _Customer

    on $projection.kunnr = _Customer.Customer

{

  key vbeln,

      erdat,

      kunnr,

      _Customer

}

๐Ÿ”ท Step 3: Consumption View with OData, Authorization & UI Annotations


@AbapCatalog.sqlViewName: 'ZC_SALESORD'

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'Sales Order Consumption View'

@OData.publish: true

define view entity ZC_SalesOrder as select from ZJ_SalesOrder

{

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

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

  key vbeln,


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

  erdat,


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

  kunnr,


  _Customer

}


๐Ÿ”ท Step 4: DCL Object – Restrict by user


define role ZC_SalesOrderAuth {

  grant select on ZC_SalesOrder

    where kunnr = SESSION_CONTEXT('CDS_CLIENT');

}

(Replace with real logic as per requirement.)

✅ 6. Fetch Data in Browser using URI

Once the service is active and metadata is validated:

  1. Open browser.

  2. URL:

https://<hostname>/sap/opu/odata/sap/ZC_SALESORDER_CDS/

Use Examples:

Get all records: ZC_SALESORDER_CDS

Filter by KUNNR: ZC_SALESORDER_CDS?$filter=kunnr eq '1000001'

Expand Customer: ZC_SALESORDER_CDS?$expand=_Customer

✅ Summary: What we’ve achieved

Layer

CDS View

Description

Basic

ZB_SalesOrder

Data from VBAK

Composite

ZJ_SalesOrder

Adds association to I_Customer

Consumption

ZC_SalesOrder

OData enabled, UI annotated, DCL enforced









๐Ÿ”Ž Deep Dive: Fiori UI Annotations for CDS

๐Ÿ“Œ Goal:

Expose business logic via CDS views and directly render it in Fiori Elements using UI Annotations, enabling List Reports, Object Pages, Analytical Dashboards, Smart Filters, Charts, etc.

๐Ÿ”ฐ 1. UI Annotation Basics

Topic

Description

@UI.*

These annotations instruct the Fiori Elements framework how to display CDS data

Key use

Show fields as table columns, form fields, chart measures, or smart filters

๐Ÿ“˜ 2. Most Important Annotations (Real-Time Usage)

Annotation

Purpose

Example

@UI.lineItem

Define table columns in a Fiori List Report

@UI.lineItem: [{ position: 10, label: 'Sales Order' }]

@UI.selectionField

Create Smart Filter bar input field

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

@UI.identification

Fields on Object Page Form Header

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

@UI.facet

Define tabs/sections (groups of fields)

@UI.facet: [{ id: 'SalesData', label: 'Sales Data', type: #IDENTIFICATION_REFERENCE, targetElement: 'salesAmount' }]

@UI.fieldGroup

Group related fields inside facet

@UI.fieldGroup: [ { qualifier: 'SalesGroup', label: 'Sales Info' } ]

@UI.dataPoint

Show KPIs (in object page)

@UI.dataPoint: { value: 'TotalSales', title: 'Total Sales' }

@UI.chart

Enable smart chart UI

@UI.chart: { chartType: #BAR, dimensions: ['Region'], measures: ['Sales'] }

@UI.hidden

Hide a field from UI

@UI.hidden: true

๐Ÿ” 3. Deep Dive Topics Must Cover for UI5

✅ a) UI Facets and Field Groups

  • Facets = Tabs or Sections in Fiori Object Page

  • Field Groups = Group of fields inside a facet

Why? Improves readability and UX on Object Pages

@UI.facet: [{

    id: 'Header',

    label: 'Order Info',

    type: #IDENTIFICATION_REFERENCE,

    targetQualifier: 'OrderDetails'

}]

@UI.fieldGroup: [ { qualifier: 'OrderDetails', label: 'Order Detail Section' } ]


✅ b) Smart Filters with Selection Fields

Used for filtering in Fiori List Reports.

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

key salesOrderId : abap.numc(10);


✅ c) Data Points and KPI Cards (Object Page or Overview Page)


@UI.dataPoint: {

  value: 'grossAmount',

  title: 'Total Order Value',

  criticality: 'orderCriticality'

}

grossAmount: abap.curr(16,2);


✅ d) Smart Charts

@UI.chart: {

  chartType: #COLUMN,

  dimensions: ['customerName'],

  measures: ['netAmount'],

  description: 'Sales per Customer'

}


๐Ÿง  4. Advanced: UI Presentation Variants

Used to structure visual behavior in complex apps

@UI.presentationVariant: [{

   sortOrder: [ { by: 'createdAt', direction: #DESC } ],

   requestAtLeast: [ 'salesOrderId', 'customerName', 'createdAt' ]

}]


๐Ÿ“Œ 5. Other Useful UI Annotations

Annotation

Use Case

@UI.headerInfo

Display object name/title in object page

@UI.isSummary

Used in analytics or summarized report view

@UI.importance

Controls visibility (high/medium/low)

@UI.multiLineText

Render long text across multiple lines

๐Ÿ“Š 6. Practical Scenarios to Implement

You should try building these using CDS with UI annotations:

Scenario

Use

Fiori List Report with Smart Filters

@UI.lineItem, @UI.selectionField

Object Page with tabs and KPIs

@UI.facet, @UI.dataPoint, @UI.fieldGroup

Smart Chart app with CDS chart annotations

@UI.chart, @UI.selectionField

Analytical dashboard with summary card

@UI.dataPoint, @UI.headerInfo, @Analytics.query: true

✅ 7. OData Exposure with UI Annotations


@OData.publish: true

define view ZI_SalesOrder

  as select from ZSalesOrder {

    key salesOrderId,

    @UI.lineItem: [{ position: 10, label: 'Customer' }]

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

    customerName

  }


Then expose it via /IWFND/MAINT_SERVICE to make it accessible to Fiori.

๐Ÿงช 8. Testing Your Annotations

Once exposed:

  • Open Fiori Elements List Report App

  • Check filters, table columns, and object page sections

  • Adjust annotations as needed using Live Preview in ADT

๐Ÿ Summary

Layer

Focus

CDS View

Provides the data

UI Annotations

Define the UI behavior

OData Publish

Makes it available to Fiori

Smart Controls

Auto-read CDS annotations and render






Day 8: AMDP Basics

  • What is AMDP?

  • Syntax and structure

  • Use of SQLScript in methods

  • Class creation with interface IF_AMDP_MARKER_HDB

Hands-on:

  • Create a basic AMDP class with SELECT logic

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