Sap Fiori Analytical Chart

SAP Fiori Analytical Chart

Purpose

Add analytical chart + table (hybrid view) to visualize aggregated data.

Prerequisites

CAP Projects:

• ✅ VS Code or SAP Business Application Studio (BAS) - Both environments supported
• ✅ Fiori MCP Server - Required for Fiori app modification (VS Code only)

ABAP RAP Projects:

• ✅ VS Code only - ABAP Development Tools extension is VS Code-specific
• ✅ Fiori MCP Server - Required for Fiori app modification
• ✅ ABAP Development Tools for VS Code extension - Required for backend development (includes ADT MCP server for RAP operations)

MANDATORY: Gather Required Inputs First

STOP and ASK the user for ALL of these inputs if ANY are missing from the prompt:

1. Entity - Which entity to add the analytical chart to
2. Dimension field - The field to group by (e.g., Category, Status, Destination)
3. Measure field - The numeric field to aggregate (e.g., Amount, TotalPrice, ReservationPrice)
4. Aggregation method - How to aggregate (see valid values below)
5. Chart type - Bar, Column, Line, Pie, HeatMap, Waterfall, HorizontalWaterfall
6. Display mode - How the chart should be shown:
   • Separate tabs (Approach 2)
   • Hybrid view (Approach 1)

DO NOT proceed with implementation until all inputs are confirmed.

CAP Implementation

Enable Aggregation

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

Aggregated Property

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

Valid AggregationMethod values (lowercase string):

• sum - Sum of the non-null values
• min - Smallest of the non-null values
• max - Largest of the non-null values
• average - Sum of non-null values divided by count of non-null values
• countdistinct - Count of distinct values, omitting null values

⚠️ CRITICAL: Must be a lowercase string (e.g., 'sum'), NOT an enum (e.g., #SUM). Using an enum will cause SQL generation errors.

Chart

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']
}

✅ Uses DynamicMeasures

ABAP RAP Implementation (3 Steps + Manifest Configuration)

CRITICAL: NEVER EDIT metadata.xml - IT IS READ-ONLY!

⚠️ PRE-FLIGHT CHECKLIST - Verify BEFORE Implementation

Missing ANY of these will cause the app to fail/not load:

• @OData.applySupportedForAggregation: #FULL on projection view (ZC_*)
• @Aggregation.default: #AVG (or #SUM, #MIN, #MAX) on measure field
• @UI.chart annotation with correct qualifier in metadata extension
• Manifest targets.<ListReport>.options.settings.views.paths configuration
• All CDS objects activated

1. Backend Projection View (MANDATORY) - Enable Aggregation Support

⚠️ CRITICAL: @OData.applySupportedForAggregation annotation is MANDATORY

WITHOUT this annotation:

• OData service will NOT support aggregation
• App will FAIL TO LOAD (blank screen/errors)
• Chart annotations will be ignored

Placement:

• ✅ MUST be on PROJECTION view (ZC_* or ZZZC_*) with TRANSACTIONAL_QUERY contract
• ❌ NOT on interface view (ZR_* or ZZZR_*)

CORRECT Example:

// 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 Example:

// ❌ WRONG - Don't put on interface view
// WRONG PLACE!
@OData.applySupportedForAggregation: #FULL
define root view entity ZR_ENTITY
  as select from TABLE

2. Backend Metadata Extension (MANDATORY) - Add Chart, PresentationVariant Annotations

⚠️ CRITICAL: @UI.chart and @UI.presentationVariant are ENTITY-LEVEL (header) annotations. Place them in the header block — BEFORE annotate view ZC_ENTITY with (alongside @UI.headerInfo.*), NOT inside the { ... } field block and NOT on a field (e.g. the dimension field). Attaching @UI.chart to a field fails activation with: 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. Verify Active Annotations (MANDATORY)

After activating both DDLS and DDLX, verify the changes are live:

⚠️ IMPORTANT: DDLS and DDLX are Separate Objects

The projection view (DDLS file) and metadata extension (DDLX file) are separate ABAP development objects that happen to share the same entity name.

Key points:

• DDLS = Data Definition (projection view) - contains entity definition, associations, fields, and data annotations
• DDLX = Metadata Extension - contains UI annotations (@UI.chart, @UI.presentationVariant, field labels, etc.)
• Both must be activated individually - activating one does NOT activate the other
• Both must exist for the analytical chart to work

Activation:

• Use ABAP ADT MCP to activate ABAP objects
• Activate the DDLS file separately from the DDLX file

Verification Steps:

1. Verify Activation Status:

   • Check the activation tool output for success messages
   • Verify no errors were reported during activation
   • Both DDLS and DDLX must show successful activation

2. Check OData $metadata:

   • Open your service URL in browser: <service-url>/$metadata
   • Search for: <Annotation Term="UI.Chart" Qualifier="AnalyticalChart">
   • Also verify: <Annotation Term="UI.PresentationVariant" Qualifier="ChartView">
   • If these annotations are missing from $metadata, the DDLX is not active OR the service binding needs republishing

Manifest Configuration (Common for CAP and RAP)

Approach 1: Hybrid View (Chart + Table Together)

Manifest:

"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"
            }
          ]
        }
      }
    }
  }
}

Approach 2: Multiple View Tabs with PresentationVariant

Manifest:

"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"
            }
          ]
        }
      }
    }
  }
}

Testing

Refer to the Application Preview Guidelines section in the sap-fiori-app-development skill for detailed testing instructions, including:

• CAP project testing with watch scripts
• Standalone Fiori project testing with live backend vs. mock mode
• Metadata refresh procedures after backend changes