/sap-fiori-tools

name: sap-fiori-tools
description: |
  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).
license: GPL-3.0
metadata:
  maintainer: "Eduard Jiglau"
  maintainer_email: "hello@sap-ai-skills.com"
  website: "https://sap-ai-skills.com"
  version: "2.4.1"
  last_verified: "2026-02-26"

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
• **sap-dependency-security**: Use when tightening npm/JavaScript supply-chain controls, exact MCP server pins, and dependency updates

When to Use This Skill

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.

Table of Contents

• [Overview](#overview)
• [Sample Projects](#sample-projects)
• [Quick Start Commands](#quick-start-commands)
• [Application Generation](#application-generation)
• [Page Editor Configuration](#page-editor-configuration)
• [Annotations Development](#annotations-development)
• [MCP Tools (AI-Assisted Development)](#mcp-tools-ai-assisted-development)
• [Bundled Resources](#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](https://github.com/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
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

1. **SAP System** - Connect to ABAP on-premise or BTP systems 2. **CAP Project** - Use local Node.js or Java CAP project 3. **EDMX File** - Upload metadata for mock-only development 4. **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 fil