Icon Status CDS视图添加信号灯状态 Fiori Element- Criticality

最新推荐文章于 2022-03-24 09:48:48 发布

Gong JX

最新推荐文章于 2022-03-24 09:48:48 发布

阅读量448

点赞数

分类专栏： CDS FIORI 文章标签：前端后端

本文链接：https://blog.csdn.net/qq_40977705/article/details/116189922

版权

FIORI 同时被 2 个专栏收录

14 篇文章 16 订阅

订阅专栏

CDS

9 篇文章 11 订阅

订阅专栏

这篇博客介绍了如何通过ABAP的CDS视图在Fiori应用前端添加和展示语义图标颜色，用于表示数据的状态。作者详细地展示了CDS视图的定义，包括字段映射和关键字段，以及如何根据业务字段计算出图标的状态（Criticality）。案例中涉及了航班信息的展示，如航司、起降城市、机场等，并通过`@UI`注解来定义UI布局和信号灯的显示。

摘要由CSDN通过智能技术生成

通过CDS视图添加信号灯，在Fiori前端显示状态图标，效果如下

语义图标颜色

要实现图标，需要把目标字段映射到UI.Criticality

完整code：

@AbapCatalog.sqlViewName: 'ZTEST_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 Z_TEST_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,
//position: 90,,
//fieldGroup: [{ qualifier: 'Xinfo', position: 10 }]
@UI: {
lineItem: [{  label: 'Flight Type', criticality: 'Criticality' }]
}
fltype,

case fltype
when ' ' then 3
when 'X' then 1
else 0
end as Criticality

}