Fiori Element- Computed Field

light111Computed  Text Field


In the last post  Fiori Element- Criticality & Data Point  we added a new field FLTYPE and defined its critical value to display with a status and icon and also the datapoint, so that it appears in the object page header.

But the FLTYPE value can either be X or blank   and the associated domain fix value contains the description. 

2

Now instead of showing X or ‘ ‘ for the FLTYPE on UI let’s display some text here.


@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

}


Run the app  and we see only X or ‘ ‘ [ blank] for the Flight Type. But this is not meaningful to the user. So let’s put some text here.

1

CDS View Section – before change

3

After Change- Just compute a field based on FLTYPE .

4


@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’ }
}
@Consumption.filter.hidden: true
@ObjectModel.readOnly: true
case fltype
when ‘X’ then ‘Charter’
else ‘Scheduled’
end as fltype_text,

// 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
}


Make sure to change the datapoint in the wed ide project annotation as earlier it points to FLTYPE and now it must point FLTYPE_TEXT. Save the changes.

5

Run the app- We have meaning ful text for the Flight Type and select line to see the object page.

6

It looks really cool in the object page with bold and colored.

78


Eventually, what we can do- we can keep the FLTYPE field and derive another computed field fltype_text and then link the fltype_text field to the field fltype as a text element.

1

Now run the app. Here we can see the text field(fltype_text) and the field fltype both appears. 

2

We can also make annotation to say display only text.

3

So here it looks coll- So we field is FLTYPE but its content is the text content.

4


@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’ }
}
@ObjectModel.text.element: [‘fltype_text’]
@UI.textArrangement: #TEXT_ONLY
fltype,

@ObjectModel.readOnly: true
@UI.hidden: true
case fltype
when ‘X’ then ‘Charter’
else ‘Scheduled’
end as fltype_text,

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


 

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