Technology Blog Posts by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

@UI.dataPoint with Comparison Field in RAP

Krishnaveni_Palanisamy
Explorer
‎2025 May 08 8:37 AM
830

 

@ui.dataPoint

In RAP (Restful ABAP Programming Model), the @ui.dataPoint annotation is used to define how individual fields should be presented in a UI, especially in SAP Fiori Elements applications

This annotation provides semantic metadata for a field such as:

  • Title
  • Criticality (status-based coloring)
  • Visualization (e.g., progress bar)
  • Target or forecast values

It is commonly used in object pages, analytical cards, or list reports to visually highlight important values.

  • Use Case: Data Point with Comparison Field

We will walk through how to dynamically control the color of a field (e.g., Fees) using a comparison field.

  • Step1 : Create a comparison field .

In your root CDS view, define a derived field based on some logic to act as the criticality field

Krishnaveni_Palanisamy_0-1746612437302.png

  • Step2 : Annotate in Metadata Extension

In the metadata extension of the root view, annotate the field using @ui.dataPoint.

Key properties:

  • Type  : #AS_DATAPOINT
  • Title   : Display label for the field
  • Qualifier: Uniquely identifies the data point (if multiple exist)
  • Visualization: Display the field appearance in UI.
  • Criticality: Reference to your comparison field that controls the color

Krishnaveni_Palanisamy_1-1746612437304.png

 

  • Step 3: Implement Behavior and Service Layers

To expose this in Fiori:

  • Define a behavior definition (for managed or unmanaged BO).
  • Create a service definition for the CDS view.
  • Bind it to a service binding (e.g., for OData V4 / Fiori Elements).

🎯 Output :

The Fees field will be displayed:

  • With dynamic color based on the comparison field value:
    • 🟢 Green — Positive
    • 🟠 Orange — Critical
    • 🔴 Red — Negative

 Object page.

Krishnaveni_Palanisamy_2-1746612437310.png

 List Page:

Based on the comparison of the field value the Fees field color will be changed.

Green.

Krishnaveni_Palanisamy_3-1746612437312.png

 

Red.

Krishnaveni_Palanisamy_4-1746612437314.png

 

Orange.

 Krishnaveni_Palanisamy_5-1746612437316.png

 

Conclusion:

By leveraging @ui.dataPoint, developers can deliver data-rich, visually intuitive, Fiori-compliant UIs directly from the backend using CDS views—without needing to build custom front-end logic.

This enhances both developer productivity and end-user experience in Fiori Elements apps.