sap-fiori-add-visual-filter

SAP Fiori ビジュアルフィルター

目的

フィルターバーまたは値ヘルプダイアログ（OData V4）に**チャートベースのフィルター（棒グラフ／折れ線グラフ）**を追加します。

---

必須：まず必要な入力を収集する

プロンプトに不足している項目が1つでもある場合は、処理を中断して、以下すべての入力をユーザーに確認してください。

1. エンティティ - ビジュアルフィルターを追加するエンティティ
2. ディメンションフィールド - フィルターに使用するフィールド（例：Category、Status、Destination）
3. メジャーフィールド - 集計する数値フィールド（例：Amount、TotalPrice、ReservationPrice）
4. 集計方法 - 集計方法：sum、avg、min、またはmax
5. チャートタイプ - 棒グラフまたは折れ線グラフ（デフォルトには棒グラフを推奨）

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

---

CAP の実装

集計を有効にする（必須）

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

集計対象プロパティ（メジャー）

Analytics.AggregatedProperty #Amount_sum : {
  $Type: 'Analytics.AggregatedPropertyType',
  Name: 'Amount_sum',
  AggregatableProperty: Amount,
  AggregationMethod: 'sum'
}

チャートアノテーション

UI.Chart #visualFilter : {
  ChartType: #Bar,
  Dimensions: [Category],
  DynamicMeasures: ['@Analytics.AggregatedProperty#Amount_sum']
}

✅ DynamicMeasures を使用

PresentationVariant

UI.PresentationVariant #visualFilter: {
  Visualizations: ['@UI.Chart#visualFilter']
}

ValueList（ディメンションフィールド）

Category @Common.ValueList #visualFilter: {
  $Type: 'Common.ValueListType',
  CollectionPath: 'EntityName',
  Parameters: [
    { $Type: 'Common.ValueListParameterInOut', LocalDataProperty: Category, ValueListProperty: 'Category' }
  ],
  PresentationVariantQualifier: 'visualFilter'
}

SelectionFields

UI.SelectionFields: [Category]

---

ABAP RAP の実装

• Aggregation.ApplySupported および Aggregation.CustomAggregate アノテーションが metadata.xml（RAP）で利用可能である必要があります。利用できない場合は、以下のバックエンド設定が必要です。

バックエンド CDS（必須）

@OData.applySupportedForAggregation: #FULL
define root view entity ZC_ENTITY
  provider contract analytical_query
  as projection on ZI_ENTITY
{
  key EntityID,

  @Aggregation.default: #SUM
  Amount,

  Category
}

チャートアノテーション

<Annotation Term="UI.Chart" Qualifier="visualFilter">
  <Record Type="UI.ChartDefinitionType">
    <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bar"/>
    <PropertyValue Property="Dimensions">
      <Collection>
        <PropertyPath>Category</PropertyPath>
      </Collection>
    </PropertyValue>
    <PropertyValue Property="Measures">
      <Collection>
        <PropertyPath>Amount</PropertyPath>
      </Collection>
    </PropertyValue>
  </Record>
</Annotation>

✅ Measures（DynamicMeasures ではありません）を使用
❌ メタデータは読み取り専用です

PresentationVariant アノテーション

<Annotation Term="UI.PresentationVariant" Qualifier="visualFilter">
  <Record Type="UI.PresentationVariantType">
    <PropertyValue Property="Visualizations">
      <Collection>
        <AnnotationPath>@UI.Chart#visualFilter</AnnotationPath>
      </Collection>
    </PropertyValue>
  </Record>
</Annotation>

ValueList アノテーション

<Annotation Term="Common.ValueList" Qualifier="visualFilter">
  <Record Type="Common.ValueListType">
    <PropertyValue Property="CollectionPath" String="EntityName"/>
    <PropertyValue Property="PresentationVariantQualifier" String="visualFilter"/>
    <PropertyValue Property="Parameters">
      <Collection>
        <Record Type="Common.ValueListParameterInOut">
          <PropertyValue Property="LocalDataProperty" PropertyPath="Category"/>
          <PropertyValue Property="ValueListProperty" String="Category"/>
        </Record>
      </Collection>
    </PropertyValue>
  </Record>
</Annotation>

SelectionFields アノテーション

<Annotation Term="UI.SelectionFields">
  <Collection>
    <PropertyPath>Category</PropertyPath>
  </Collection>
</Annotation>

---

Manifest の設定（必須）

"@com.sap.vocabularies.UI.v1.SelectionFields": {
  "layout": "CompactVisual",
  "initialLayout": "Visual",
  "filterFields": {
    "Category": {
      "visualFilter": {
        "valueList": "com.sap.vocabularies.Common.v1.ValueList#visualFilter"
      }
    }
  }
}

✅ フィルターフィールドをビジュアルフィルターチャートに接続します
✅ 初期レイアウトをビジュアルモードに設定します

---

テスト

CAP プロジェクト

npm run watch-<app-name>  # e.g., npm run watch-manage-travel
# or use generic watch script if available
cds watch

RAP プロジェクト

npm run start-mock # Needs metadata refresh

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

• RAP の場合、SAP／クラウドシステムのメタデータを更新する方法について、利用可能であれば fiori mcp server に問い合わせてください。

---

主な違い

• CAP：DynamicMeasures と、CDS で定義する AggregatedProperty
• RAP：Measures と、バックエンド CDS のみで指定する @Aggregation.default
• CAP：集計とチャートを同じ場所で定義
• RAP：メタデータは読み取り専用のため、バックエンド CDS で設定する必要があります。
• Qualifier：Chart、ValueList、manifest 全体で同じ qualifier（#visualFilter）を使用する必要があります。

---

よくある間違い

• バックエンドの集計設定がない
• Chart、ValueList、PresentationVariant、manifest 間で qualifier が一致しない
• manifest のパスが誤っている（完全な語彙パスを使用してください）
• RAP プロジェクトで Measures ではなく DynamicMeasures を使用している
• ValueList で PresentationVariantQualifier を指定し忘れている
• SelectionFields アノテーションがない

---

ベストプラクティス

• 棒グラフを使用します（最も一般的で推奨されます）
• フィルターバーあたりのビジュアルフィルターは3～5個に制限します
• 必ず最初にバックエンドの集計を設定します
• 一貫した qualifier を全体で使用します
• 実際のデータでテストし、集計が正しく動作することを確認します