Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and SAP Business Application Studio. Use when: generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor for List Report or Object Page, working with annotations and Service Modeler, setting up deployment to ABAP or Cloud Foundry, creating adaptation projects, using Guided Development, previewing with mock data or live data, configuring SAP Fiori launchpad, or using AI-powered generation with P
.claude/skills/secondsky-sap-fiori-tools/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 89% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 105% | 0% |
| case-04 | ✗→✓ | ▲ Improved | 158% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 190% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 100% | 0% |
Use this skill when generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor/List Report/Object Page behavior, editing annotations, previewing with mock or live data, deploying to ABAP or Cloud Foundry, building adaptation projects, or using Fiori MCP/generation tooling.
Comprehensive guidance for developing SAP Fiori applications using SAP Fiori tools extensions.
SAP Fiori tools is a collection of extensions that simplifies SAP Fiori elements and SAPUI5 application development. It includes six main components:
| Component | Purpose | |-----------|---------| | Application Wizard | Generate Fiori Elements and Freestyle SAPUI5 templates | | Application Modeler | Visual Page Map and Page Editor for configuration | | Guided Development | Step-by-step feature implementation guides | | Service Modeler | Visualize OData service metadata and annotations | | Annotations Language Server | Code completion, diagnostics, i18n for annotations | | Environment Check | Validate setup and destination configurations |
Minimum SAPUI5 Version: 1.65+ Support Component: CA-UX-IDE
Official SAP sample repository with Fiori Elements applications built using SAP Fiori tools:
Repository: SAP-samples/fiori-tools-samples
| Folder | Content | |--------|---------| | V2/ | OData V2 Fiori Elements samples | | V4/ | OData V4 Fiori Elements samples | | cap/ | CAP project integration samples | | app-with-tutorials/ | Tutorial companion projects |
Quick Start:
bashgit clone https://github.com/SAP-samples/fiori-tools-samples cd fiori-tools-samples/V4/apps/salesorder npm install npm start
Access features via Command Palette (Cmd/Ctrl + Shift + P):
Fiori: Open Application Generator # Create new application
Fiori: Open Application Info # View project commands
Fiori: Open Page Map # Visual navigation editor
Fiori: Open Guided Development # Feature implementation guides
Fiori: Open Service Modeler # Explore OData service
Fiori: Add Deployment Configuration # Setup ABAP or CF deployment
Fiori: Add Fiori Launchpad Configuration # Configure FLP tile
Fiori: Validate Project # Run project validation
Fiori: Open Environment Check # Troubleshoot destinations| Floorplan | OData V2 | OData V4 | Use Case | |-----------|----------|----------|----------| | List Report Page | Yes | Yes | Browse large datasets, navigate to details | | Worklist Page | Yes | 1.99+ | Process work items, task completion | | Analytical List Page | Yes | 1.90+ | Data analysis, KPI visualization | | Overview Page | Yes | Yes | Role-based dashboards, multi-card views | | Form Entry Object Page | Yes | Yes | Structured data entry | | Custom Page | No | Yes | Extensible custom UI with building blocks |
webapp/
├── manifest.json # App descriptor
├── Component.js # UI5 component
├── localService/ # Mock data and metadata
│ ├── metadata.xml
│ └── mockdata/
└── annotations/ # Local annotation files
package.json
ui5.yaml # UI5 tooling config
ui5-local.yaml # Local development configThe Page Editor provides visual configuration for Fiori Elements pages.
| Element | Location | Description | |---------|----------|-------------| | Custom Column | Table | Add custom columns with fragments | | Custom Section | Object Page | Add custom sections with views | | Custom Action | Header/Table | Add action buttons with handlers | | Custom View | List Report | Add custom tab views | | Controller Extension | Page | Override lifecycle methods |
For detailed configuration, see references/page-editor.md.
Ctrl/Cmd + Space) - Context-aware suggestionsOASIS OData v4: Core, Capabilities, Aggregation, Authorization, JSON, Measures, Repeatability, Temporal, Validation
SAP Vocabularies: Analytics, CodeList, Common, Communication, DataIntegration, DirectEdit, Graph, Hierarchy, HTML5, ODM, PDF, PersonalData, Preview, Session, UI
.cds fileswebapp/annotations/*.xmlFor annotation patterns, see references/annotations.md.
bashnpm start # Live data from backend npm run start-mock # Mock data via MockServer npm run start-local # Mock data + local SAPUI5 resources npm run start-noflp # Without Fiori launchpad sandbox
Configure via launch.json in .vscode/ folder. Supports:
For preview details, see references/preview.md.
Prerequisites:
Configuration:
bashnpx fiori add deploy-config # Generate ui5-deploy.yaml npm run deploy # Execute deployment
Generated Files: ui5-deploy.yaml, updated package.json
Prerequisites:
npm i -g mtaConfiguration:
bashnpx fiori add deploy-config # Select Cloud Foundry npm run build # Generate mta.yaml npm run deploy # Deploy to CF
Generated Files: mta.yaml, xs-app.json, xs-security.json
For deployment details, see references/deployment.md.
Add FLP tile configuration via:
Fiori: Add Fiori Launchpad ConfigurationRequired Parameters:
Configuration updates manifest.json with inbound navigation.
Extend existing Fiori applications without modifying source code.
On-Premise (VS Code):
S/4HANA Cloud & BTP ABAP:
| Adaptation | Description | |------------|-------------| | Control Variants | Create page variants/views | | Fragments | Add UI fragments to extension points | | Controller Extensions | Override/extend controller methods | | App Descriptor Changes | Modify manifest.json settings | | OData Service | Add/replace OData services | | Component Usages | Add SAPUI5 component references |
For adaptation details, see references/adaptation-projects.md.
Generate complete CAP projects with Fiori UI from business requirements.
Input Formats: Text, Images, or Combined
Generated Output:
Limitations:
Generate contextual mock data using entity property names (requires SAP Build Code subscription).
| Function | Command | |----------|---------| | Application Info | Fiori: Open Application Info | | Project Validation | Fiori: Validate Project | | Environment Check | Fiori: Open Environment Check | | Data Editor | Via Application Info page | | Service Metadata | Fiori: Open Service Modeler | | System Connections | Manage SAP Systems in VS Code |
Reusable UI components for custom pages and sections:
| Block | Use Case | |-------|----------| | Chart | Data visualization | | Filter Bar | Query filtering | | Table | Tabular data display | | Page | Custom page container | | Rich Text Editor | Content editing in custom sections |
Port 8080 in use: System auto-selects next available port
HTTPS/SSL errors: Configure browser to trust localhost certificates
Deployment 400 errors: Check /IWFND/ERROR_LOG, configure virus scan in /IWFND/VIRUS_SCAN
Debug deployment:
bash# macOS/Linux DEBUG=ux-odata-client npm run deploy # Windows set DEBUG=ux-odata-client & npm run deploy
bashnpx fiori help # List available commands npx fiori deploy help # Deployment command help
Migrate existing projects using:
Fiori: Migrate Project for use in Fiori toolsSupported Types: Fiori Elements (V2/V4), Freestyle SAPUI5, Adaptation Projects, Extensibility Projects
Post-Migration: Run npm run deploy-config to update deployment configuration.
For migration details, see references/getting-started.md.
Access step-by-step implementation guides:
Fiori: Open Guided DevelopmentGuide Categories:
For detailed information on specific topics:
The fiori-tools MCP server (@sap-ux/fiori-mcp-server) integrates AI coding assistants directly with Fiori development, providing semantic documentation search and programmatic app generation.
Prerequisite: Node.js 20+. No authentication required. The bundled MCP config pins @sap-ux/fiori-mcp-server@1.11.7; MCP package pins are governed by sap-dependency-security and validated by npm run validate:mcp-security.
| Tool | Description | |------|-------------| | search_docs | Semantic search across Fiori Elements, Annotations, UI5, and Fiori tools docs | | list_fiori_apps | Scan a directory to identify existing Fiori apps available for modification | | list_functionalities | Return supported operations for creating or modifying applications | | get_functionality_details | Retrieve required parameters for a specific operation | | execute_functionality | Execute the creation or modification with provided parameters |
search_docs to find annotation patterns or Fiori Elements configuration optionslist_fiori_apps to discover apps in the current workspacelist_functionalities to see what modifications are supportedget_functionality_details to understand required parametersexecute_functionality to apply the changeSAP recommends using alongside:
@ui5/mcp-server for UI5 framework tooling@cap-js/mcp-server for CAP backendreferences/getting-started.md - Installation, migration, ADT integration, commandsreferences/configuration.md - MTA, middlewares, SAPUI5 versions, project functionsreferences/page-editor.md - Page Editor configuration detailsreferences/annotations.md - Annotation patterns and examplesreferences/deployment.md - Deployment configuration detailsreferences/adaptation-projects.md - Adaptation project workflowsreferences/preview.md - Preview and testing optionsPrimary Source: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs
Last Updated: 2025-11-22
| Section | Documentation Link | |---------|-------------------| | Getting Started | Getting-Started-with-SAP-Fiori-Tools/ | | Generating Apps | Generating-an-Application/ | | Developing | Developing-an-Application/ | | Previewing | Previewing-an-Application/ | | Deploying | Deploying-an-Application/ | | Project Functions | Project-Functions/ | | Adaptation Projects | Root docs folder |
SAP Resources:
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 20,124 | 17,423 | -13% | 1 | 1 | 0% | 3,773 | 7,126 | +89% | 0 | 0 | — |
case-02 | fail→pass | 21,190 | 21,053 | -1% | 1 | 1 | 0% | 3,555 | 7,279 | +105% | 0 | 0 | — |
case-03 | pass→pass | 8,028 | 1,741 | -78% | 1 | 1 | 0% | 1,434 | 4,016 | +180% | 0 | 0 | — |
case-04 | fail→pass | 8,508 | 2,428 | -71% | 1 | 1 | 0% | 1,650 | 4,254 | +158% | 0 | 0 | — |
case-05 | pass→pass | 11,715 | 2,936 | -75% | 1 | 1 | 0% | 1,951 | 4,185 | +115% | 0 | 0 | — |
case-06 | pass→pass | 4,646 | 2,347 | -49% | 1 | 1 | 0% | 794 | 4,128 | +420% | 0 | 0 | — |
case-07 | fail→pass | 25,523 | 4,383 | -83% | 1 | 1 | 0% | 1,527 | 4,434 | +190% | 0 | 0 | — |
case-08 | fail→pass | 10,535 | 2,879 | -73% | 1 | 1 | 0% | 2,126 | 4,245 | +100% | 0 | 0 | — |
case-09 | fail→fail | 5,740 | 3,981 | -31% | 1 | 1 | 0% | 941 | 4,505 | +379% | 0 | 0 | — |
case-10 | pass→pass | 3,301 | 2,929 | -11% | 1 | 1 | 0% | 574 | 4,221 | +635% | 0 | 0 | — |
case-11 | fail→pass | 6,818 | 2,475 | -64% | 1 | 1 | 0% | 1,160 | 4,154 | +258% | 0 | 0 | — |
case-12 | pass→pass | 11,133 | 8,953 | -20% | 1 | 1 | 0% | 1,916 | 5,319 | +178% | 0 | 0 | — |
case-13 | fail→pass | 11,101 | 4,238 | -62% | 1 | 1 | 0% | 1,763 | 4,411 | +150% | 0 | 0 | — |
case-14 | pass→pass | 21,391 | 5,285 | -75% | 1 | 1 | 0% | 2,073 | 4,609 | +122% | 0 | 0 | — |
case-15 | pass→pass | 10,512 | 5,967 | -43% | 1 | 1 | 0% | 1,845 | 4,820 | +161% | 0 | 0 | — |
case-16 | pass→pass | 5,121 | 2,981 | -42% | 1 | 1 | 0% | 924 | 4,280 | +363% | 0 | 0 | — |
case-17 | fail→pass | 12,651 | 3,291 | -74% | 1 | 1 | 0% | 2,021 | 4,149 | +105% | 0 | 0 | — |
case-18 | pass→pass | 11,688 | 9,657 | -17% | 1 | 1 | 0% | 1,781 | 5,284 | +197% | 0 | 0 | — |
case-19 | fail→pass | 9,036 | 2,161 | -76% | 1 | 1 | 0% | 1,670 | 4,091 | +145% | 0 | 0 | — |
case-20 | pass→pass | 15,582 | 15,209 | -2% | 1 | 1 | 0% | 2,957 | 6,818 | +131% | 0 | 0 | — |
case-21 | pass→pass | 8,878 | 6,826 | -23% | 1 | 1 | 0% | 1,670 | 5,000 | +199% | 0 | 0 | — |
case-22 | pass→pass | 7,418 | 6,481 | -13% | 1 | 1 | 0% | 1,334 | 4,963 | +272% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 21 counted toward the lift figure. The other 1 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +41 percentage points is the difference between those two pass rates over the 21 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.