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

Estimated read time 7 min read

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.

 

 

 

​ 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 

#SAP

#SAPTechnologyblog

You May Also Like

More From Author