sap-fiori-add-visual-f…
Add visual filters (chart-based) to SAP Fiori Elements filter bar or value help using CAP or ABAP RAP. Use when asked to add…
Guidelines for SAP Fiori app development for CAP and standalone projects. Use when creating or modifying SAP Fiori Elements applications, adding a List Report, Object Page, or Worklist, or connecting a Fiori app to a CAP service or OData endpoint.
$ npx -y skills add SAP/open-ux-tools --skill sap-fiori-app-development --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/sap-fiori-app-developmentContext preview
The summary Claude sees to decide when to auto-load this skill.
Guidelines for SAP Fiori app development for CAP and standalone projects. Use when creating or modifying SAP Fiori Elements applications, adding a List Report, Object Page, or Worklist, or connecting a Fiori app to a CAP service or OData endpoint.
name: sap-fiori-app-development description: 'Guidelines for SAP Fiori app development for CAP and standalone projects. Use when creating or modifying SAP Fiori Elements applications, adding a List Report, Object Page, or Worklist, or connecting a Fiori app to a CAP service or OData endpoint.' argument-hint: 'fiori elements application creation or modification' metadata: author: sap-fiori-tools version: "0.0.3"
1. **Always ask the user** whether they want to create a Fiori app for **CAP** (Cloud Application Programming) or a **standalone Fiori project** connected to an external OData service before proceeding with implementation, unless the technology stack is explicitly specified in the user's request. 2. Use the Fiori MCP tools to create the Fiori UI using SAP Fiori Elements. 3. After the Fiori MCP Server tools execute successfully, inform the user of completion. Do not verify or double-check - treat successful tool execution as confirmation. 4. The data model should be suitable for SAP Fiori elements: at minimum one entity type that serves as the main entity for the application. Navigation properties to related entities are optional but enable richer UI patterns. 5. Each property of an entity must have a proper datatype. 6. Before modifying the code directly - first check whether Fiori MCP server provides a suitable function or tool, or if a specialized skill exists (e.g.`sap-fiori-analytical-chart`).
The Fiori MCP can create the following application templates for both CAP and standalone project backends:
1. **FE_LROP** - List Report Object Page (most common, OData V2/V4) 2. **FE_ALP** - Analytical List Page (OData V2/V4) 3. **FE_OVP** - Overview Page (OData V2/V4) 4. **FE_WORKLIST** - Worklist (OData V2/V4) 5. **FE_FEOP** - Form Entry Object Page (OData V4 only) 6. **FE_FPM** - Flexible Programming Model / Custom Page (OData V4 only) 7. **FF_SIMPLE** - Basic SAPUI5 Freestyle template (can work without a data source)
The Fiori MCP can add the following page types to existing applications:
1. **ListReport** - Table view with filtering and search 2. **ObjectPage** - Detail page for viewing/editing records 3. **CustomPage** - Fully custom page with your own views
1. The fiori app must be created in the `app` folder under the CAP application root folder created before with `cds init` operation. This root folder is always a subfolder directly under working directory. 2. When creating UI applications following a CAP application summary, make sure to use UI application names as described in the project structure of the summary, unless user explicitly requested otherwise. 3. On any follow-up request to change or modify the UI of the full stack CAP application, always try first to make the change in the fiori app unless really required in service. 4. Provide primary keys of type UUID for all entities. 5. When creating sample data in CSV files, all primary keys and foreign keys MUST be in UUID format (e.g., `550e8400-e29b-41d4-a716-446655440001`).
1. For standalone Fiori projects based on external services, the application is created at the root level by Fiori MCP tools. 2. **Destination or SAP System Name**: If the user doesn't provide a destination name or SAP system name, use the Fiori MCP Server to retrieve and present available destinations/systems for user selection. 3. **Fetching OData Service Metadata** (for initial app creation only): Refer to the tools instructions for downloading OData service metadata. If Service Center MCP is available use that, otherwise use the Fiori MCP Server to download the metadata file. To *refresh* metadata in an already-created app, see point 8 below. 4. Annotations should primarily be maintained in the backend service, and only app-specific UI customizations or overrides should be placed in local (frontend) annotations. 5. Use frontend annotations only for app-specific UI tweaks (e.g., `/webapp/annotations/annotation.xml`) referenced in `manifest.json` with matching `uri` and `localUri` values:
"annotation": {
"type": "ODataAnnotation",
"uri": "annotations/annotation.xml",
"settings": {
"localUri": "annotations/annotation.xml"
}
}6. Standalone Fiori projects connect to remote OData V2 or V4 services (defined in `manifest.json` dataSources). 7. **OData Service Metadata is Read-Only**: The service metadata file (`/webapp/localService/mainService/metadata.xml`) referenced in `manifest.json` must not be edited locally. Any changes to entity definitions, properties, or service structure must be made at the backend source:
"dataSources": {
"mainService": {
"uri": "/path/to/odata/service/",
"type": "OData",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 visual filters (chart-based) to SAP Fiori Elements filter bar or value help using CAP or ABAP RAP. Use when asked to add…
Add analytical chart (chart + table hybrid) to SAP Fiori Elements List Report using aggregated data. Supports CAP and ABAP RAP…
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…