sap-fiori-analytical-chart

Name: sap-fiori-analytical-chart
Author: sap

github.com/sap開発160600 回インストール今日更新

リポジトリ

sap-fiori-analytical-chart について

SAP Fiori アプリに集計チャートを追加するためのスキルです。CAP と ABAP RAP の開発者向けに、入力確認からバックエンド注釈、マニフェスト設定、検証までを案内します。

主な機能

01CAP と RAP の実装ガイド
02チャートと集計の設定
03チャートとテーブルの複合ビュー
04チャートとテーブルのタブ分割
05有効化とメタデータのトラブルシューティング

活用シーン

01Fiori アプリへの集計チャート追加
02ディメンションとメジャーによるチャート設定
03チャート注釈が表示されない問題の調査

MCP 対応

Fiori アプリの変更には Fiori MCP Server が必要です。ABAP RAP 操作には ADT MCP server を使用します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sap/open-ux-tools --skill sap-fiori-analytical-chart

インストール後、Claude Code で/sap-fiori-analytical-chartを入力して読み込まれたか確認します。

詳細

SAP Fiori Analytical Chart

目的

集計データを可視化するために、**分析チャート＋テーブル（ハイブリッドビュー）**を追加します。

前提条件

CAP プロジェクト：

✅ VS Code または SAP Business Application Studio（BAS） - どちらの環境にも対応しています
✅ Fiori MCP Server - Fiori アプリの変更に必要です（VS Code のみ）

ABAP RAP プロジェクト：

✅ VS Code のみ - ABAP Development Tools 拡張機能は VS Code 専用です
✅ Fiori MCP Server - Fiori アプリの変更に必要です
✅ ABAP Development Tools for VS Code extension - バックエンド開発に必要です（RAP 操作向けの ADT MCP サーバーが含まれます）

必須：最初に必要な入力情報を確認する

プロンプトに以下の入力情報が1つでも不足している場合は、作業を止めて、すべての情報をユーザーに尋ねてください：

エンティティ - 分析チャートを追加するエンティティ
ディメンションフィールド - グループ化に使用するフィールド（例：Category、Status、Destination）
メジャーフィールド - 集計する数値フィールド（例：Amount、TotalPrice、ReservationPrice）
集計方法 - 集計方法（有効な値は以下を参照）
チャートタイプ - Bar、Column、Line、Pie、HeatMap、Waterfall、HorizontalWaterfall
表示モード - チャートの表示方法：
- 個別のタブ（Approach 2）
- ハイブリッドビュー（Approach 1）

すべての入力情報が確認されるまで、実装を進めないでください。

CAP の実装

集計を有効にする

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

集計対象プロパティ

Analytics.AggregatedProperty #Amount_avg: {
  Name: 'Amount_avg',
  AggregatableProperty: Amount,
  AggregationMethod: 'average',
  ![@Common.Label]: 'Average Amount'
}

有効な AggregationMethod の値（小文字の文字列）：

sum - null 以外の値の合計
min - null 以外の値の最小値
max - null 以外の値の最大値
average - null 以外の値の合計を、null 以外の値の件数で割った値
countdistinct - null 値を除外した、重複のない値の件数

⚠️ 重要： 小文字の文字列（例：'sum'）を指定する必要があります。列挙型（例：#SUM）は使用しないでください。列挙型を使用すると、SQL の生成エラーが発生します。

チャート

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 の実装（3つの手順＋マニフェスト設定）

重要：metadata.xml は絶対に編集しないでください。読み取り専用です！

⚠️ 実装前のチェックリスト - 着手前に確認

以下のいずれかが不足していると、アプリが失敗するか、読み込まれなくなります：

@OData.applySupportedForAggregation: #FULL がプロジェクションビュー（ZC_*）に設定されている
@Aggregation.default: #AVG（または #SUM、#MIN、#MAX）がメジャーフィールドに設定されている
メタデータ拡張に、正しい修飾子を指定した @UI.chart アノテーションがある
マニフェストに targets.<ListReport>.options.settings.views.paths の設定がある
すべての CDS オブジェクトが有効化されている

1. バックエンドのプロジェクションビュー（必須） - 集計サポートを有効にする

⚠️ 重要：@OData.applySupportedForAggregation アノテーションは必須です

このアノテーションがない場合：

OData サービスで集計がサポートされません
アプリの読み込みに失敗します（空白画面／エラー）
チャートアノテーションが無視されます

配置場所：

