SAP Fioriアプリケーション開発のためのガイドライン(設計・実装の指標)。CAPおよびスタンドアロンプロジェクト向け。 次のような場合に使用: SAP Fiori Elements(クイック開発向けUIテンプレート)を使ったアプリケーションを新規作成・修正するとき。
Guidelines for SAP Fiori app development for CAP and standalone projects. Use this skill when creating or modifying SAP Fiori Elements applications.
ユーザーに確認してください。実装を進める前に、CAP(クラウドアプリケーションプログラミング)向けの Fiori アプリを作成するのか、外部の OData サービス(データ交換の標準形式)に接続するスタンドアロン Fiori プロジェクトを作成するのかをユーザーに確認してください。ただし、技術スタックがユーザーリクエストで明確に指定されている場合は不要です。
Fiori MCP ツールを使用して、SAP Fiori Elements で Fiori UI を作成します。
Fiori MCP サーバーツールが正常に実行されたら、ユーザーに完了を報告してください。検証や二重確認は不要です。ツール実行の成功を確認として扱ってください。
データモデルは SAP Fiori Elements に適した構造にします。最低限、アプリケーションの主要なエンティティ(情報単位)として機能するエンティティタイプが1つ必要です。関連エンティティへのナビゲーション属性は省略可能ですが、あるとより充実した UI パターンが実現できます。
エンティティの各プロパティに対して、適切なデータ型を指定する必要があります。
コードを直接修正する前に、Fiori MCP サーバーが適切な機能またはツールを提供しているか、あるいは専門的なスキル(例:sap-fiori-analytical-chart)が存在するかを確認してください。
Fiori MCP では、CAP およびスタンドアロンプロジェクトの両方のバックエンドに対して、以下のアプリケーションテンプレートを作成できます:
Fiori MCP では、既存アプリケーションに以下のページタイプを追加できます:
SAP Fiori Elements アプリの作成をリクエストされたときは、ユーザーの入力内容が、1つ以上のページ(テーブルデータまたはフォームを含む)で構成されたアプリケーションとして解釈できるかを確認してください。
アプリケーションは通常、テーブルでデータを表示するリストレポートページで始まりますが、他のテンプレートも利用可能です(上記を参照)。
テーブルの特定行の詳細情報は、ベースエンティティに基づいたオブジェクトページに表示されます。
オブジェクトページは、エンティティタイプのナビゲーション属性(一対一および一対多の関連)に基づいたセクションを含むことができます。
テーブルセクション内の行(一対多の関連)の詳細は、その関連先のエンティティに基づいた別のオブジェクトページに表示できます。
package.json に記載されているアプリ専用の最も具体的なスクリプトを使用してください。
CAP の場合: ウォッチスクリプトを使用します(例:npm run watch-manage-travel)
スタンドアロン Fiori プロジェクトの場合: npm start(ライブバックエンド)または npm run start-mock(モックデータ)を使用します
Fiori アプリは、cds init コマンドで事前に作成された CAP アプリケーションのルートフォルダ直下の app フォルダに作成する必要があります。このルートフォルダは常に作業ディレクトリ直下のサブフォルダです。
CAP アプリケーションの概要に基づいて UI アプリケーションを作成する場合、ユーザーが明確に別のリクエストをしない限り、プロジェクト構成の説明に記載されている UI アプリケーション名を使用してください。
フルスタック CAP アプリケーションの UI を変更・修正するフォローアップリクエストについては、サービス側での変更が本当に必要な場合を除き、まず Fiori アプリ側で変更を試みてください。
すべてのエンティティに UUID(世界中で一意の識別子)形式の主キーを使用してください。
CSV ファイルでサンプルデータを作成する場合、すべての主キーと外部キーは UUID 形式である必要があります(例:550e8400-e29b-41d4-a716-446655440001)。
外部サービスに基づくスタンドアロン Fiori プロジェクトの場合、Fiori MCP ツールがルートレベルにアプリケーションを作成します。
接続先またはSAPシステム名: ユーザーが接続先名または SAP システム名を提供しない場合、Fiori MCP サーバーを使用して利用可能な接続先/システムを取得し、ユーザーに選択肢を提示してください。
OData サービスメタデータの取得: OData サービスメタデータをダウンロードするための手順は、ツール説明書を参照してください。Service Center MCP が利用可能な場合はそれを使用し、そうでない場合は Fiori MCP サーバーを使用してメタデータファイルをダウンロードしてください。
アノテーション(メタデータへの追加情報)は主にバックエンドサービスで保守し、アプリ固有の UI カスタマイズまたはオーバーライドのみをローカル(フロントエンド)アノテーションに配置してください。
フロントエンドアノテーションはアプリ固有の UI 微調整のみ使用してください(例:/webapp/annotations/annotation.xml)。manifest.json で uri と localUri 値が一致するように参照されている必要があります:
"annotation": {
"type": "ODataAnnotation",
"uri": "annotations/annotation.xml",
"settings": {
"localUri": "annotations/annotation.xml"
}
}
スタンドアロン Fiori プロジェクトは、リモート OData V2 または V4 サービス(manifest.json の dataSources に定義)に接続します。
OData サービスメタデータは読み取り専用: manifest.json で参照されるサービスメタデータファイル(/webapp/localService/mainService/metadata.xml)をローカルで編集してはいけません。エンティティ定義、プロパティ、またはサービス構造への変更は、すべてバックエンドの元に加える必要があります:
"dataSources": {
"mainService": {
"uri": "/path/to/odata/service/",
"type": "OData",
"settings": {
"annotations": ["annotation"],
"localUri": "localService/mainService/metadata.xml",
"odataVersion": "4.0"
}
}
}
sap-fiori-analytical-chart).The Fiori MCP can create the following application templates for both CAP and standalone project backends:
The Fiori MCP can add the following page types to existing applications:
package.json.npm run watch-manage-travel)npm start (live backend) or npm run start-mock (mock data)app folder under the CAP application root folder created before with cds init operation. This root folder is always a subfolder directly under working directory.550e8400-e29b-41d4-a716-446655440001)./webapp/annotations/annotation.xml) referenced in manifest.json with matching uri and localUri values:"annotation": {
"type": "ODataAnnotation",
"uri": "annotations/annotation.xml",
"settings": {
"localUri": "annotations/annotation.xml"
}
}
manifest.json dataSources)./webapp/localService/mainService/metadata.xml) referenced in manifest.json must not be edited locally. Any changes to entity definitions, properties, or service structure must be made at the backend source:"dataSources": {
"mainService": {
"uri": "/path/to/odata/service/",
"type": "OData",
"settings": {
"annotations": ["annotation"],
"localUri": "localService/mainService/metadata.xml",
"odataVersion": "4.0"
}
}
}
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。