はじめに
Fiori Elementsで最も使うパターンがList Report + Object Page（LR+OP）です。S/4HANAの標準Fioriアプリの大半はこの組み合わせで実装されています。
一度作り方を覚えれば、業務系の検索〜詳細編集画面の9割はこのパターンで対応できます。この記事では、プロジェクト生成からCDSビュー設計、画面表示までのステップを整理します。
完成イメージ
- List Report：画面上部に検索フィルタ、下部に結果一覧テーブル。1行クリックで詳細へ遷移
- Object Page：単一レコードのヘッダ、タブ構造、関連情報表示、編集モード
基礎概念はFiori Elements全体像を先に確認してください。
ステップ1：プロジェクト生成
Business Application Studio（BAS入門）で、「SAP Fiori」テンプレートからプロジェクトを生成します。
選択肢：
- Template：List Report Object Page
- Floorplan：List Report Page
- Data Source：OData v4 service（S/4HANAのサービスURLまたはMock）
- Main Entity：対象のエンティティセット（例：SalesOrder）
- Navigation Entity：明細エンティティ（例：SalesOrderItem）
生成されると webapp/manifest.json にFiori Elements用の設定が書き込まれたアプリの雛形ができます。
ステップ2：CDSビュー設計とアノテーション
Fiori ElementsはCDSビュー（または外部OData EDMX）のアノテーションから画面を組み立てます。実務ではABAP CDS View（Cloud Development Tools使用、ABAP Cloud入門参照）でメタモデルを定義します。
@AbapCatalog.sqlViewName: 'ZV_SO'
@UI.headerInfo: {
typeName: '販売オーダー',
typeNamePlural: '販売オーダー一覧',
title: { value: 'SoId' }
}
define view ZV_SalesOrder as select from vbak {
@UI.lineItem: [{ position: 10 }]
@UI.selectionField: [{ position: 10 }]
key vbeln as SoId,
@UI.lineItem: [{ position: 20 }]
kunnr as Customer,
@UI.lineItem: [{ position: 30 }]
netwr as NetAmount
}
重要なアノテーション：
@UI.headerInfo：Object Pageのヘッダ表示定義@UI.lineItem：List Reportのテーブル列定義（positionが並び順）@UI.selectionField：フィルタバーの検索項目
これだけで、List Reportのフィルタと一覧、Object Pageのヘッダが自動生成されます。詳細はCDS UIアノテーション完全ガイドで解説します。
ステップ3：Object Pageのファセット定義
Object Pageに複数タブを表示する場合は @UI.facet を使います。
@UI.facet: [
{ id: 'general', purpose: #HEADER, type: #FIELDGROUP_REFERENCE,
label: '基本情報', targetQualifier: 'General' },
{ id: 'items', type: #LINEITEM_REFERENCE,
label: '明細', targetElement: '_Items' }
]
_Items はNavigation Propertyで、販売オーダー明細への関連を表します。明細側のCDSビューにも @UI.lineItem を定義しておくと、Object Pageの「明細」タブに明細テーブルが自動表示されます。
ステップ4：manifest.json設定
Fiori Elementsの挙動はmanifest.jsonの sap.ui5.routing と sap.fe セクションで制御されます。プロジェクト生成時に基本設定は入っていますが、追加でカスタマイズする項目があります。
"sap.ui5": {
"routing": {
"routes": [...],
"targets": {
"SalesOrderList": {
"type": "Component",
"name": "sap.fe.templates.ListReport"
},
"SalesOrderDetail": {
"type": "Component",
"name": "sap.fe.templates.ObjectPage"
}
}
}
}
ステップ5：実行と確認
npm start または BAS の Preview 機能でローカル実行します。OData v4のMockデータを使うか、S/4HANA接続設定（Destination）でリアルデータを取得します。
flowchart LR CDS["CDS View
+ @UI アノテーション"] --> OD["OData v4
サービス"] OD --> FE["Fiori Elements
ランタイム"] FE --> LR["List Report
画面"] FE --> OP["Object Page
画面"]
カスタマイズポイント
カスタムアクション追加
manifest.jsonの controlConfiguration でカスタムアクションを定義し、Controllerで処理を書きます。
カスタムセクション追加
@UI.facet に type: #FIELDGROUP_REFERENCE とXML Fragmentの参照を組み合わせて、独自のセクションを差し込みます。
フィルタの初期値設定
manifest.jsonの settings.initialLoad や initialFilterValues で初期表示条件をカスタマイズできます。
よくある疑問
Q. OData v2のサービスでも使えますか？
A. 使えますが、新機能はv4前提です。新規プロジェクトはv4を推奨します。
Q. 生成したコードを直接編集してもいいですか？
A. Fiori Elementsテンプレートの仕組み上、Viewのコード自体は存在しません。カスタマイズはアノテーション、manifest.json、Extension Pointで行います。
Q. リスト表示を数万件対応にできますか？
A. サーバー側ページングがOData v4で標準サポートされており、スクロールに応じて追加ロードされます。バックエンド側でCDSのパフォーマンスを確保しておくのが前提です。
Q. モックデータでの開発は可能ですか？
A. 可能です。BASテンプレートでMock Dataソースを選ぶと、ローカルJSONを使った開発が行えます。
まとめ
- List Report + Object PageはFiori Elementsで最頻出のパターン
- プロジェクト生成→CDSビューのアノテーション付与→manifest.json→実行、の4ステップで動く
- 画面コードは存在せず、CDSのアノテーションが設計図になる
- カスタマイズはアノテーション、manifest.json、Extension Pointの3箇所
- OData v4 + CDS の組み合わせが標準
次はAnalytical List Page / Overview Page実装ガイドで、分析系Floorplanの作り方を見ていきます。
List Report + Object Pageの構築手順を記事で学んだ後は、動くプロジェクトを一から作る実践で理解が定着します。CDSモデリングからFiori UIの実装、BTPへのデプロイまでをハンズオン形式で体験できます。