Fiori Element- Criticality & Data Point

light111Criticality & 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. 

1

The list, select a line of the list.

2

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

3

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.

4

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

17


@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,

@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.

5

There is no change on the object page.

6

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.

7


@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,

@UI: {
lineItem: [{ position: 90, label: ‘Flight Type’, criticality: ‘Flight_Criticality’ }],
fieldGroup: [{ qualifier: ‘Xinfo’, position: 10 }],
dataPoint: {title: ‘Flight Type’, criticality: ‘Flight_Criticality’ }
}
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

}


Select a line and  navigate to the object page.

8

The FLTYPE datapoint ideally appear in the object page header but as we have added a headerfacet to teh object page in the annotation file, it is not appearing.

9

In the web ide, open the annotation file and delete the header facet.

10

Save the file and run the app again.

11

The list appears, select a line-

12

The Data point appears on the object page.

13

But we want our header facet along with the data point on the object page header.

Now in the annotation file we can added, the header facet as we did in the last post and under header facet add two reference facet.

One for the Field Group and one for the data point. Save the file. Run the app again.

14

The list-

15

The object page- with header facet contains fields and data point.

16


 

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s