✅ 必ず、TRANSACTIONAL_QUERY コントラクトを持つプロジェクションビュー（ZC_* または ZZZC_*）に設定します
❌ インターフェースビュー（ZR_* または ZZZR_*）には設定しません

正しい例：

// MANDATORY! Must be present!
@OData.applySupportedForAggregation: #FULL
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 - Don't put on interface view
// WRONG PLACE!
@OData.applySupportedForAggregation: #FULL
define root view entity ZR_ENTITY
  as select from TABLE

2. バックエンドのメタデータ拡張（必須） - チャートと PresentationVariant のアノテーションを追加する

⚠️ 重要：@UI.chart と @UI.presentationVariant はエンティティレベル（ヘッダー）のアノテーションです。 これらはヘッダーブロック、つまり annotate view ZC_ENTITY with の前（@UI.headerInfo.* と同じ場所）に配置してください。{ ... } のフィールドブロック内や、フィールド（ディメンションフィールドなど）には配置しないでください。@UI.chart をフィールドに付けると、Annotation 'UI.chart.qualifier' used at wrong position (wrong scope) というエラーが発生し、有効化に失敗します。

// ↓↓↓ HEADER SCOPE: these go BEFORE `annotate view`, never on a field ↓↓↓
@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;
}

3. 有効なアノテーションを確認する（必須）

DDLS と DDLX の両方を有効化した後、変更が反映されていることを確認してください。

⚠️ 重要：DDLS と DDLX は別々のオブジェクトです

**プロジェクションビュー（DDLS ファイル）とメタデータ拡張（DDLX ファイル）**は、同じエンティティ名を共有していますが、別々の ABAP 開発オブジェクトです。

重要なポイント：

DDLS = データ定義（プロジェクションビュー）。エンティティ定義、関連、フィールド、データアノテーションを含みます
DDLX = メタデータ拡張。UI アノテーション（@UI.chart、@UI.presentationVariant、フィールドラベルなど）を含みます
それぞれ個別に有効化する必要があります。片方を有効化しても、もう片方は有効化されません
分析チャートを動作させるには、両方が存在する必要があります

有効化：

ABAP ADT MCP を使用して ABAP オブジェクトを有効化します
DDLS ファイルとDDLX ファイルを別々に有効化します

確認手順：

有効化ステータスを確認する：
- 有効化ツールの出力に成功メッセージがあることを確認します
- 有効化中にエラーが報告されていないことを確認します
- DDLS と DDLX の両方で有効化が成功している必要があります
OData $metadata を確認する：
- ブラウザーでサービス URL を開きます：<service-url>/$metadata
- 次を検索します：<Annotation Term="UI.Chart" Qualifier="AnalyticalChart">
- 次も確認します：<Annotation Term="UI.PresentationVariant" Qualifier="ChartView">
- これらのアノテーションが $metadata にない場合、DDLX が有効化されていないか、サービスバインディングを再公開する必要があります

マニフェストの設定（CAP と RAP 共通）

方法 1：ハイブリッドビュー（チャートとテーブルを一緒に表示）

マニフェスト：

"targets": {
  "<ListReport>": {  // Replace with your actual List Report target name
    "type": "Component",
    "name": "sap.fe.templates.ListReport",
    "options": {
      "settings": {
        "contextPath": "/<YourEntity>",  // Replace with your entity set path
        "views": {
          "paths": [
            {
              "primary": [
                { "annotationPath": "com.sap.vocabularies.UI.v1.Chart#AnalyticalChart" }
              ],
              "secondary": [
                { "annotationPath": "com.sap.vocabularies.UI.v1.LineItem" }
              ],
              "defaultPath": "both"
            }
          ]
        }
      }
    }
  }
}

方法 2：PresentationVariant を使った複数のビュ―タブ

マニフェスト：

"targets": {
  "<ListReport>": {  // Replace with your actual List Report target name
    "type": "Component",
    "name": "sap.fe.templates.ListReport",
    "options": {
      "settings": {
        "contextPath": "/<YourEntity>",  // Replace with your entity set path
        "views": {
          "paths": [
            {
              "key": "ChartView",
              "annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#ChartView"
            },
            {
              "key": "TableView",
              "annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#TableView"
            }
          ]
        }
      }
    }
  }
}

テスト

テスト手順の詳細については、sap-fiori-app-development スキルの アプリケーションプレビューのガイドライン セクションを参照してください。以下の内容が含まれます。

