Sap Fiori Add Visual Filter — Agent Skill by Cline

From the author

Add visual filters (chart-based) to SAP Fiori Elements filter bar/value help using CAP or ABAP RAP.

— the description by sap-fiori-tools

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to adding visual, chart-based filters to SAP Fiori Elements filter bars or value help dialogs. It covers the necessary annotations and configuration steps for both SAP Cloud Application Programming Model (CAP) and ABAP RESTful Application Programming Model (RAP). The process requires defining backend aggregation, configuring UI annotations for charts and presentation variants, and updating the application manifest to enable the visual filter interface.

What it does

Guides the implementation of Bar or Line chart filters for Fiori filter bars.
Details the required CDS annotations for CAP-based projects.
Outlines the necessary backend CDS and XML annotation setup for ABAP RAP.
Provides the mandatory manifest configuration to link charts to filter fields.
Enforces a strict input gathering process to ensure all required metadata is present.
Highlights key differences and common pitfalls between CAP and RAP implementations.

When to use it

When you need to enhance Fiori Elements filter bars with interactive, chart-based data selection.
When building analytical Fiori applications that require visual aggregation of data.
When you need to configure OData V4 services to support visual filtering.
When troubleshooting missing or misconfigured visual filter annotations in Fiori.

Advantages

Provides clear, distinct paths for both CAP and RAP development environments.
Ensures consistency by mandating the use of specific qualifiers across annotations.
Reduces configuration errors by highlighting common mistakes like qualifier mismatches.
Includes essential testing guidance for both development models.

Usage examples

“How do I add a visual filter for the Status field in my CAP-based Fiori app?”: The agent will prompt for the entity name, measure field (e.g., TotalPrice), aggregation method, and chart type before providing the specific CDS annotations and manifest configuration.
“Help me configure a bar chart filter for my RAP application.”: The agent will verify the backend CDS aggregation settings and provide the necessary XML annotations for the UI.Chart, PresentationVariant, and ValueList.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/cline/sap-fiori-add-visual-filter/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip sap-fiori-add-visual-filter.zip -d .agents/skills

Documentation by sap-fiori-tools

SAP Fiori Visual Filter

Purpose

Add chart-based filters (Bar/Line) to filter bar or value help dialog (OData V4).

MANDATORY: Gather Required Inputs First

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

Entity - Which entity to add the visual filter to
Dimension field - The field to filter by (e.g., Category, Status, Destination)
Measure field - The numeric field to aggregate (e.g., Amount, TotalPrice, ReservationPrice)
Aggregation method - How to aggregate: sum, avg, min, or max
Chart type - Bar or Line (recommend Bar as default)

DO NOT proceed with implementation until all inputs are confirmed.

CAP Implementation

Enable Aggregation (MANDATORY)

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

Aggregated Property (Measure)

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

Chart Annotation

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

✅ Uses DynamicMeasures

PresentationVariant

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

ValueList (on Dimension Field)

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 Implementation

Aggregation.ApplySupported and Aggregation.CustomAggregate annotations must be available in metadata.xml (RAP). If not, below backend configuration is required.

Backend CDS (MANDATORY)

@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
}

Chart Annotation

<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>

✅ Uses Measures (not DynamicMeasures)
❌ Metadata is read-only

PresentationVariant Annotation

<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

<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

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

Manifest Configuration (REQUIRED)

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

✅ Connects filter field to visual filter chart
✅ Sets initial layout to visual mode

Testing

CAP Projects

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

RAP Projects

npm run start-mock # Needs metadata refresh

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

Consult fiori mcp server if available on how to refresh metadata for sap/cloud systems in case of RAP

Key Differences

CAP: DynamicMeasures + AggregatedProperty defined in CDS
RAP: Measures + @Aggregation.default in backend CDS only
CAP: Aggregation and chart defined in same place
RAP: Metadata is read-only, must be configured in backend CDS.
Qualifier: Must use same qualifier (#visualFilter) across Chart, ValueList, and manifest

Common Mistakes

Missing backend aggregation setup
Qualifier mismatch between Chart, ValueList, PresentationVariant, and manifest
Wrong path in manifest (use full vocabulary path)
RAP projects using DynamicMeasures instead of Measures
Forgetting PresentationVariantQualifier in ValueList
Missing SelectionFields annotation

Best Practices

Use Bar chart (most common and recommended)
Limit to 3–5 visual filters per filter bar
Always configure backend aggregation first
Use consistent qualifiers throughout
Test with real data to verify aggregation works correctly

Files

ATTRIBUTION.mdAdded by AutoGineer956 B
LICENSELicence file added by AutoGineer10.5 KiB
SKILL.md6.0 KiB

Requirements and compatibility

Written for: Claude Code

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Claude Code frontmatter, Needs an MCP server, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Implement Spec
Matt Pocock· Community
A workflow for implementing technical specifications and tickets using concurrent subagents.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository317.5k
MCP Builder
AnthropicOfficial
A comprehensive guide for building high-quality Model Context Protocol (MCP) servers to integrate external services with LLMs.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Low riskHas scriptsGitHub stars of the source repository188.6k
Schema
Corey Haines· Community
Expert guidance for implementing and optimizing JSON-LD schema markup to improve search engine content understanding.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository59k
Postgresql Table Design
Seth Hobson· Community
A comprehensive guide for designing, reviewing, and optimizing PostgreSQL database schemas.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k
SQL Optimization Patterns
Seth Hobson· Community
A comprehensive guide to optimizing SQL database performance through indexing, query plan analysis, and efficient coding patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k
API Scaffolding Fastapi Pro
Seth Hobson· Community
An expert FastAPI developer focused on high-performance, async-first API architecture and production-ready microservices.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download sap-fiori-add-visual-filter.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by sap-fiori-tools

SAP Fiori Visual Filter

Purpose

MANDATORY: Gather Required Inputs First

CAP Implementation

Enable Aggregation (MANDATORY)

Aggregated Property (Measure)

Chart Annotation

PresentationVariant

ValueList (on Dimension Field)

SelectionFields

ABAP RAP Implementation

Backend CDS (MANDATORY)

Chart Annotation

PresentationVariant Annotation

ValueList Annotation

SelectionFields Annotation

Manifest Configuration (REQUIRED)

Testing

CAP Projects

RAP Projects

Key Differences

Common Mistakes

Best Practices

Files

Requirements and compatibility

Security

Attribution and licence

Related skills

Implement Spec

MCP Builder

Schema

Postgresql Table Design

SQL Optimization Patterns

API Scaffolding Fastapi Pro

Download ZIP