Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From sap-fiori-tools
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 Project Accelerator/Joule. Technologies: SAP Fiori Elements, SAPUI5, OData V2/V4, CAP, SAP BTP, ABAP, Cloud Foundry, fiori-mcp-server (MCP tools for AI-assisted generation).
npx claudepluginhub andreafusar/https-github.com-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
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
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: