sap-fiori-analytical-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SAP Fiori Analytical Chart

SAP Fiori 分析图表

Purpose

用途

Add analytical chart + table (hybrid view) to visualize aggregated data.

添加**分析图表+表格（混合视图）**以可视化聚合数据。

MANDATORY: Gather Required Inputs First

强制要求：先收集必要输入信息

STOP and ASK the user for ALL of these inputs if ANY are missing from the prompt:

Entity - Which entity to add the analytical chart to
Dimension field - The field to group by (e.g., Category, Status, Destination)
Measure field - The numeric field to aggregate (e.g., Amount, TotalPrice, ReservationPrice)
Aggregation method - How to aggregate: sum, avg, min, or max
Chart type - Bar, Column, Line, Pie, HeatMap, Waterfall, HorizontalWaterfall
Display mode - How the chart should be shown:
- Separate tabs (Approach 2)
- Hybrid view (Approach 1)

DO NOT proceed with implementation until all inputs are confirmed.

如果提示中缺少以下任何一项，请停止操作并向用户询问所有这些输入信息：

实体 - 要添加分析图表的目标实体
维度字段 - 用于分组的字段（例如：Category、Status、Destination）
度量字段 - 要聚合的数值字段（例如：Amount、TotalPrice、ReservationPrice）
聚合方法 - 聚合方式：sum（求和）、avg（平均值）、min（最小值）或max（最大值）
图表类型 - Bar（条形图）、Column（柱状图）、Line（折线图）、Pie（饼图）、HeatMap（热力图）、Waterfall（瀑布图）、HorizontalWaterfall（横向瀑布图）
显示模式 - 图表的展示方式：
- 独立标签页（方案2）
- 混合视图（方案1）

在确认所有输入信息前，请勿继续实施。

CAP Implementation

CAP 实现

Enable Aggregation

启用聚合

cds

@Aggregation.ApplySupported: {
  Transformations: ['aggregate','groupby'],
  AggregatableProperties: [{Property: Amount}],
  GroupableProperties: [Category]
}

cds

@Aggregation.ApplySupported: {
  Transformations: ['aggregate','groupby'],
  AggregatableProperties: [{Property: Amount}],
  GroupableProperties: [Category]
}

Aggregated Property

聚合属性

cds

Analytics.AggregatedProperty #Amount_avg: {
  AggregatableProperty: Amount,
  AggregationMethod: 'average'
}

cds

Analytics.AggregatedProperty #Amount_avg: {
  AggregatableProperty: Amount,
  AggregationMethod: 'average'
}

Chart

图表配置

cds

UI.Chart #AnalyticalChart: {
  $Type: 'UI.ChartDefinitionType',
  Title: 'Chart Title',
  ChartType: #Column,
  Dimensions: [Category],
  DynamicMeasures: ['@Analytics.AggregatedProperty#Amount_avg'],
  MeasureAttributes: [{
    $Type: 'UI.ChartMeasureAttributeType',
    DynamicMeasure: '@Analytics.AggregatedProperty#Amount_avg',
    Role: #Axis1
  }],
  DimensionAttributes: [{
    $Type: 'UI.ChartDimensionAttributeType',
    Dimension: Category,
    Role: #Category
  }]
},
UI.PresentationVariant #ChartView: {
  $Type: 'UI.PresentationVariantType',
  Text: 'Chart View',
  Visualizations: ['@UI.Chart#AnalyticalChart']
},
UI.PresentationVariant #TableView: {
  $Type: 'UI.PresentationVariantType',
  Text: 'Table View',
  Visualizations: ['@UI.LineItem']
}

✅ Uses DynamicMeasures

cds

UI.Chart #AnalyticalChart: {
  $Type: 'UI.ChartDefinitionType',
  Title: 'Chart Title',
  ChartType: #Column,
  Dimensions: [Category],
  DynamicMeasures: ['@Analytics.AggregatedProperty#Amount_avg'],
  MeasureAttributes: [{
    $Type: 'UI.ChartMeasureAttributeType',
    DynamicMeasure: '@Analytics.AggregatedProperty#Amount_avg',
    Role: #Axis1
  }],
  DimensionAttributes: [{
    $Type: 'UI.ChartDimensionAttributeType',
    Dimension: Category,
    Role: #Category
  }]
},
UI.PresentationVariant #ChartView: {
  $Type: 'UI.PresentationVariantType',
  Text: 'Chart View',
  Visualizations: ['@UI.Chart#AnalyticalChart']
},
UI.PresentationVariant #TableView: {
  $Type: 'UI.PresentationVariantType',
  Text: 'Table View',
  Visualizations: ['@UI.LineItem']
}

