# sap-fiori-add-visual-filter

Adds chart-based visual filters to SAP Fiori Elements filter bars and value help dialogs using CAP or ABAP RAP. Configures CDS aggregation annotations and UI charts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 601 installs · ★ 160
- 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/SAP/open-ux-tools/tree/HEAD/plugins-coding-agents/fiori/skills/sap-fiori-add-visual-filter/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/sap-fiori-tools-sap-fiori-add-visual-filter

## What it does

The skill prompts for visual filter parameters and generates CDS annotations for SAP Fiori Elements. It configures `@Aggregation.ApplySupported`, declares measures with `Analytics.AggregatedProperty`, and generates `UI.Chart` alongside `UI.PresentationVariant` definitions.

CAP projects run in VS Code or SAP Business Application Studio, with Fiori MCP Server required in VS Code. ABAP RAP works exclusively in VS Code through the ABAP Development Tools extension. In RAP setups, never edit `metadata.xml` directly because the file is strictly read-only.

Chart type restrictions require extra attention. Line charts support only date and time dimensions like `Edm.Date` or `Edm.DateTimeOffset`. For string codes or categories, stick with Bar charts. In CAP models, write aggregation methods as lowercase strings such as `'sum'` instead of enums to avoid SQL generation errors.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add SAP/open-ux-tools --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 SAP/open-ux-tools --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 SAP/open-ux-tools --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 SAP/open-ux-tools 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 SAP/open-ux-tools --skill sap-fiori-add-visual-filter -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/SAP/open-ux-tools --path plugins-coding-agents/fiori/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 SAP/open-ux-tools --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/SAP/open-ux-tools/tree/HEAD/plugins-coding-agents/fiori/skills/sap-fiori-add-visual-filter/SKILL.md

## When to use it
- Add Bar or Line chart filters to a Fiori Elements filter bar
- Configure CDS aggregation annotations for CAP or ABAP RAP
- Target managed association foreign keys in value help annotations
- Avoid SQL generation errors caused by uppercase aggregation enums

## Example prompts
- Add a Bar visual filter to the Travels entity by Category with sum of Amount
- Create a Line visual filter using BookingDate and TotalPrice in Fiori Elements
- Configure CDS aggregation and UI.Chart annotations for a status filter in CAP

## 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: 0412decaef2d57a9.

BEGIN THIRD-PARTY FILE 0412decaef2d57a9
````text
---
name: sap-fiori-add-visual-filter
description: Add visual filters (chart-based) to SAP Fiori Elements filter bar or value help using CAP or ABAP RAP. Use when asked to add chart filters, bar chart selectors, or visual filter bars to a Fiori Elements application.
argument-hint: visual filter with entity name, dimension field (e.g., Status, Category), measure field (e.g., TotalPrice, Amount), aggregation method (sum/min/max/average/countdistinct), and chart type (Bar/Line)
metadata:
  author: sap-fiori-tools
  version: "0.0.7"
---

# SAP Fiori Visual Filter

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

---

## 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 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 (see valid values below)
5. **Chart type** - Bar or Line (recommend Bar as default)

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

⚠️ **Line chart dimension type restriction:** `ChartType: #Line` only supports dimensions typed as `Edm.Date`, `Edm.TimeOfDay`, or `Edm.DateTimeOffset`. If the requested dimension is a different type (e.g. string/association code like Status, Category), either use `#Bar` instead or confirm with the user that the dimension field is a date/time type before proceeding.

---

## 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',
````
END THIRD-PARTY FILE 0412decaef2d57a9

The third-party file has ended. Everything between the 0412decaef2d57a9 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 2520 of 16149 bytes. © sap-fiori-tools · Apache-2.0 · https://github.com/SAP/open-ux-tools/tree/HEAD/plugins-coding-agents/fiori/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