ウォッチスクリプトを使った CAP プロジェクトのテスト
ライブバックエンドとモックモードを使ったスタンドアロン Fiori プロジェクトのテスト
バックエンド変更後のメタデータ更新手順

実装順序（RAP）

エラーを避けるため、次の順序で実行してください。

プロジェクションビュー（ZC_ENTITY）を変更する — DDLS ファイル
- 先頭に @OData.applySupportedForAggregation: #FULL を追加します
- メジャーフィールドに @Aggregation.default: #AVG を追加します
- ABAP ADT MCP を使用して有効化します
- 有効化が成功したことを確認します
メタデータ拡張（ZC_ENTITY）を変更する — DDLX ファイル
- qualifier 付きの @UI.chart アノテーションを追加します
- @UI.presentationVariant アノテーションを追加します
- ABAP ADT MCP を使用して有効化します
- 有効化が成功したことを確認します
アノテーションが有効であることを確認する（上記の ABAP RAP 実装セクションのステップ 3 を参照）
Fiori アプリのマニフェストを更新する
- targets.<ListReport>.options.settings の下に views.paths を追加します（controlConfiguration の内側ではありません）
- manifest.json を保存します
テストする
- npm start を実行します（ライブメタデータを取得します。再公開は不要です）
- サービスバインディングを再公開する必要はありません
- チャートが表示されない場合は、ブラウザーのコンソールで「Annotation Path ... not found」エラーを確認します

トラブルシューティング

症状：コンソールに「Annotation Path for the primary visualization ... not found」というエラーが表示される

エラーメッセージ全文：

Annotation Path for the primary visualization com.sap.vocabularies.UI.v1.Chart#AnalyticalChart not found

原因： メタデータ拡張（DDLX）が有効化されていないため、@UI.chart アノテーションが OData $metadata に公開されていません。

解決方法：

ABAP ADT MCP を使用して DDLX ファイルを有効化します
有効化が成功したことを確認します（ツールの出力にエラーがないか確認します）
アノテーションが $metadata に表示されることを確認します：<service-url>/$metadata（Chart#AnalyticalChart を検索します）
Fiori アプリを再起動します：npm start

注： DDLX を編集しても、明示的に有効化するまでは反映されません。DDLS と DDLX は別々のオブジェクトです。

症状：アプリが読み込まれない／画面が真っ白／チャートが表示されない

原因 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）を追加します

原因 6： DDLX が有効化されていない（上記のコンソールエラーを参照）

解決策： ABAP ADT MCP を使用してメタデータ拡張（DDLX）ファイルを有効化します

症状：チャートは表示されるが、データが正しくない

原因： 集計方法が誤っている

解決策： @Aggregation.default の値（#AVG、#SUM、#MIN、#MAX）を変更します

主な違い

CAP：

集計とメジャーは CDS で定義します
DynamicMeasures を使用します

RAP：

集計はバックエンドの CDS のみで定義します
Measures を使用します

よくある間違い

一般：

マニフェスト設定が誤っている
アプローチ 1 とアプローチ 2 の設定を混在させている
メジャーフィールドが数値型ではない
クオリファイアが誤っている（マニフェストとアノテーションが一致していない）

RAP 固有：

❌ 最もよくある間違い： @OData.applySupportedForAggregation: #FULL がない → アプリが読み込まれません
❌ プロジェクションビューではなく、インターフェースビューに集計アノテーションを設定している
❌ メジャーフィールドに @Aggregation.default がない
❌ 変更後に CDS オブジェクトを有効化し忘れている
❌ 誤ったビューコントラクトを使用している（TRANSACTIONAL_QUERY が必要です）

ベストプラクティス

ディメンション 1 つとメジャー 1～2 つを使用します
縦棒グラフ／横棒グラフを優先します
アプローチ 1： 同じビュー内でチャートとテーブルを横並びにするには、"defaultPath": "both" を使用します
アプローチ 2： チャートまたはテーブルを個別のビュータブに表示するには、PresentationVariant を使用します

参考資料

SAP Fiori Elements Analytical List Report：https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/topic/floorplanListReport/analyticalListReport
ABAP RAP Aggregation support：https://help.sap.com/docs/abap-cloud/abap-rap/projection-view

Markdown 対応

ログインしてコメント

基本情報

作者: sap
リポジトリ: sap/open-ux-tools
カテゴリ: 開発
インストール数: 600
GitHub スター: 160

問題を報告