Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From sap-fiori-tools
Generates and configures SAP Fiori Elements/Freestyle SAPUI5 apps with VS Code extensions: Page Editor, annotations, Service Modeler, ABAP/Cloud Foundry deployment, and AI-assisted development.
npx claudepluginhub secondsky/sap-skills --plugin sap-fiori-toolsHow this skill is triggered — by the user, by Claude, or both
Slash command
/sap-fiori-tools:sap-fiori-toolsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- **sapui5**: Use for underlying UI5 framework details, custom control development, and advanced UI patterns
Develops SAP UI5 applications: freestyle and Fiori Elements apps, custom controls, OData v2/v4 integration, data binding, MVC patterns, routing, QUnit/OPA5 testing, performance, accessibility.
Guides SAP CAP development using Capire: CDS models/services, HANA/SQLite/PostgreSQL databases, Node.js/Java runtimes, Fiori UIs, BTP Cloud Foundry/Kyma deployment, auth/multitenancy, OData.
Guides development of business apps on SAP BTP using CAP (Node.js/Java) or ABAP Cloud, for Cloud Foundry/Kyma deployments, HANA integration, Fiori UIs, CI/CD pipelines, and observability.
Share bugs, ideas, or general feedback.
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:
git clone [https://github.com/SAP-samples/fiori-tools-samples](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 config
The 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.
npm 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:
npx 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:
npx 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 Configuration
Required 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:
# macOS/Linux
DEBUG=ux-odata-client npm run deploy
# Windows
set DEBUG=ux-odata-client & npm run deploy
npx fiori help # List available commands
npx fiori deploy help # Deployment command help
Migrate existing projects using:
Fiori: Migrate Project for use in Fiori tools
Supported 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 Development
Guide 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.
| 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: