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.
/plugin marketplace add secondsky/sap-skills/plugin install sap-fiori-tools@sap-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdreferences/adaptation-projects.mdreferences/annotations.mdreferences/configuration.mdreferences/deployment.mdreferences/getting-started.mdreferences/page-editor.mdreferences/preview.mdComprehensive 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:
references/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:
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.