Fiori Elements実装ガイド｜Analytical List Page / Overview Page

はじめに

トランザクション系画面は List Report + Object Page（LR+OP実装ガイド）が定番ですが、分析・可視化が主目的の画面には Analytical List Page（ALP）とOverview Page（OVP）が適しています。

この記事では、ALPとOVPそれぞれの構築手順と、CDSビュー側で必要なアノテーションを整理します。

Analytical List Page（ALP）

特徴

画面上部にチャート、下部にドリルダウン可能なテーブルを配置した「分析に特化したList Report」です。検索フィルタで絞り込みつつ、集計軸（ディメンション）と計量（メジャー）を切り替えて分析できます。

適用シーン：月次売上分析、在庫回転率、購買支出分析。

必要なアノテーション

ALPを機能させるには、CDSビューに「Analytical View」の定義を追加します。

@Analytics: { dataCategory: #CUBE }
@UI.chart: [{
  title: '売上分析',
  chartType: #COLUMN,
  dimensions: [ 'Customer' ],
  measures: [ 'NetAmount' ]
}]
@UI.presentationVariant: [{
  visualizations: [
    { type: #AS_CHART },
    { type: #AS_LINEITEM }
  ]
}]
define view ZV_SalesAnalysis as select from vbak {
  @Analytics.dimension: true
  kunnr as Customer,

  @Analytics.measure: true
  @DefaultAggregation: #SUM
  netwr as NetAmount
}

重要なポイント：

• @Analytics.dataCategory: #CUBE — 分析用ビューであることの宣言
• @Analytics.dimension / measure — ディメンションとメジャーの区別
• @DefaultAggregation — 集計方法（SUM/AVG/COUNT等）
• @UI.chart — チャート設定
• @UI.presentationVariant — チャートとテーブルの切り替え設定

プロジェクト生成

BASのFioriテンプレートから「Analytical List Page」を選択し、OData v4ソースとメインエンティティを指定します。LR+OPと同様の手順ですが、Floorplan選択だけALPにします。

Overview Page（OVP）

特徴

複数のKPIカード・リストカード・チャートカード・テーブルカードを1画面に並べるダッシュボード型Floorplanです。業務部門のマネージャーが「今の状況を把握する」ための画面に最適です。

適用シーン：調達部門ダッシュボード、営業KPIボード、経営サマリ。

カード構成

flowchart LR
  OVP["Overview Page"] --> K1["KPI Card
今月売上"]
  OVP --> K2["List Card
要対応案件"]
  OVP --> K3["Chart Card
月次トレンド"]
  OVP --> K4["Table Card
Top5顧客"]
  K1 -.-> D1["ALPへドリル"]
  K2 -.-> D2["List Reportへ"]
  K3 -.-> D3["ALPへ"]
  K4 -.-> D4["Object Pageへ"]

OVPの強みは、各カードから詳細画面（List ReportやObject Page）にドリルダウンで繋がることです。利用者は「気になる数字をクリック→詳細を確認」というフローで自然に深堀りできます。

manifest.json設定

OVPはmanifest.json上でカードを宣言的に定義します。

"sap.ovp": {
  "cards": {
    "card01": {
      "model": "salesModel",
      "template": "sap.ovp.cards.charts.analytical",
      "settings": {
        "title": "売上トレンド",
        "entitySet": "SalesOrder",
        "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart"
      }
    }
  }
}

各カードが参照するCDSビューと、アノテーションパスを指定する方式です。

ALPとOVPの使い分け

業務的な位置づけで考えると、OVPで全体像を把握し、気になる指標のALPにドリルダウンし、さらに個別レコードのObject Pageに進む、という流れが理想的です。

CDSビューの注意点

ALP/OVPともに、CDSビューの設計が性能の要です。

• 集計ビューは @Analytics: { dataCategory: #CUBE } を付ける
• ディメンションとして使う列は @ObjectModel.text.element でテキスト表示列を指定
• 大量データを扱う場合はDB層で集計（HANA CDS）を優先
• 時間系の絞り込みはDate型列で明確に定義する

よくある疑問

Q. OVPとSAP Analytics Cloud（SAC）の使い分けは？

A. OVPはS/4HANA内の業務データを扱う軽量ダッシュボード、SACは全社データを統合する本格BIツールです。OVPは「業務アプリ内のダッシュボード」、SACは「独立したBIポータル」という位置づけで使い分けます。

Q. ALPで複数のチャート種別を切り替えられますか？

A. 可能です。@UI.chart を複数定義し、ランタイムにユーザーが切り替えられます。

Q. OVPカードのクリック先はカスタマイズできますか？

A. manifest.jsonの navigation 設定でカスタム遷移先を定義できます。同じアプリ内の別ビュー、別Fioriアプリへの遷移など柔軟に設定可能です。

Q. 日本語タイトルはどこで設定しますか？

A. i18n.propertiesで多言語対応が標準です。CDSアノテーションのタイトルもi18nキー参照が推奨されます。

まとめ

• ALPはチャート+テーブル型の分析画面、OVPはカード集合型のダッシュボード
• ALPはCDSビューに @Analytics: { dataCategory: #CUBE } とメジャー/ディメンション定義が必須
• OVPはmanifest.jsonでカードを宣言的に定義
• 両者は「OVP→ALP→Object Page」というドリルダウンの流れで組み合わせるのが理想
• データ性能はCDSビューの設計で決まる

次はCDSアノテーション駆動開発で、アノテーション記法の全体像を整理します。

ALPやOVPのアノテーション設計を実際に動くアプリで確認したいなら、CAPとUI5を使ったプロジェクト構築を通して学ぶハンズオン講座が効率的です。チャートやカード表示の裏側にある仕組みが実感できます。