🇺🇸English
SAP Fiori Tools Development Skill
Related Skills
- sapui5 : Use for underlying UI5 framework details, custom control development, and advanced UI patterns
- sap-cap-capire : Use for CAP service integration, OData consumption, and backend service configuration
- sap-abap-cds : Use when consuming ABAP CDS views as OData services or working with ABAP backends
- sap-btp-cloud-platform : Use for deployment targets, BTP destination configuration, and Cloud Foundry deployment
- sap-api-style : Use when documenting OData APIs or following API documentation standards for Fiori apps
Comprehensive guidance for developing SAP Fiori applications using SAP Fiori tools extensions.
Table of Contents
- Overview
- Sample Projects
- Quick Start Commands
- Application Generation
- Page Editor Configuration
- Annotations Development
- MCP Tools (AI-Assisted Development)
- Bundled Resources
Overview
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
Sample Projects
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
Quick Start Commands
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
Application Generation
Fiori Elements Floorplans
| 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 |
Data Source Options
- SAP System - Connect to ABAP on-premise or BTP systems
- CAP Project - Use local Node.js or Java CAP project
- EDMX File - Upload metadata for mock-only development
- SAP Business Accelerator Hub - Development/testing only (deprecated)
Generated Project Structure
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
Page Editor Configuration
The Page Editor provides visual configuration for Fiori Elements pages.
List Report Page Elements
- Filter Fields - Configure filter bar with value helps
- Table - Configure columns, actions, row selection
- Multiple Views - Create tabbed table views
- Analytical Chart - Add data visualizations
Object Page Elements
- Header - Configure header facets and actions
- Sections - Form, Table, Identification, Chart, Group sections
- Footer - Configure footer actions
Extension-Based Elements (OData V4)
| 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.
Annotations Development
Language Server Features
- Code Completion (
Ctrl/Cmd + Space) - Context-aware suggestions
- Micro-Snippets - Insert complete annotation blocks
- Diagnostics - Validation against vocabularies
- i18n Support - Externalize translatable strings
- Peek/Go to Definition - Navigate to annotation sources
Supported Vocabularies
OASIS 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
Annotation Files Location
- CDS files : CAP project
.cds files
- XML files :
webapp/annotations/*.xml
For annotation patterns, see references/annotations.md.
Preview Options
NPM Scripts
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
Run Control
Configure via launch.json in .vscode/ folder. Supports:
- Multiple run configurations per workspace
- VS Code and BAS integration
- App-to-app navigation preview
Mock Data
- Data Editor - Visual mock data management
- AI Generation - Generate contextual mock data (requires SAP Build Code)
- MockServer - Automatic mock server setup
For preview details, see references/preview.md.
Deployment
ABAP Deployment
Prerequisites :
- SAP_UI 7.53+
- SAPUI5 ABAP Repository service enabled
- S_DEVELOP authorization
Configuration :
npx fiori add deploy-config # Generate ui5-deploy.yaml
npm run deploy # Execute deployment
Generated Files : ui5-deploy.yaml, updated package.json
Cloud Foundry Deployment
Prerequisites :
- MTA tool:
npm i -g mta
- CF CLI with multiapps plugin
- HTML5 Repository service instance
Configuration :
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.
Fiori Launchpad Configuration
Add FLP tile configuration via:
Fiori: Add Fiori Launchpad Configuration
Required Parameters :
- Semantic Object (unique identifier)
- Action (e.g., "display")
- Title
- Subtitle (optional)
Configuration updates manifest.json with inbound navigation.
Adaptation Projects
Extend existing Fiori applications without modifying source code.
Prerequisites
On-Premise (VS Code) :
- SAP_UI 7.54+, SAPUI5 1.72+
- Base app must have manifest.json
- Cannot use ABAP Cloud packages
S/4HANA Cloud & BTP ABAP:
- Application must be "released for extensibility"
- 3-system landscape with developer tenant
- Required business catalogs assigned
Adaptation Workflow
- Create adaptation project via Template Wizard
- Make UI adaptations in Adaptation Editor
- Preview adaptation
- Deploy to ABAP repository
Adaptation Capabilities
| 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.
AI-Powered Generation
Project Accelerator / Joule
Generate complete CAP projects with Fiori UI from business requirements.
Input Formats : Text, Images, or Combined
Generated Output :
- Entity definitions and associations
- Code lists and value helps
- List Report applications
- Object Page configurations
- Sample data
Limitations :
- No charts or specialized headers
- Do not include personal/sensitive data in requirements
AI Mock Data Generation
Generate contextual mock data using entity property names (requires SAP Build Code subscription).
Project Functions
| 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 |
Project Validation Checks
- Project - Verify package.json, manifest.json, ui5.yaml
- Annotation - Validate annotation files
- Specification - Check manifest and changes folder
- ESLint - Run ESLint if configured
Building Blocks (OData V4)
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 |
Troubleshooting
Common Issues
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
CLI Help
npx fiori help # List available commands
npx fiori deploy help # Deployment command help
Migration from SAP Web IDE
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.
Guided Development (76+ Guides)
Access step-by-step implementation guides:
Fiori: Open Guided Development
Guide Categories :
- Building Blocks (Chart, Filter Bar, Table)
- Page Elements (Cards, Header Facets, Sections)
- Table Enhancements (Column types, Actions)
- Filtering & Navigation
- Configuration (Variant management, Side effects)
- Extensions (Custom actions, sections, columns)
Reference Documentation
For detailed information on specific topics:
MCP Tools (AI-Assisted Development)
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.
Available Tools
| 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 |
Typical Workflow
- Use
search_docs to find annotation patterns or Fiori Elements configuration options
- Use
list_fiori_apps to discover apps in the current workspace
- Use
list_functionalities to see what modifications are supported
- Use
get_functionality_details to understand required parameters
- Use
execute_functionality to apply the change
Complementary MCP Servers
SAP recommends using alongside:
- sapui5 skill: includes
@ui5/mcp-server for UI5 framework tooling
- sap-cap-capire skill: includes
@cap-js/mcp-server for CAP backend
Bundled Resources
Reference Documentation
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 options
Documentation Sources
Primary 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/ |
SAP Resources :
Weekly Installs
109
Repository
secondsky/sap-skills
GitHub Stars
162
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli101
codex101
opencode101
github-copilot98
kimi-cli93
amp93
