Fiori Element- Criticality & Data Point

Criticality & Data Point

In the last post Fiori Element- Adding Header Facet added a title,description and a header facet to the object page in a List Report & Object page.

In this post will add a new field to the List and calculate the criticality so that it appears in a different color with a status icon and then will make a field as Data point so that it appears in the object Page Header.

Below we have the CDS view with annotation and we already generated the oData Service for this.

@AbapCatalog.sqlViewName: ‘ZZ_V_DEMO_SPFLI’
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: ‘Flight Information’
@UI.headerInfo: {typeName: ‘Flight’, typeNamePlural: ‘Flights’,
title: { value: ‘carrname’}, description: { value: ‘connid’ } }

@OData.publish: true
define view ZZ_DEMO_SPFLI
as select from spfli
association [1..1] to scarr as _scarr on $projection.carrid = _scarr.carrid
{
//spfli
@UI: {
lineItem: [{ position: 10, label: ‘Carrier Name’}],
identification: [{position: 10, label: ‘Carrier Name’}]
}
key carrid,

@UI: {
lineItem: [{ position: 20, label: ‘Connection’}],
identification: [{position: 20, label: ‘Connection’}]
}
key connid,

_scarr.carrname as carrname,

@UI: {
lineItem: [{ position: 30, label: ‘Strat Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 10, label: ‘Strat Country’ }]
}
countryfr,

@UI: {
lineItem: [{ position: 40, label: ‘Arriving Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 20, label: ‘Arriving Country’ }]
}
countryto,

@UI: {
lineItem: [{ position: 50, label: ‘Start City’}],
fieldGroup: [{ qualifier: ‘City’, position: 10 }]
}
cityfrom,

@UI: {
lineItem: [{ position: 60, label: ‘Arriving City’}],
fieldGroup: [{ qualifier: ‘City’, position: 20 }]
}
cityto,

@UI: {
lineItem: [{ position: 70, label: ‘Start Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 10 }]
}
airpfrom,

@UI: {
lineItem: [{ position: 80, label: ‘Arriving Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 20 }]
}
airpto,

@UI: {
fieldGroup: [{ qualifier: ‘Time’, position: 10 }]
}
deptime,

@UI: {
fieldGroup: [{ qualifier: ‘Time’, position: 20 }]
}
arrtime

}

Run the app in the wed ide.

The list, select a line of the list.

The Object page appears with header details. This is what we did in the last post.

Let’s add one more field to the cds view FLTYPE and based on the FLTYPE we can compute another field and assign this computed field to the criticality property of the FLTYPE line item. Save and activate the CDS view.

Based on the criticality value the below color and the icon appear.

@UI: {
lineItem: [{ position: 20, label: ‘Connection’}],
identification: [{position: 20, label: ‘Connection’}]
}
key connid,

_scarr.carrname as carrname,

@UI: {
lineItem: [{ position: 30, label: ‘Strat Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 10, label: ‘Strat Country’ }]
}
countryfr,

@UI: {
lineItem: [{ position: 40, label: ‘Arriving Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 20, label: ‘Arriving Country’ }]
}
countryto,

@UI: {
lineItem: [{ position: 50, label: ‘Start City’}],
fieldGroup: [{ qualifier: ‘City’, position: 10 }]
}
cityfrom,

@UI: {
lineItem: [{ position: 60, label: ‘Arriving City’}],
fieldGroup: [{ qualifier: ‘City’, position: 20 }]
}
cityto,

@UI: {
lineItem: [{ position: 70, label: ‘Start Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 10 }]
}
airpfrom,

@UI: {
lineItem: [{ position: 80, label: ‘Arriving Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 20 }]
}
airpto,

@UI: {
fieldGroup: [{ qualifier: ‘Time’, position: 10 }]
}
deptime,

@UI: {
fieldGroup: [{ qualifier: ‘Time’, position: 20 }]
}
arrtime,

@UI: {
lineItem: [{ position: 90, label: ‘Flight Type’, criticality: ‘Flight_Criticality’ }],
fieldGroup: [{ qualifier: ‘Xinfo’, position: 10 }]
}
fltype,

// map productive status to criticality value
@ObjectModel.readOnly: true
@Consumption.filter.hidden: true
case fltype
when ‘ ‘ then 3
when ‘X’ then 1
else 0
end as Flight_Criticality

}

Run the app and in the list we can see the FLTYPE field with the status and the color as determined with the criticality property. Select a line.

There is no change on the object page.

Now add datapoint to the field FLTYPE and also assign the criticality property to the data point. Now this should appear in the object page header.