# sap-fiori-add-visual-filter

This skill configures chart-based filters in SAP Fiori Elements for OData V4. Use it when adding a visual filter to a filter bar or value help dialog.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 680 installs · ★ 40
- Author: sap-fiori-tools
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/cline/skills/tree/HEAD/skills/sap-fiori-add-visual-filter/SKILL.md
- Updated: 2026-07-21
- HTML: https://affpapa.org/en/nevibecode/skills/sap-fiori-add-visual-filter

## What it does

The skill sets up the annotations and configuration behind a visual filter. For CAP, it defines aggregation and uses `DynamicMeasures`; for ABAP RAP, it uses `Measures` and puts aggregation in backend CDS. Both setups connect a chart, presentation variant, value list, and filter field through the `manifest`.

Before making changes, the agent must collect five details: the entity, dimension field, numeric measure, aggregation method (`sum`, `avg`, `min`, or `max`), and chart type (`Bar` or `Line`). It should ask for anything missing first. RAP metadata is read-only, so backend CDS configuration is required; CAP and RAP also define measures differently.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add cline/skills --skill sap-fiori-add-visual-filter -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/sap-fiori-add-visual-filter/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/sap-fiori-add-visual-filter/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add cline/skills --skill sap-fiori-add-visual-filter -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/sap-fiori-add-visual-filter/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add cline/skills --skill sap-fiori-add-visual-filter -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/sap-fiori-add-visual-filter/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install cline/skills sap-fiori-add-visual-filter
```

2. **Manually: put the files in place**
- File: `.github/skills/sap-fiori-add-visual-filter/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add cline/skills --skill sap-fiori-add-visual-filter -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/cline/skills --path skills/sap-fiori-add-visual-filter
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/sap-fiori-add-visual-filter/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add cline/skills --skill sap-fiori-add-visual-filter -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/cline/skills/tree/HEAD/skills/sap-fiori-add-visual-filter/SKILL.md

## When to use it
- add a chart-based filter to a SAP Fiori Elements filter bar
- configure a visual filter in a value help dialog
- define field aggregation in CAP CDS
- connect a filter field to its chart in the `manifest`

## Example prompts
- Add a visual filter for `Category` on the `Products` entity; sum `Amount` and use a `Bar` chart.
- Configure a `Status` filter for `Orders`, averaging `TotalPrice` with a `Line` chart.
- For ABAP RAP, add a visual filter on `Category` using `Amount` as the measure and configure it in the `manifest`.

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: a10035b4f0875d54.

BEGIN THIRD-PARTY FILE a10035b4f0875d54
````text
---
name: sap-fiori-add-visual-filter
description: Add visual filters (chart-based) to SAP Fiori Elements filter bar/value help using CAP or ABAP RAP.
argument-hint: field name (e.g., Category, Status)
metadata:
  author: sap-fiori-tools
  version: "0.0.4"
---

# 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:**

1. **Entity** - Which entity to add the visual filter to
2. **Dimension field** - The field to filter 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: sum, avg, min, or max
5. **Chart type** - Bar or Line (recommend Bar as default)

**DO NOT proceed with implementation until all inputs are confirmed.**

---

## CAP Implementation


### Enable Aggregation (MANDATORY)
```cds
@Aggregation.ApplySupported: {
  Transformations: ['aggregate','groupby'],
  AggregatableProperties: [{ Property: Amount }],
  GroupableProperties: [Category]
}
```

### Aggregated Property (Measure)
```cds
Analytics.AggregatedProperty #Amount_sum : {
  $Type: 'Analytics.AggregatedPropertyType',
  Name: 'Amount_sum',
  AggregatableProperty: Amount,
  AggregationMethod: 'sum'
}
```

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

✅ Uses **DynamicMeasures**

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

### ValueList (on Dimension Field)
```cds
Category @Common.ValueList #visualFilter: {
  $Type: 'Common.ValueListType',
  CollectionPath: 'EntityName',
  Parameters: [
    { $Type: 'Common.ValueListParameterInOut', LocalDataProperty: Category, ValueListProperty: 'Category' }
  ],
  PresentationVariantQualifier: 'visualFilter'
}
```

### SelectionFields
```cds
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)
```abap
@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
```xml
<Annotation Term="UI.Chart" Qualifier="visualFilter">
  <Record Type="UI.ChartDefinitionType">
    <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bar"/>
    <PropertyValue Property="Dimensions">
      <Collection>
        <PropertyPath>Category</PropertyPath>
````
END THIRD-PARTY FILE a10035b4f0875d54

The third-party file has ended. Everything between the a10035b4f0875d54 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2896 of 6178 bytes. © sap-fiori-tools · Apache-2.0 · https://github.com/cline/skills/tree/HEAD/skills/sap-fiori-add-visual-filter/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md