✅ 使用DynamicMeasures

ABAP RAP Implementation (2 Steps + Manifest Configuration)

ABAP RAP 实现（2步 + 清单配置）

CRITICAL: NEVER EDIT metadata.xml - IT IS READ-ONLY!

重要提示：切勿编辑metadata.xml - 它是只读的！

⚠️ PRE-FLIGHT CHECKLIST - Verify BEFORE Implementation

⚠️ 实施前检查清单 - 请先验证

Missing ANY of these will cause the app to fail/not load:

@OData.applySupportedForAggregation: #FULL

on projection view (ZC_*)

```
@Aggregation.default: #AVG
```
(or #SUM, #MIN, #MAX) on measure field
```
@UI.chart
```
annotation with correct qualifier in metadata extension
Manifest
```
views.paths
```
configuration
All CDS objects activated

缺少以下任何一项都会导致应用失败/无法加载：

在投影视图（ZC_*）上添加

@OData.applySupportedForAggregation: #FULL

在度量字段上添加
```
@Aggregation.default: #AVG
```
（或#SUM、#MIN、#MAX）
在元数据扩展中添加带有正确限定符的
```
@UI.chart
```
注解
清单
```
views.paths
```
配置
所有CDS对象已激活

1. Backend Projection View (MANDATORY) - Enable Aggregation Support

1. 后端投影视图（必填）- 启用聚合支持

⚠️ CRITICAL: @OData.applySupportedForAggregation annotation is MANDATORY

WITHOUT this annotation:

OData service will NOT support aggregation
App will FAIL TO LOAD (blank screen/errors)
Chart annotations will be ignored

Placement:

✅ MUST be on PROJECTION view (ZC_* or ZZZC_*) with
```
TRANSACTIONAL_QUERY
```
contract
❌ NOT on interface view (ZR_* or ZZZR_*)

CORRECT Example:

abap

@OData.applySupportedForAggregation: #FULL  ← MANDATORY! Must be present!
define root view entity ZC_ENTITY
  provider contract TRANSACTIONAL_QUERY
  as projection on ZR_ENTITY
{
  @Aggregation.default: #AVG  ← Specify aggregation method for measure
  Amount;
  Category;  ← Dimension field (no aggregation annotation needed)
}

WRONG Example:

abap

// ❌ WRONG - Don't put on interface view
@OData.applySupportedForAggregation: #FULL  ← WRONG PLACE!
define root view entity ZR_ENTITY
  as select from TABLE

⚠️ 关键：@OData.applySupportedForAggregation注解是必填项

如果没有此注解：

OData服务将不支持聚合
应用将加载失败（空白页面/报错）
图表注解将被忽略

放置位置：

✅ 必须放在投影视图（ZC_或ZZZC_）上，且该视图带有
```
TRANSACTIONAL_QUERY
```
契约
❌ 不要放在接口视图（ZR_或ZZZR_）上

正确示例：

abap

@OData.applySupportedForAggregation: #FULL  ← 必填！必须存在！
define root view entity ZC_ENTITY
  provider contract TRANSACTIONAL_QUERY
  as projection on ZR_ENTITY
{
  @Aggregation.default: #AVG  ← 为度量字段指定聚合方法
  Amount;
  Category;  ← 维度字段（无需聚合注解）
}

错误示例：

abap

// ❌ 错误 - 不要放在接口视图上
@OData.applySupportedForAggregation: #FULL  ← 错误位置！
define root view entity ZR_ENTITY
  as select from TABLE

2. Backend Metadata Extension (MANDATORY) - Add Chart, PresentationVariant Annotations

2. 后端元数据扩展（必填）- 添加图表、PresentationVariant注解

abap

@UI.chart: [{
  qualifier: 'AnalyticalChart',
  title: 'Chart Title',
  description: 'Chart description',
  chartType: #COLUMN,
  dimensions: ['Category'],
  measures: ['Amount'],
  dimensionAttributes: [{
    dimension: 'Category',
    role: #CATEGORY
  }],
  measureAttributes: [{
    measure: 'Amount',
    role: #AXIS_1
  }]
}]
@UI.presentationVariant: [{
  qualifier: 'ChartView',
  text: 'Chart View',
  visualizations: [{
    type: #AS_CHART,
    qualifier: 'AnalyticalChart'
  }]
},
{
  qualifier: 'TableView',
  text: 'Table View',
  visualizations: [{
    type: #AS_LINEITEM
  }]
}]
annotate view ZC_ENTITY with
{
  // Other field annotations...
  @EndUserText.label: 'Amount'
  Amount;
  
  @EndUserText.label: 'Category'
  Category;
}

abap

@UI.chart: [{
  qualifier: 'AnalyticalChart',
  title: 'Chart Title',
  description: 'Chart description',
  chartType: #COLUMN,
  dimensions: ['Category'],
  measures: ['Amount'],
  dimensionAttributes: [{
    dimension: 'Category',
    role: #CATEGORY
  }],
  measureAttributes: [{
    measure: 'Amount',
    role: #AXIS_1
  }]
}]
@UI.presentationVariant: [{
  qualifier: 'ChartView',
  text: 'Chart View',
  visualizations: [{
    type: #AS_CHART,
    qualifier: 'AnalyticalChart'
  }]
},
{
  qualifier: 'TableView',
  text: 'Table View',
  visualizations: [{
    type: #AS_LINEITEM
  }]
}]
annotate view ZC_ENTITY with
{
  // 其他字段注解...
  @EndUserText.label: 'Amount'
  Amount;
  
  @EndUserText.label: 'Category'
  Category;
}

Manifest Configuration (Common for CAP and RAP)

清单配置（CAP和RAP通用）

Approach 1: Hybrid View (Chart + Table Together)

方案1：混合视图（图表+表格共存）

Manifest:

json

"views": {
  "paths": [
    {
      "primary": [
        { "annotationPath": "com.sap.vocabularies.UI.v1.Chart#AnalyticalChart" }
      ],
      "secondary": [
        { "annotationPath": "com.sap.vocabularies.UI.v1.LineItem" }
      ],
      "defaultPath": "both"
    }
  ]
}

清单：

json

"views": {
  "paths": [
    {
      "primary": [
        { "annotationPath": "com.sap.vocabularies.UI.v1.Chart#AnalyticalChart" }
      ],
      "secondary": [
        { "annotationPath": "com.sap.vocabularies.UI.v1.LineItem" }
      ],
      "defaultPath": "both"
    }
  ]
}

Approach 2: Multiple View Tabs with PresentationVariant

方案2：使用PresentationVariant的多视图标签页

Manifest:

json

"views": {
  "paths": [
    {
      "key": "ChartView",
      "annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#ChartView"
    },
    {
      "key": "TableView",
      "annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#TableView"
    }
  ]
}

清单：

json

"views": {
  "paths": [
    {
      "key": "ChartView",
      "annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#ChartView"
    },
    {
      "key": "TableView",
      "annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#TableView"
    }
  ]
}

Testing

测试

CAP Projects

CAP 项目

bash

npm run watch-<app-name>  # e.g., npm run watch-manage-travel

bash

npm run watch-<app-name>  # 例如：npm run watch-manage-travel

or use generic watch script if available

或使用通用watch脚本（如果可用）

cds watch

undefined

cds watch

undefined

RAP Projects

RAP 项目

bash

npm run start-mock # Needs metadata refresh

npm start          # No refresh needed - fetches metadata from live backend at runtime

Consult fiori mcp server if available on how to refresh metadata for sap/cloud systems in case of RAP

bash

npm run start-mock # 需要刷新元数据

npm start          # 无需刷新 - 运行时从实时后端获取元数据

如果是SAP云系统的RAP项目，请参考fiori mcp服务器文档了解如何刷新元数据

Implementation Order (RAP)

实施顺序（RAP）

Follow this sequence to avoid errors:

Modify Projection View (ZC_ENTITY)
- Add
```
@OData.applySupportedForAggregation: #FULL
```
  at top
- Add
```
@Aggregation.default: #AVG
```
  to measure field
- Activate projection view
Modify Metadata Extension
- Add
```
@UI.chart
```
  annotation
- Add
```
@UI.presentationVariant
```
  annotations
- Activate metadata extension
Update Fiori App Manifest
- Add
```
views.paths
```
  configuration
- Save manifest.json
Test
- Run
```
npm start
```
  (fetches live metadata - no republishing needed)
- Service binding does NOT need to be republished

遵循以下步骤以避免错误：

修改投影视图（ZC_ENTITY）
- 在顶部添加
```
@OData.applySupportedForAggregation: #FULL
```
- 为度量字段添加
```
@Aggregation.default: #AVG
```
- 激活投影视图
修改元数据扩展
- 添加
```
@UI.chart
```
  注解
- 添加
```
@UI.presentationVariant
```
  注解
- 激活元数据扩展
更新Fiori应用清单
- 添加
```
views.paths
```
  配置
- 保存manifest.json
测试
- 运行
```
npm start
```
  （获取实时元数据 - 无需重新发布）
- 服务绑定无需重新发布

Troubleshooting

故障排除

Symptom: App doesn't load / Blank screen / Chart not visible

症状：应用无法加载 / 空白页面 / 图表不可见

Cause 1: Missing

@OData.applySupportedForAggregation: #FULL

Solution: Add to projection view (ZC_*), activate, restart app

Cause 2: Annotation on wrong view

Solution: Move from interface view (ZR_) to projection view (ZC_)

Cause 3: Measure field not numeric

Solution: Verify field is numeric type (Amount, Quantity, Decimal, Integer)

Cause 4: Wrong qualifier in manifest

Solution: Verify qualifier in manifest matches

@UI.chart: [{ qualifier: 'AnalyticalChart' }]

Cause 5: Missing

@Aggregation.default

on measure

Solution: Add
```
@Aggregation.default: #AVG
```
(or #SUM, #MIN, #MAX) to measure field

原因1：缺少
@OData.applySupportedForAggregation: #FULL

解决方案： 添加到投影视图（ZC_*），激活后重启应用

原因2：注解放置在错误视图上

解决方案： 从接口视图（ZR_）移至投影视图（ZC_）

原因3：度量字段非数值类型

解决方案： 验证字段是否为数值类型（Amount、Quantity、Decimal、Integer）

原因4：清单中的限定符错误

解决方案： 验证清单中的限定符是否与
```
@UI.chart: [{ qualifier: 'AnalyticalChart' }]
```
匹配

原因5：度量字段缺少
@Aggregation.default

解决方案： 为度量字段添加
```
@Aggregation.default: #AVG
```
（或#SUM、#MIN、#MAX）

Symptom: Chart shows but with wrong data

症状：图表显示但数据错误

Cause: Wrong aggregation method

Solution: Change
```
@Aggregation.default
```
value (#AVG, #SUM, #MIN, #MAX)

原因：聚合方法错误

解决方案： 修改
```
@Aggregation.default
```
的值（#AVG、#SUM、#MIN、#MAX）

Key Differences

关键差异

CAP:

Aggregation + measures defined in CDS
Uses DynamicMeasures

RAP:

Aggregation defined in backend CDS only
Uses Measures

CAP：

聚合+度量在CDS中定义
使用DynamicMeasures

RAP：

聚合仅在后端CDS中定义
使用Measures

Common Mistakes

常见错误

General:

Wrong manifest config
Mixing Approach 1 and Approach 2 configurations
Non-numeric measure field
Wrong qualifier (manifest doesn't match annotation)

RAP-Specific:

❌ MOST COMMON: Missing

@OData.applySupportedForAggregation: #FULL

→ App won't load

❌ Placing aggregation annotation on interface view instead of projection view
❌ Missing
```
@Aggregation.default
```
on measure field
❌ Forgetting to activate CDS objects after changes
❌ Using wrong view contract (must be
```
TRANSACTIONAL_QUERY
```
)

通用错误：

清单配置错误
混合使用方案1和方案2的配置
度量字段非数值类型
限定符错误（清单与注解不匹配）

RAP特有错误：

❌ 最常见： 缺少
```
@OData.applySupportedForAggregation: #FULL
```
→ 应用无法加载
❌ 将聚合注解放在接口视图而非投影视图上
❌ 度量字段缺少
```
@Aggregation.default
```
❌ 修改后忘记激活CDS对象
❌ 使用错误的视图契约（必须为
```
TRANSACTIONAL_QUERY
```
）

Best Practices

最佳实践

Use 1 dimension + 1–2 measures
Prefer Column/Bar charts
Approach 1: Use "defaultPath": "both" for chart + table side-by-side in same view
Approach 2: Use
```
PresentationVariant
```
for separate view tabs (chart or table)

使用1个维度 + 1–2个度量
优先选择Column/Bar图表
方案1： 使用"defaultPath": "both"实现图表+表格在同一视图中并排显示
方案2： 使用
```
PresentationVariant
```
实现独立的视图标签页（仅图表或仅表格）

References

参考资料

ABAP RAP Aggregation support: https://help.sap.com/docs/abap-cloud/abap-rap/projection-view

ABAP RAP聚合支持：https://help.sap.com/docs/abap-cloud/abap-rap/projection-view