Cell Color and Highlight In Fiori list Report using CDS Views.

[[{“value”:”

A Purchase Order (PO) List Report to monitor the status of deliveries. It is critical that immediately identify which POs are:

• Overdue: The delivery date is in the past, and the status is still “Open.” (Highlight: Red/Negative)
• Due Soon: The delivery date is within the next 7 days. (Highlight: Orange/Critical)
• On Track: The PO is open but not due soon. (Highlight: Green/Positive)
• Completed/Cancelled: PO is closed. (Highlight: Grey/Neutral)

In this scenario, a calculated field is used to assign a Criticality Code to each record, which the Fiori UI consumes to apply the correct color-coding.

The solution involves two main steps:

Backend (CDS View): Define a transient field that calculates the numeric criticality code based on business logic (e.g., date difference, status).

Frontend (Metadata Extension/MDE): Use the Criticality annotation to link the field you want to color (e.g., DeliveryStatusText) to the calculated criticality code field.

Interface View.

AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: ‘INTERFACE VIEW PO’
@Metadata.ignorePropagatedAnnotations: true
define root view entity ZNP_I_PO1 as select from znp_dt_po1
{
key po_id as PoID,
po_desc as PoDesc,
status_text as StatusText,
delivery_date as DeliveryDate,
vendor_id as VendorID,
@Semantics.amount.currencyCode: ‘Currency’
total_amount as TotalAmount,
@Consumption.valueHelpDefinition: [ {
entity.name: ‘I_CurrencyStdVH’,
entity.element: ‘Currency’,
useForValidation: true
} ]
currency as Currency,
case
when znp_dt_po1.status_text = ‘Open’ and znp_dt_po1.delivery_date < $session.system_date then 1 // Overdue
when znp_dt_po1.status_text = ‘Open’
and znp_dt_po1.delivery_date <= dats_add_days($session.system_date,
7 ,’UNCHANGED’) then 2 // Due Soon
when znp_dt_po1.status_text = ‘Open’ then 3 // On Track
else 0 // Closed
end as DeliveryCriticality,
case
when status_text = ‘Open’ and delivery_date < $session.system_date then ‘Overdue’
when status_text = ‘Open’ and delivery_date <= dats_add_days($session.system_date,7 ,’UNCHANGED’) then ‘Due Soon’
when status_text = ‘Open’ then ‘On Track’
else ‘Closed’
end as DeliveryCriticalityText,

@Semantics.user.createdBy: true
created_by as CreatedBy,
@Semantics.systemDateTime.createdAt: true
created_at as CreatedAt,
@Semantics.user.localInstanceLastChangedBy: true
last_changed_by as LastChangedBy,
@Semantics.systemDateTime.localInstanceLastChangedAt: true
last_changed_at as LastChangedAt
}

Updating the status based on the Delivery date.

Metadata Extension.

@Metadata.layer: #CORE
annotate entity ZNP_C_PO1
with
{
@EndUserText.label: ‘PoID’
.facet: [ {
label: ‘General Information’,
id: ‘GeneralInfo’,
purpose: #STANDARD,
position: 10 ,
type: #IDENTIFICATION_REFERENCE
} ]
.identification: [ {
position: 10 ,
label: ‘PoID’
} ]
.lineItem: [ {
position: 10 ,
label: ‘PoID’
} ,{ type : #FOR_ACTION , dataAction: ‘copy_po’ , label : ‘Copy PO’ }]
.selectionField: [ {
position: 10
} ]
PoID;

@EndUserText.label: ‘PoDesc’
.identification: [ {
position: 20 ,
label: ‘PoDesc’
} ]
.lineItem: [ {
position: 20 ,
label: ‘PoDesc’
} ]
.selectionField: [ {
position: 20
} ]
PoDesc;

@EndUserText.label: ‘StatusText’
.identification: [ {
position: 30 ,
label: ‘StatusText’
} ]
.lineItem: [ {
position: 30 ,
label: ‘StatusText’
} ,{ type: #FOR_ACTION , dataAction: ‘set_delivered’ , label: ‘Set Delivered’}]
.selectionField: [ {
position: 30
} ]
StatusText;

@EndUserText.label: ‘DeliveryDate’
.identification: [ {
position: 40 ,
label: ‘DeliveryDate’
} ]
.lineItem: [ {
position: 40 ,
label: ‘DeliveryDate’
} ]
.selectionField: [ {
position: 40
} ]
DeliveryDate;

@EndUserText.label: ‘VendorID’
.identification: [ {
position: 50 ,
label: ‘VendorID’
} ]
.lineItem: [ {
position: 50 ,
label: ‘VendorID’
} ]
.selectionField: [ {
position: 50
} ]
VendorID;

@EndUserText.label: ‘TotalAmount’
.identification: [ {
position: 60 ,
label: ‘TotalAmount’
} ]
.lineItem: [ {
position: 60 ,
label: ‘TotalAmount’
} ]
.selectionField: [ {
position: 60
} ]
TotalAmount;

.lineItem: [
{
position: 65,
label: ‘Delivery Status’,
criticality: ‘DeliveryCriticality’, // use numeric field for color
importance: #HIGH
}
]
DeliveryCriticalityText;

.identification: [ {
position: 70
} ]
.lineItem: [ {
position: 70
} ]
.selectionField: [ {
position: 70
} ]
CreatedBy;

.identification: [ {
position: 80
} ]
.lineItem: [ {
position: 80
} ]
.selectionField: [ {
position: 80
} ]
CreatedAt;

.identification: [ {
position: 90
} ]
.lineItem: [ {
position: 90
} ]
.selectionField: [ {
position: 90
} ]
LastChangedBy;

.identification: [ {
position: 100
} ]
.lineItem: [ {
position: 100
} ]
.selectionField: [ {
position: 100
} ]
LastChangedAt;
}

add the Criticality Field in the annotation For Delivery Criticality text.

Output.

1.When the status is open and Delivery date is not due soon .

2.When the Status is open and Delivery date is  within the next 7 days.

3.When Status is open and Delivery date is in past.

4.When the Order is delivered.

Conclusion:

This scenario helps to quickly assess the delivery status of purchase orders using color-coded criticality indicators. Overdue, due soon, on-track, and completed POs are visually highlighted, allowing faster identification of issues. It improves visibility, reduces manual tracking, and supports proactive decision-making in the procurement process.

“}]] 

  Read More Technology Blog Posts by Members articles 

#abap