sap-fiori-analytical-c…
Add analytical chart (chart + table hybrid) to SAP Fiori Elements List Report using aggregated data. Supports CAP and ABAP RAP…
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.
$ npx -y skills add SAP/open-ux-tools --skill sap-fiori-add-visual-filter --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/sap-fiori-add-visual-filterContext preview
The summary Claude sees to decide when to auto-load this skill.
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.
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"
Add **chart-based filters (Bar/Line)** to filter bar or value help dialog (OData V4).
---
**CAP Projects:**
**ABAP RAP Projects:**
---
**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.
---
@Aggregation.ApplySupported: {
Transformations: ['aggregate','groupby'],
AggregatableProperties: [{ Property: Amount }],
GroupableProperties: [Category]
}Analytics.AggregatedProperty #Amount_sum : {
$Type: 'Analytics.AggregatedPropertyType',
Name: 'Amount_sum',
AggregatableProperty: Amount,
AggregationMethod: 'sum',
![@Common.Label]: 'Total Amount'
}**Valid `AggregationMethod` values (lowercase string):**
⚠️ **CRITICAL:** Must be a **lowercase string** (e.g., `'sum'`), **NOT** an enum (e.g., `#SUM`). Using an enum will cause SQL generation errors.
UI.Chart #visualFilter : {
ChartType: #Bar,
Dimensions: [Category],
DynamicMeasures: ['@Analytics.AggregatedProperty#Amount_sum']
}✅ Uses **DynamicMeasures**
UI.PresentationVariant #visualFilter: {
Visualizations: ['@UI.Chart#visualFilter']
}The annotation location depends on how the dimension is declared in the CAP model:
For the scalar `Category` dimension, this is valid:
annotate MyService.Entity with {
Category @Common.ValueList #visualFilter: {
$Type: 'Common.ValueListType',
CollectionPath: 'Entity',
PresentationVariantQualifier: 'visualFilter',
Parameters: [
{ $Type: 'Common.ValueListParameterInOut',
LocalDataProperty: Category, ValueListProperty: 'Category' }
]
};
};For a visual filter whose dimension is the managed `Category` association, use the separate association-key target described below. Do not replace the target with `Category_code` inside the entity annotation block.
When the dimension field is the auto-generated foreign key column of a managed association (e.g. `Category_code` from `Category : Association to Categories`), you **cannot** annotate it inline inside the entity's `annotate ... with { ... }` block — the FK column is not visible as an element there. The CDS compiler will fail with:
Element "Category_code" has not been found
**✅ CORRECT:** Use a **separate `annotate` statement** targeting the association itself — the compiler rewrites it to the FK column:
// Compiles to target Travels/Category_code in $metadata
annotate MyService.Entity:Category with @(
Common.ValueList #visualFilter: {
$Type : 'Common.ValueListType',
CollectionPath : 'Entity',
PresentationVariantQualifier: 'visualFilter',
Parameters : [
{ $Type: 'Common.ValueListParameterInOut',
LocalDataProperty: Category_code, ValueListProperty: 'Category_code' }
]
}
);Key points:
The Open UX tools project aims to provide open source modules that make the development of SAP Fiori applications more efficient. The project is maintained by the same team that is responsible for SAP Fiori tools and driven by the SAP community.
Add analytical chart (chart + table hybrid) to SAP Fiori Elements List Report using aggregated data. Supports CAP and ABAP RAP…
Guidelines for SAP Fiori app development for CAP and standalone projects. Use when creating or modifying SAP Fiori Elements…
Invokes the @sap-ux/create CLI — generate, add, convert, remove, update, change, list, get commands for SAP Fiori projects. Use…
Configure, migrate, or run ESLint with @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects (standalone or CAP). Use when…
Use this skill when writing, fixing, extending, or reviewing OPA5 integration tests
Configure hierarchical tree table to SAP Fiori elements application for displaying parent-child recursive hierarchies. Supports…